ساختار کلی HTML

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

فهرست مطالب

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

ساختار HTML

به نمونه کد زیر توجه کنید.

کد:

<!DOCTYPE html>
<html>
  <head>
    <title>CodeUni.Ir</title>
  </head>
  <body>
    <p>Hi</p>
  </body>
</html>

با توجه به مثال بالا خط به خط جلو می رویم.

اولین خط کد با استفاده از <!DOCTYPE html> در واقع اعلام می کنیم که این یک سند HTML5 است. (آخرین نسخه در زمان ارسال این مطلب)

خط بعدی تگ <html> را داریم که در واقع ریشه صفحه HTML است و تمامی عناصر باید درون آن قرار گیرند.

درون تگ <html> دو تگ با نام های <head> و <body> را مشاهده می کنید.

تگ <head> چیست؟

به طور خلاصه این تگ حاوی متاتگ هایی است که اطلاعاتی را به مرورگر و موتورهای جستجو می دهد.

کد:

<head>
  <title>CodeUni.Ir</title>
</head>

به عنوان مثال در کد فوق تگ <title> در <head> وظیفه نمایش عنوان صفحه را بر عهده دارد و هر چیزی که درون این تگ قرار دهید در مرورگر قابل مشاهده هست.

تگ <body> چیست؟

این تگ همان تگی است که کد های مربوط به عناصر قابل دید برای کاربران را درون آن قرار می دهیم.

کد:

<body>
  <p>CodeUni.Ir</p>
</body>

خروجی:

CodeUni.Ir

در کد فوق تگ <p> که همان پاراگراف است متن CodeUni.Ir را در مرورگر نمایش می دهد.

نکته:

هر تگی که باز شد باید بسته شود!

مثلا تگ عنوان با <title> باز و با </title> بسته می شود و هر چیزی بین این دو قرار گیرد عنوان صفحه خواهد بود.

معرفی مطالب در این زمینه