معناشناسی

هدف تگ های 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 به بهترین صورت معنا خواهیم داد.

ساختاری متنی خطی
header
h1
h2
h3
nav
footer
article
section
p
ul
ol
li
blockquote
a
strong
em
q
abbr
small

9 دیدگاه برای “معناشناسی

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

      1. بعید میدونم خیلی از این تگ استفاده بشه .

        ولی توی سایت w3c نوشته بود که نام شخص عنوان کار نیست و نباید بذاریم توی این تگ.

  1. یه سوال دیگه :

    فرق بین section و article چیست ؟

    برای مثلا این صفحه رو ببینید : zarinp .al/@virastaran

    آیا از تگ article در این صفحه درست استفاده شده است یا خیر؟

    اصلا نمیفهمم تفاوت این دوتا چیه ؟ یکی میگه محتوای section مستقل از سایر صفحه هست . یعنی چی ؟

    یکی هم میگه article هم اینجوریه .

    میشه با مثلا توضیح بدید ؟

    ببخشیدا هی مزاحم میشم و سوال میپرسم .

    ممنون که جواب میدید.

  2. سلام
    سایت شما واقعا عالیه چه از نظر طراحی و چه از نظر محتوا
    آموزش ها بسیار روان هستند و خیلی راحت میشه درک شون کرد و اونا رو یادگرفت.
    من سایت های زیادی رو برای آموزش طراحی وب دیدم ولی سایت شما از همه شون بهتر بود.
    با تشکر از سایت خوبتون :)

  3. جالب اینجاست می شه بجای تگ Header و Footer و Main و ….. از تگ Div استفاده کرد. البته یه جایی خوندم که تفاوت این تگها توی جستجو مشخص میشه، یعنی موتور جستجو براساس مطالبی که تو قسمت header و Main و …… می نویسید اولویت بندی کرده و تارنمای شمار رو به عنوان نتیجه جستجو نمایش میده(منظورم همون SEO هست) .

  4. سلام آقای سیدی وقت بخیر یه سوال داشتم
    اگه یه صفحه داشته باشیم که داخلش چند تا آیتم باشه که تارگت یه سری لینک از یه صفحه دیگه باشن بعد هر کدوم از این آیتم ها یه تگ h1 داشته باشن این آیتم ها display شون هم none باشه هر وقت که تارگت شدن block بشن اینکه هر کدوم از اینا یه h1 دارن و display اینا none هست برای موتور های جستجو مشکلی نیست ؟

سوال داری؟ برو به پنل پرسش و پاسخ

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