معناشناسی

هدف تگ های HTML معنا دادن به محتوای یک سند وب می باشد. نباید به ظاهری که یک تگ اعمال می کند اهمیت داد بلکه مفهومی که به ارمغان می آورد مهم است.

به اندازه کافی تگ در دنیای HTML وجود دارد که بتوان مفاهیم مختلف را بوسیله آنها پیاده سازی کرد. از تگ های عمومی مثل پاراگراف <p> گرفته تا تگ های خیلی خاص مثل <output> که برای نشان دادن نتیجه یک محاسبه یا رفتار کاربر از آنها استفاده می شود. و یا <progress> که می توان توسط آن میزان پیشرفت یک کار را نمایش داد.

عناصر ساختاری

با استفاده از عناصر و تگ های ساختاری می توان سند وب را از نظر دسته بندی محتوا سازماندهی کرد.

به عنوان نمونه می توان به تگ های زیر اشاره کرد:

• <header> به عنوان اولین عنصر یک سند که می تواند شامل لوگو و عنوان سایت باشد شناخته می شود.
• <nav> به عنوان لیستی از لینک هایی که هر کدام به صفحات مختلف سایت می روند.
• <h1> عنوان اصلی صفحه.
• <article> محتوای اصلی صفحه مثل همین مقاله یا پستی که در حال مطالعه آن هستیم.
• <footer> به عنوان آخرین عنصر صفحه که معمولا در پایین صفحه قرار می گیرد و عناصری مثل کپی رایت و غیره در آن قرار می گیرند.

عناصر متنی

داخل عناصر ساختاری معمولا از عناصر متنی برای مفهوم دادن به محتوا استفاده می شود.

• <p> پاراگراف ها
• <ul> لیست غیر ترتیبی
• <ol> لیست ترتیبی
• <li> آیتم یک لیست
• <blockquote> نقل قول های بلند

عناصر خطی متنی

از آنجایی که محتوای داخل عناصر می تواند طولانی باشد عناصر خطی متنی برای مفهموم دادن به قسمت های مختلف این محتوا وجود دارند:

• <a> لینک ها
• <em> کلمات تاکیدی
• <strong> کلمات مهم
• <q> نقل قول های کوتاه
• <abbr> اختصارنویسی

به عنوان یک نمونه ما باید قادر به این باشیم که بدون اینکه نوشته های مثال زیر را بخوانیم فقط با نگاه کردن به تگ های استفاده شده یک دید کلی از تکه کد زیر پیدا کنیم:

<article>
  <h1>Main title of the page</h1>
  <h2>A subtitle</h2>
  <p>
    Something something an other stuff and some <em>emphasis</em> and even <strong>important</strong> words.
  </p>
  <p>
    Another paragraph.
  </p>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <blockquote>
    Once said
  </blockquote>
</article>
<aside>
  <h3>My latest posts</h3>
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">One</a></li>
    <li><a href="#">One</a></li>
  </ul>
</aside>

عناصر عمومی

اگر هیچ یک از عناصر معنادار، متناسب با کار ما نبود ولی نیاز داریم که نگهدارنده ای برای قسمتی از محتوای سند داشته باشیم می توانیم از یکی از عناصر زیر استفاده کنیم:

<div> یک عنصر بی معنا که از نوع بلاک می باشد.

<span> یک عنصر بی معنا که از نوع خطی می باشد.

زمانی که با CSS شروع به کار کنیم این عناصر کاربرد و اهمیت خود را نشان می دهند.

نگران نباشید

تقریبا تعداد 100 عنصر معنادار HTML برای انتخاب وجود دارند. تعداد زیادی است!

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