اجزای سازنده HTML با مثال و نکات کاربردی
در این مطلب شما را با اجزای سازنده اچ تی ام ال آشنا می کنیم.
اجزای سازنده HTML
هر سند HTML دارای دو عنصر سازنده اصلی است:
- تگ ها: هر تگ HTML دربردارنده محتوایی است و به آن معنای خاصی اعمال می کند. هر تگ بین دو علامت < و > نوشته می شود.
- صفات: یک صفت یا ویژگی در HTML اطلاعات اضافی در مورد عنصر ارائه می دهد. صفات در تگ شروع قرار می گیرند. هر صفت HTML دو قسمت دارد: نام صفت و مقدار صفت.
برای درک HTML، باید آن را مانند ساختار یک ساختمان در نظر بگیرید. اجزای سازنده آن بسیار ساده اما کلیدی هستند. در اینجا سلسله‌مراتب این اجزا را بررسی می‌کنیم:
۱. تگ‌ها (Tags)
تگ‌ها بلوک‌های اصلی HTML هستند که به مرورگر می‌گویند چه چیزی را نمایش دهد. تگ‌ها معمولاً به صورت جفت هستند:
-
تگ بازکننده:
<tagname> -
تگ بسته‌کننده:
</tagname> -
مثال:
<h1>عنوان اصلی</h1> -
نکته: برخی تگ‌ها "تک‌تگی" هستند و نیازی به بستن ندارند؛ مثل
<br>(خط جدید) یا<img>(تصویر).
۲. عناصر (Elements)
عنصر شامل تگ بازکننده، محتوا و تگ بسته‌کننده است. کل این مجموعه یک "عنصر" نامیده می‌شود.
-
مثال:
<p>این یک پاراگراف است.</p>
۳. ویژگی‌ها (Attributes)
ویژگی‌ها اطلاعات اضافی درباره عناصر به ما می‌دهند و همیشه در تگ بازکننده نوشته می‌شوند. این‌ها معمولاً به صورت name="value" (نام="مقدار") هستند.
-
مثال:
<a href="[https://google.com](https://google.com)">لینک به گوگل</a>-
در اینجا
hrefیک ویژگی است که آدرس لینک را مشخص می‌کند.
-
۴. ساختار پایه یک سند (Document Structure)
هر فایل HTML که می‌سازید، باید این ساختار اصلی را داشته باشد:
<!DOCTYPE html><html> <head> <title>عنوان صفحه در تب مرورگر</title> </head> <body> <!-- محتوای اصلی اینجا قرار می‌گیرد --> <h1>تیتر بزرگ</h1> <p>یک پاراگراف متن.</p> </body></html>-
<!DOCTYPE html>: به مرورگر می‌گوید که این سند با استاندارد HTML5 نوشته شده است. -
<html>: ریشه و ظرف اصلی کل محتوای صفحه. -
<head>: ظرف اطلاعات فنی (متا‌داده‌ها) که در صفحه نمایش داده نمی‌شود (مثل عنوان صفحه یا لینک به فایل‌های CSS). -
<body>: ظرفِ تمام چیزی که کاربر در صفحه می‌بیند (تصاویر، متن‌ها، لینک‌ها).
۵. درخت DOM (Document Object Model)
هنگامی که HTML توسط مرورگر خوانده می‌شود، به صورت یک درخت (Tree) در حافظه چیده می‌شود. هر عنصر در این درخت، "فرزند" یا "والد" عنصر دیگری است. درک این "والد-فرزندی" در هنگام یادگیری CSS برای طراحی، فوق‌العاده حیاتی است.
مفاهیم کاربردی برای شروع:
-
عناصر بلوکی (Block-level): مثل
<div>یا<p>که همیشه از یک خط جدید شروع می‌شوند و تمام عرض صفحه را می‌گیرند. -
عناصر درون‌خطی (Inline): مثل
<span>یا<a>که فقط به اندازه محتوای خود فضا اشغال می‌کنند و در کنار هم قرار می‌گیرند.
قواعد ساختاری
< نام تگ/> محتوا <” مقدار صفت” = نام صفت نام تگ>
- عناصر: هر عنصر HTML یک جزء مستقل است. همه چیزهایی که در تگ قرار می گیرند به عنوان عنصر در نظر گرفته می شوند.
مثال
>
The building blocks
This is a paragraph tag
<p style=”color: red”>The style is attribute of paragraph tag
The element contains tag, attribute and content
خروجی کد
The building blocks
This is a paragraph tag
The style is attribute of paragraph tag
The element contains tag, attribute and content
The style is attribute of paragraph tag
پاسخ