ساختار کلی یک سند HTML

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

بخش‌های تشکیل دهنده یک سند HTML

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

<!DOCTYPE html>
<html>

<head>
  <title>Hello World!</title>
  <meta charset="utf-8">
</head>

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

</html>

اجزای تشکیل دهنده این سند عبارتند از:

<!DOCTYPE html>: این اظهاریه (یا Declaration)، نوع سند (یا Document type) را مشخص می‌کند و به مرورگرها در نمایش صحیح صفحه‌های وب کمک می‌کند. به عبارت بهتر این عبارت به مرورگر اعلام می‌کند چگونه می‌بایست سند را تفسیر کند.

اظهاریه نوع سند برای HTML5 به صورت <!DOCTYPE html> مشخص می‌شود. اما برای اسناد قدیمی‌تر از اظهاریه‌های طولانی‌تری استفاده می‌شود. به عنوان مثال برای HTML 4.01 از اظهاریه نوع سند زیر استفاده می‌شود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html></html>: المان <html> المان ریشه‌ای (Root element) در صفحه‌های HTML است. به عبارت بهتر این المان تمام محتوا و المان‌های دیگر صفحه را دربرمی‌گیرد.

<head></head>: المان <head> محتواهای غیرنمایشی صفحه را شامل می‌شود (مانند اطلاعاتی پیرامون صفحه). عنوان صفحه، توصیف صفحه (که در نتایج موتورهای جستجو نمایش داده می‌شود)، متاتگ‌ها، استایل های محلی یا ارجاع به استایل های خارجی CSS و … از جمله مواردی هستند که در این بخش قرار می‌گیرد.

<body></body>: المان <body> بدنه سند را مشخص می‌کند. تمام محتواهایی که در صفحه نمایش داده می‌شود شامل عناوین، پاراگراف‌ها، تصاویر، پیوندها و … داخل این المان قرار می‌گیرند.

<title></title>: المان <title> عنوان صفحه را مشخص می‌کند. این عنوان روی زبانه یا نوار عنوان مرورگر نمایش داده می‌شود.

<meta charset=”utf-8″>: این المان مجموعه کاراکتر یا نویسه (Character set) سند را به UTF-8 تنظیم می‌کند. این مجموعه از اغلب کاراکترهای موجود در زبان‌های بشری پشتیبانی می‌کند و درنتیجه امکان نمایش نوشته‌هایی به زبان‌های مختلف را در صفحه وب فراهم می‌کند. این المان از جمله المان های خالیست و تنها شامل تگ شروع است.

همانطور که می‌بینید دو المان فوق داخل المان <head> قرار گرفته‌اند و بنابراین جزء محتوای آشکار صفحه نیستند.

<p></p>: المان <p> یک پاراگراف یا بند را تعریف می‌کند. با توجه به اینکه پاراگراف ها از جمله محتواهای قابل مشاهده در صفحه هستند این المان داخل المان <body> قرار گرفته است.

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

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

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

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