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

عناصری مانند <header>، <footer> و <article> همگی معنایی در نظر گرفته می شوند زیرا به طور دقیق هدف عنصر و نوع محتوای داخل آنها را توصیف می کنند.

 

عناصر معنایی چیست؟

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

 

در جایی که اینترنت در ابتدا برای به اشتراک گذاری اسناد علمی در نظر گرفته شده بود، اکنون مردم می خواستند چیزهای دیگری را نیز به اشتراک بگذارند. خیلی سریع، مردم شروع کردند به اینکه وب را زیباتر نشان دهند.

 

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

 

با پیشرفت استفاده از طرح‌بندی‌های طراحی‌شده بصری، برنامه‌نویسان شروع به استفاده از یک تگ «غیر معنایی» عمومی مانند <div> کردند. آنها اغلب به این عناصر یک ویژگی کلاس یا id برای توصیف هدف خود می دهند. به عنوان مثال، به جای <header> اغلب به صورت <div class=”header”> نوشته می شد.

 

از آنجایی که HTML5 هنوز نسبتا جدید است، این استفاده از عناصر غیر معنایی هنوز در وب سایت ها بسیار رایج است.

 

فهرست عناصر معنایی جدید

عناصر معنایی اضافه شده در HTML5 عبارتند از:

 

• <مقاله>

• <کنار>

• <جزئیات>

• <figcaption>

• <شکل>

• <پانویس>

• <header>

• <اصلی>

• <مارک>

• <nav>

• <بخش>

• <خلاصه>

• <زمان>

عناصری مانند <header>، <nav>، <section>، <article>، <aside> و <footer> کم و بیش مانند عناصر <div> عمل می‌کنند. آنها عناصر دیگر را با هم در بخش های صفحه گروه بندی می کنند. با این حال، در جایی که یک تگ <div> می تواند حاوی هر نوع اطلاعاتی باشد، تشخیص اینکه چه نوع اطلاعاتی در یک منطقه معنایی <header> قرار می گیرد آسان است.

 

نمونه ای از چیدمان عناصر معنایی توسط w3schools

 

چرا از عناصر معنایی استفاده می کنیم؟

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

 

<header></header>

<section>

<article>

<figure>

<img>

<figcaption></figcaption>

</figure>

</article>

</section>

<footer></footer>

 

در حالی که این بلوک دوم کد از عناصر غیر معنایی استفاده می کند:

 

<div id=”header”></div>

<div class=”section”>

<div class=”article”>

<div class=”figure”>

<img>

<div class=”figcaption”></div>

</div>

</div>

</div>

<div id=”footer”></div>

 

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

 

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

 

به طور کلی، عناصر معنایی نیز منجر به کد سازگارتر می شود. هنگام ایجاد هدر با استفاده از عناصر غیر معنایی، برنامه نویسان مختلف ممکن است این را به صورت <div class=”header”>، <div id=”header”>، <div class=”head”> یا به سادگی <div> بنویسند. راه های زیادی وجود دارد که می توانید یک عنصر هدر ایجاد کنید و همه آنها به ترجیحات شخصی برنامه نویس بستگی دارد. با ایجاد یک عنصر معنایی استاندارد، کار را برای همه آسان می کند.

از اکتبر ۲۰۱۴، HTML4 به همراه برخی از عناصر “معانی” جدید به HTML5 ارتقا یافت. تا به امروز، برخی از ما ممکن است هنوز در مورد این که چرا عناصر مختلف زیادی که به نظر می‌رسد هیچ تغییر عمده‌ای را نشان نمی‌دهند سردرگم باشیم.

 

<section> و <article>

ممکن است بپرسید “تفاوت چیست؟” هر دوی این عناصر برای بخش بندی یک محتوا استفاده می شوند، و بله، قطعاً می توان آنها را به جای هم استفاده کرد. مسئله این است که در چه موقعیتی. HTML4 تنها یک نوع عنصر کانتینر را ارائه می دهد که <div> است. در حالی که این هنوز در HTML5 استفاده می شود، HTML5 <section> و <article> را برای جایگزینی <div> در اختیار ما قرار داد.

 

عناصر <section> و <article> از نظر مفهومی مشابه و قابل تعویض هستند. برای اینکه تصمیم بگیرید کدام یک از این موارد را باید انتخاب کنید، به نکات زیر توجه کنید:

 

1. در نظر گرفته شده است که یک مقاله به طور مستقل قابل توزیع یا استفاده مجدد باشد.

