این مقاله به بحث درباره عناصر HTML خواهد پرداخت، علاوه بر این بایستی درک کنید که چطور این موارد در یک پروژه بزرگ جای میگیرند تا ساختار سند HTML را شکل دهند. ساختار یک صفحه وب به صورت زیر است.
doctype
اولین موردی که در ساختار سند HTML ظاهر می شود تعریف doctype است. این عبارت به مرورگر (یا دیگر عاملین کاربری) اطلاعاتی را در خصوص زبانی که سند توسط آن نوشته شده می دهد، این عبارت را هر ویرایشگر وبی به صورت خودکار برای شما ایجاد خواهد کرد.
اگر ویرایشگر کد شما به صورت خودکار اینکار را انجام نداد، می توانید عبارت <DOCTYPE html!> را برای اسناد html وارد کنید.
ساختار سند
یک صفحه وب را می توان به عنوان یک درخت در نظر گرفت که می تواند شامل هر تعداد شاخه باشد.
اگر مقایسه کنیم، می توانیم ببینیم که عنصر html در واقع شامل دو عنصر body و head است. head دو زیرشاخه دارد؛ یکی عنصر meta و دیگری title. عنصر body شامل تعدادی تیتر، پاراگراف و نقل قول است.
دقت داشته باشید که برخی از عناصر به صورتی استفاده می شوند که تگ های باز و بسته دارند. برای مثال، تگ p که به این صورت به کار می رود:
<p> lazy fox </p>
html
پس از اینکه doctype در سند تعریف شد، عنصر html می آید – این عنصر، عنصر ریشه ای درخت سند است و هر چیزی که در ادامه می آید، فرزندان آن عنصر ریشه هستند. اگر doctype سند به صورت XHTML تعریف شود، پس عنصر html نیازمند خصوصیت ><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>
عنصر html سند ما را به دو زیربخش با نام های head و body تقسیم می کند.
head
عنصر head شامل metadata می باشد؛ اطلاعاتی که خود سند را تعریف می کند یا آن را با منابع مرتبطی ارتباط می دهد.
مثال ساده زیر شامل عنصر title است که عنوان سند یا نام آن را نمایش می دهد و در واقع بیانگر آن است که سند چیست. محتوای داخل title می تواند برای ارایه تیتری استفاده شود که در نوار عنوان مرورگر استفاده می شود. همچنین این قسمت، تکه اطلاعات بسیار باارزشی است که خلاصه ای باارزش از صفحه را برای موتورهای جستجو فراهم می کند؛ محتوای title را برای موتورهای جستجو به نمایش در می آورد.
در مثال پیشین مقدار title یا عنوان صفحه برابر با Page title بود.
علاوه بر عنصر title، عنصر head می تواند شامل موارد زیر باشد:
- base: عبارت baseURL پیوند و منابع صفحه را معرفی می کند و پنجره هایی که محتوای لینک شده را نشان می‌دهند.
- link: به منبع اشاره می کند، اغلب به یک استایل که دستوراتی را در خصوص چگونگی نمایش عناصر مختلف در صفحه وب داشته، اشاره دارد.
- meta: اطلاعات بیشتری را در خصوص صفحه ارایه می کند؛ برای مثال، چه انکدینگ کاراکتری این صفحه از آن استفاده می کند، خلاصه ای از محتوای صفحه، دستوراتی در خصوص موتورهای جستجو که آیا یک محتوا را ایندکس کند یا خیر.
- object: یک نگهدارنده چندمنظوره و کلی برای یک شی چندرسانه ای ارایه می کند.
- script: از اسکریپت بیرونی استفاده کرده یا بدان اشاره می کند.
- style: تمام این عناصر بالقوه بوده و می توانند به هر ترتیبی در تگ head ظاهر شوند. بخاطر داشته باشید که هیچ یک از این عناصر لیست شده در اینجا در واقع در یک صفحه رندر شده نمایش داده نمی شوند اما برای اثرگذاری بر محتوای صفحه که در عنصر body آمده مورد استفاده قرار میگیرند.
body
اینجا جایی است که محتوای صفحه می آید. هرچیزی که شما در مرورگرتان می بینید داخل این عنصر قرار میگیرد؛ از جمله پاراگراف ها، لیست ها، لینک ها، تصاویر، جداول و … عنصر body یک سری خصوصیات منحصر به فرد خود را داشته که حالا از بین رفته اند اما جدا از این مساله، اینکه یک صفحه html چگونه به نظر می رسد کاملا بستگی به این عنصر و محتوای درون آن دارد.