مفهوم المان و تگ در HTML و نمونه یک سند ساده اچ‌تی‌ام‌ال
در این قسمت از مجموعه آموزشی HTML با المان ها و تگ های اچ‌تی‌ام‌ال آشنا می‌شوید. همینطور کد یک سند ساده HTML را در عمل مشاهده می‌کنید.
المان و تگ در اچ‌تی‌ام‌ال
در اچ‌تی‌ام‌ال ساختار صفحات وب با کمک مجموعه‌ای از المان (Element) ها یا اجزا مشخص می‌شود. به عبارت بهتر برای اینکه به بخش‌های مختلف محتوای صفحه، ظاهر یا معنا و مفهوم خاصی داده شود هر بخش در قالب المان‌هایی مشخص می‌شود.
هر المان و نوع آن توسط تگ (Tag) هایی که محتوای المان را محصور می‌کنند تعیین می‌شود. برای مثال تگ های HTML می‌توانند متنی ساده در یک صفحه وب را به یک عنوان، یک پاراگراف یا یک پیوند تبدیل کنند و یا کلمه‌ای را به نحوی (برای مثال از طریق Bold یا Italic کردن) برجسته کنند.
تگ شروع یک المان به شکل <tagname> و تگ پایان نیز به صورت </tagname> ظاهر می‌شود. به عنوان مثال با قرار دادن عبارت Hello, World! مابین تگ آغازین <p> و تگ پایانی </p>، این عبارت به یک پاراگراف تبدیل می‌شود.
<p>Hello, World!</p>در حالت کلی تگ ها ابتدا و انتهای یک المان ظاهر می‌شوند. از ابتدای تگ شروع تا انتهای تگ پایانی و محتوای مابین آن‌ها المان را تشکیل می‌دهد.
خصوصیت های المان در HTML
هر المان می‌تواند خصوصیت (Attribute) یا ویژگی هایی هم داشته باشد که در تگ شروع المان درج می‌شوند. این خصوصیت ها شامل اطلاعات بیشتری در مورد المان هستند و معمولا در قالب جفت “نام خصوصیت/مقدار” مشخص می‌شوند. در مثال زیر نمونه‌ای از درج یک خصوصیت با نام class در تگ شروع المان <p> را مشاهده می‌کنید که دارای مقدار myclass می‌باشد.
<p class="myclass">Hello, World!</p>المان های خالی و تو در تو در HTML
لزوما تمام المان های HTML به تگ پایانی نیاز ندارند. برخی المان ها مانند تصاویر (یا المان های <img>) و المان های <br> تنها توسط یک تگ مشخص می‌شوند و فاقد محتوای داخلی هستند. به این نوع المان ها، المان های خالی (Empty element) و به تنها تگ آن‌ها، تگ خودبسته‌شونده (Self closing) گفته می‌شود.
<img src="sample.jpg" alt="sample image" width="600" height="400">گفتنی است المان‌ها می‌توانند مشابه با آنچه خواهید دید داخل یک المان دیگر نیز قرار بگیرند. در این حالت با مفهوم المان‌های تو در تو (Nested elements) روبرو هستید.
بیشتر بخوانید: آشنایی با المان های تو در تو در 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.