2. بخش یک گروه بندی موضوعی از محتوا است.

 

<section>

  <p>Top Stories</p>

  <section>

    <p>News</p>

    <article>Story 1</article>

    <article>Story 2</article>

    <article>Story 3</article>

  </section>

  <section>

    <p>Sport</p>

    <article>Story 1</article>

    <article>Story 2</article>

    <article>Story 3</article>

  </section>

</section>

 

<header> و <hgroup>

عنصر <header> عموماً در بالای یک سند، یک بخش یا یک مقاله یافت می‌شود و معمولاً شامل عنوان اصلی و برخی ابزارهای ناوبری و جستجو است.

 

<header>

   <h1>شرکت A</h1>

   <ul>

     <li><a href=”/home”>صفحه اصلی</a></li>

     <li><a href=”/about”>درباره</a></li>

     <li><a href=”/contact”>با ما تماس بگیرید</a></li>

   </ul>

   <form target=”/search”>

     <input name=”q” type=”search” />

     <input type=”submit” />

   </form>

</header>

 

عنصر <hgroup> باید در جایی استفاده شود که می‌خواهید یک عنوان اصلی با یک یا چند عنوان فرعی داشته باشید.

 

<hgroup>

  <h1>Heading 1</h1>

  <h2>Subheading 1</h2>

  <h2>Subheading 2</h2>

</hgroup>

 

به یاد داشته باشید که عنصر <header> می‌تواند حاوی هر محتوایی باشد، اما عنصر <hgroup> فقط می‌تواند حاوی سرصفحه‌های دیگر باشد، یعنی <h1> تا <h6> و شامل <hgroup>.

 

<کنار>

عنصر <aside> برای محتوایی در نظر گرفته شده است که بخشی از جریان متنی نیست که در آن ظاهر می شود، اما همچنان به نوعی مرتبط است. این از <aside> به عنوان یک نوار کناری برای محتوای اصلی شما.

 

<aside>

  <p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>

</aside>

 

قبل از HTML5، منوهای ما با <ul> و <li> ساخته می شدند. اکنون، همراه با این موارد، می‌توانیم آیتم‌های منوی خود را با یک <nav> برای پیمایش بین صفحات شما جدا کنیم. شما می توانید هر تعداد عنصر <nav> را در یک صفحه داشته باشید، برای مثال، ناوبری سراسری در بالای صفحه (در <header>) و ناوبری محلی در نوار کناری (در عنصر <aside>) معمول است.

 

<nav>

  <ul>

    <li><a href=”/home“>Home</a></li>

    <li><a href=”/about“>About</a></li>

    <li><a href=”/contact“>Contact us</a></li>

  </ul>

</nav>

 

<پانویس>

اگر یک <header> وجود دارد باید یک <footer> وجود داشته باشد. یک <footer> معمولاً در پایین یک سند، یک بخش یا یک مقاله یافت می شود. درست مانند <header>، محتوا به طور کلی اطلاعات فرااطلاعاتی است، مانند جزئیات نویسنده، اطلاعات قانونی، و/یا پیوندهایی به اطلاعات مرتبط. همچنین گنجاندن عناصر <section> در پاورقی معتبر است.

 

<footer>&copy;Company A</footer>

 

<کوچک>

عنصر <small> اغلب در یک عنصر <footer> یا <aside> ظاهر می‌شود که معمولاً حاوی اطلاعات حق نسخه‌برداری یا سلب مسئولیت‌های قانونی و سایر موارد از این قبیل است. با این حال، این به منظور کوچکتر کردن متن نیست. این فقط محتوای آن را توصیف می کند، نه تجویز ارائه.

 

<footer><small>&copy;Company A</small> Date</footer>

 

<زمان>

عنصر <time> اجازه می دهد تا تاریخ بدون ابهام ISO 8601 به نسخه قابل خواندن توسط انسان از آن تاریخ پیوست شود.

 

<time datetime=”۲۰۱۷-۱۰-۳۱T11:21:00+02:00“>Tuesday, 31 October 2017</time>

 

چرا با <time> زحمت بکشید؟ در حالی که انسان‌ها می‌توانند زمانی را بخوانند که می‌تواند در متن به روش معمولی ابهام‌زدایی کند، رایانه‌ها می‌توانند تاریخ ISO ۸۶۰۱ را بخوانند و تاریخ، زمان و منطقه زمانی را ببینند.

<figure> و <figcaption>

<figure> برای قرار دادن محتوای تصویر شما در اطراف آن است و <figcaption> برای شرح تصویر شما است.