مقدمه‌ای بر تگ‌ها، اِلِمان‌ها و خصوصیات (Attributes)
مقدمه‌ای بر تگ‌ها، اِلِمان‌ها و خصوصیات (Attributes) در HTML 🧩
سلام به همه علاقه‌مندان به دنیای جذاب وب! 👋 امروز می‌خوایم با سه تا مفهوم کلیدی و اساسی در HTML آشنا بشیم که مثل قطعات لگو هستن و با کنار هم قرار دادنشون، صفحات وب رو می‌سازیم: تگ‌ها، اِلِمان‌ها و خصوصیات (Attributes). اگه این مفاهیم رو خوب یاد بگیریم، دیگه نوشتن کدهای HTML برامون مثل آب خوردن می‌شه! 💧
این سه تا مفهوم، ابزارهای اصلی ما برای تعریف و ساختاردهی محتوا در صفحات وب هستن.
۱. تگ‌ها (Tags): آجرک‌های ساختمانی! 🧱
همونطور که قبلاً گفتیم، تگ‌ها دستورات اصلی HTML هستن که به مرورگر می‌گن چطور محتوا رو نمایش بده. تگ‌ها معمولاً با علامت ‘<' شروع می‌شن، بعد اسمشون میاد و با '>‘ بسته می‌شن.
اغلب تگ‌ها دو قسمتی هستن: یه تگ بازکننده (Opening Tag) و یه تگ پایان‌دهنده (Closing Tag).
<p>این یک پاراگراف است.</p>
- <p>: این تگ بازکننده هست که به مرورگر می‌گه “از اینجا به بعد، یه پاراگراف شروع می‌شه”.
- </p>: این تگ پایان‌دهنده هست که به مرورگر می‌گه “این پاراگراف تموم شد”.
البته بعضی تگ‌ها هم هستن که خودشون تموم می‌شن و نیازی به تگ پایان‌دهنده ندارن، مثل تگ نمایش عکس: <img>. به این‌ها تگ‌های تک (Self-closing Tags) می‌گن.
۲. اِلِمان‌ها (Elements): خودِ محتوا با آجرک‌هاش! 🏗️
وقتی یه تگ بازکننده، یه محتوا، و یه تگ پایان‌دهنده رو کنار هم بذاریم، یه اِلِمان (Element) رو ساختیم. اِلِمان، واحد اصلی ساختار صفحه وب هست.
مثال:
<h2>عنوان اصلی بخش</h2>
توی این مثال:
- <h2>: تگ بازکننده
- “عنوان اصلی بخش”: این محتوا هست که داخل تگ قرار گرفته.
- </h2>: تگ پایان‌دهنده
کل این مجموعه (تگ بازکننده + محتوا + تگ پایان‌دهنده) با هم می‌شن یه اِلِمان `h2`.
اگه تگ تک باشه، خود تگ به همراه محتوایی که بهش نسبت داده می‌شه (اگه داشته باشه)، یه اِلِمان رو تشکیل می‌ده. مثلاً یه تگ تصویر:
<img src="logo.png" alt="لوگوی سایت">
این کلش با هم یه اِلِمان `img` هست.
اِلِمان‌ها مثل اسباب‌بازی‌های لگو هستن که باهاشون یه ساختمون بزرگ (صفحه وب) رو می‌سازیم.
۳. خصوصیات (Attributes): جزئیات و تنظیمات اِلِمان‌ها! ⚙️
خصوصیات یا Attributes، اطلاعات بیشتری در مورد یه اِلِمان به ما می‌دن و همیشه داخل تگ بازکننده نوشته می‌شن. اون‌ها به صورت جفت‌های “اسم-مقدار” (name-value) هستن.
مثال:
<a href="https://www.google.com">برو به گوگل</a>
توی این مثال:
- href: این اسم خصوصیت هست (که مخفف hypertext reference هست و آدرس مقصد لینک رو مشخص می‌کنه).
- “https://www.google.com”: این مقدار خصوصیت هست که آدرس واقعی رو مشخص می‌کنه.
خصوصیت `href` یه اطلاعات خیلی مهم به تگ `a` اضافه کرده و بدون اون، تگ `a` یه لینک معمولی محسوب نمی‌شه!
یه مثال دیگه با تگ تصویر:
<img src="flower.jpg" alt="یه گل زیبا" width="200" height="150">
اینجا:
- src (source): مسیر فایل عکس رو مشخص می‌کنه.
- alt (alternative text): یه متن جایگزین برای عکس ارائه می‌ده که اگه عکس لود نشد، نمایش داده بشه و برای سئو و دسترسی‌پذیری خیلی مهمه.
- width و height: ابعاد عکس رو بر حسب پیکسل مشخص می‌کنن.
خصوصیات مثل تنظیمات یا آپشن‌هایی هستن که به هر اِلِمان می‌دیم تا دقیقاً همون کاری که می‌خوایم رو انجام بده یا اطلاعات بیشتری در موردش به ما بده.
با فهمیدن این سه مفهوم کلیدی (تگ‌ها، اِلِمان‌ها و خصوصیات)، حالا دیگه می‌تونیم شروع کنیم به ساختن ساختارهای واقعی در صفحات وب. این‌ها پایه‌های کار ما هستن و هر چقدر بیشتر باهاشون ور بریم، حرفه‌ای‌تر می‌شیم! 😉