مفهوم المان و تگ در HTML و نمونه یک سند ساده اچ‌تی‌ام‌ال

در این قسمت از مجموعه آموزشی HTML با المان ها و تگ های اچ‌تی‌ام‌ال آشنا می‌شوید. همینطور کد یک سند ساده HTML را در عمل مشاهده می‌کنید.

المان و تگ در اچ‌تی‌ام‌ال

در اچ‌تی‌ام‌ال ساختار صفحات وب با کمک مجموعه‌ای از المان (Element) ها یا اجزا مشخص می‌شود. به عبارت بهتر برای اینکه به بخش‌های مختلف محتوای صفحه، ظاهر یا معنا و مفهوم خاصی داده شود هر بخش در قالب المان‌هایی مشخص می‌شود.

هر المان و نوع آن توسط تگ (Tag) هایی که محتوای المان را محصور می‌کنند تعیین می‌شود. برای مثال تگ های HTML می‌توانند متنی ساده در یک صفحه وب را به یک عنوان، یک پاراگراف یا یک پیوند تبدیل کنند و یا کلمه‌ای را به نحوی (برای مثال از طریق Bold یا Italic کردن) برجسته کنند.

تگ شروع یک المان به شکل <tagname> و تگ پایان نیز به صورت </tagname> ظاهر می‌شود. به عنوان مثال با قرار دادن عبارت Hello, World! مابین تگ آغازین <p> و تگ پایانی </p>، این عبارت به یک پاراگراف تبدیل می‌شود.

در حالت کلی تگ ها ابتدا و انتهای یک المان ظاهر می‌شوند. از ابتدای تگ شروع تا انتهای تگ پایانی و محتوای مابین آن‌ها المان را تشکیل می‌دهد.

البته لزوما تمام المان های HTML به تگ پایانی نیاز ندارند. برخی المان ها مانند تصاویر تنها توسط یک تگ مشخص می‌شوند و فاقد محتوای داخلی هستند. به این نوع المان ها، المان های خالی (Empty element) گفته می‌شود. گفتنی است المان‌ها می‌توانند مشابه آنچه در ادامه می‌بینید داخل یک المان دیگر نیز قرار بگیرند. در این حالت با مفهوم المان‌های تو در تو (Nested elements) روبرو هستید.

بیشتر بخوانید: آشنایی با المان های تو در تو در HTML

هر المان می‌تواند ویژگی (Attribute) هایی هم داشته باشد که در تگ شروع المان درج می‌شوند. این ویژگی‌ها شامل اطلاعات بیشتری در مورد المان هستند و معمولا در قالب جفت “نام ویژگی/مقدار” مشخص می‌شوند.

در تصویر زیر می‌توانید نمونه‌ای از ساختار کلی یک المان اچ‌تی‌ام‌ال را مشاهده کنید.

ساختار المان ها و تگ های شروع و پایان در اچ تی ام ال HTML
ساختار المان‌ها و تگ‌های شروع و پایان در HTML

نکته‌ای در مورد بزرگی و کوچکی حروف در HTML

بهتر است بدانید HTML نسبت به بزرگی و کوچکی حروف حساس نیست. بنابراین تگ‌های <P> و <p> یا <IMG> و <img> با یکدیگر تفاوتی ندارد. با این حال به شدت توصیه می‌کنیم همیشه از حروف کوچک در نام تگ‌های HTML و … استفاده کنید.

نمونه یک سند HTML ساده

در ادامه می‌توانید نمونه‌ای از کد یک سند HTML ساده و المان های مختلف موجود در آن را مشاهده کنید. برای مشاهده نتیجه این کد HTML کافیست ابتدا آن را کپی کنید و در ویرایشگر متن یا ویرایشگر سورس کد خود الصاق (Paste) کنید. سپس آن را در قالب یک فایل با پسوند .html ذخیره کنید و فایل ایجاد شده را توسط مرورگر وب باز کنید.

<!DOCTYPE html>
<html>

<head>
  <title>Hello, World!</title>
</head>

<body>
  <p>Hello, World!</p>
</body>

</html>

حاصل کد HTML فوق صفحه وبی با عنوان Hello, World! خواهد بود که در آن همین عبارت در قالب یک پاراگراف نمایش داده می‌شود. همین صفحه را می‌توانید همراه با کد در بخش زیر مشاهده کنید. در قسمت آتی با جزئیات المان ها و تگ های استفاده شده در این مثال آشنا خواهید شد.

See the Pen
Hello World, Simple HTML Document
by techdic (@techdic)
on CodePen.

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *