آشنایی با تگ‌های معنادار در HTML5

یکی از کاربران راکت از ما درخواست ارائه توضیحاتی در ارتباط با تگ‌های معنادار در HTML5 را داد و به همین دلیل ما امروز قصد داریم در ارتباط با این شکل از تگ‌ها صحبت بکنیم. البته این موضوع را بگویم که ما قبلا در یک مقاله با عنوان «HTML معنادار چیست و چگونه از آن استفاده کنیم؟» این مسئله را توضیح داده‌ایم و در دوره آموزشی HTML بخش «تگ های معنادار در HTML5» این موضوع را بررسی کرده‌ایم.

اگر با زبان HTML کار کرده باشید مطمئنا با تگ‌هایی مانند <header>، <footer> و <article> روبرو شده‌اید اما این تگ‌ها واقعا چه چیزی هستند؟ در این مطلب قصد داریم به زبان حتی ساده‌تری راجع به این موضوع صحبت کرده و در نهایت کمی دقیق‌تر به این تگ‌ها نگاه کنیم.

تگ‌های معنادار

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

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

اولین تلاش برای این موضوع از تگ table شروع شد، تگی که جدای از کاری که انجام می‌داد خود بیانگر حالتی بود که در آن قرار می‌گرفت. اما تگ‌های دیگر کمتر از هر زمانی این بیان مندی را در خودشان داشتند. برای مثال زمانی که قصد ایجاد یک سربرگ یا header در وبسایت را داشتیم تنها کاری که انجام می‌دادیم استفاده از تگ <div> همراه با id مشخصی بود. این اتفاق برای دیگر بخش‌های یک صفحه اینترنتی نیز می‌افتاد.

اما با ورود HTML5 همه این موضوعات تغییر پیدا کرد و در واقع وب غیر بیان مند به وب توضیحی یا توصیفی تبدیل شد. بگذارید با یک نمونه ساده بگویم.

پیشتر ما برای ایجاد یک پاورقی در وبسایت به شکل زیر عمل می‌کردیم:

<div id='footer'></div>

اما در HTML5 این موضوع با اضافه شدن تگ <footer> تغییر کرد و حال تنها نیاز است که به شکل زیر این کار را انجام دهیم:

<footer></footer>

لیست کاملی از این حالت‌ها و تگ‌ها را می‌توانید در زیر مشاهده کنید:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

این تگ‌‌ها از نظر کاربرد و عملی که در خروجی اتفاق می‌افتد درست مشابه با div کارشان را انجام می‌دهند اما تفاوت اصلی در خوانا بودن کدها و روشن‌تر بودن قصد کاربران برای استفاده از این تگ‌هاست.

چرا از این شکل تگ‌ گذاری استفاده کنیم؟

قبل از اینکه دلیل اصلی این موضوع را بگوییم بیایید دو مثال (یکی از حالت قدیمی و دیگری از حالت جدید) را مشاهده کنیم.

مثالی از حالت‌های گذشته:

<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>

مثالی از حالت جدید:

<header></header>
<section>
         <article>
                 <figure>
                          <img>
                          <figcaption></figcaption>
                 </figure>
         </article>
</section>
<footer></footer>

تنها با یک نگاه کلی می‌توانید متوجه شوید که قطعه کد دوم نسبت به قطعه کد اول کوتاه‌تر بوده و در نتیجه میزان خوانایی آن بیشتر است. البته ممکن است باز هم این موضوع زیاد به چشم نیاید اما در یک برنامه طولانی این مسئله بسیار ملموس‌تر بوده و درک‌پذیری آن بیشتر می‌شود. بنابراین استفاده از حالت جدیدتر باعث خواناتر بودن کدها می‌شود. منظور از خواناتر بودن برای افرادی‌ست که بعدا قصد دارند روی کدهای شما کار کرده و یا افرادی که قصد دارند کدها را مطالعه کرده و بفهمند که دقیقا کدهای شما حاوی چه چیزهایی است.

دسترسی‌پذیری بالاتر یکی دیگر از مسائل مهمی‌ست که باعث می‌شود تا شما از حالت دوم استفاده کنید. دسترسی‌پذیری در این نمونه بدین معناست که کاربران با مشکلاتی مانند بینایی بتوانند از وبسایت بهره گرفته و متوجه این بشوند که در چه بخشی از وبسایت قرار دارند. ابزارهای Screen Reader به افراد با مشکلات بینایی کمک می‌کند تا بتوانند صفحه وب را درک کنند. به همین دلیل خواندن div id=header مشکل‌سازتر از خواندن header است. در واقع واژه header در فهم عمومی بسیار قابل درک‌تر از یکسری کد html است.

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

<section>  و  <article>

در بین تگ‌های معنادار این دو مورد از همه موارد دیگر نامفهوم و کمی گیج کننده هستند. تفاوت این دو مورد با همدیگر چیست؟ شما می‌توانید از این دو مورد به صورت جابجا استفاده کنید و در بیشتر مواقع هیچ مشکلی نخواهید داشت اما یک فلسفه کوچک در بین این دو تگ وجود دارد:

• تگ Section بیشتر برای محتوای گروه‌بندی شده که تمایل کمی به تغییر دارند باید مورد استفاده قرار بگیرد.
• تگ Article برای گروه‌بندی محتوایی مورد استفاده قرار می‌گیرد که در بازه‌های زمانی کوتاه مدت (روزی یک بار یا هفته‌ای یک بار) تغییراتی در آن صورت می‌گیرد. برای مثال بخش مقالات وبسایت راکت را در نظر بگیرید که هر روز دو الی سه مقاله مختلف به آن اضافه شده و تغییراتی قطعا صورت می‌گیرد.

شما می‌توانید از تگ article داخل تگ section استفاده کنید. چرا که در این صورت section یک قدم قبل‌تر از article قرار گرفته و سیاست گروه‌بندی خود را کماکان رعایت می‌کند. برای مثال:

<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> به سربرگ وبسایت‌ها ارجاع داده می‌شود که در بیشتر وبسایت‌ها اولین بخش تگ body به حساب می‌آید. در این تگ می‌توانید شاهد فهرست وبسایت، فیلد مربوط به جستجو، لوگو و عنوان وبسایت و... باشید.

<header>
  <h1>Company A</h1>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

اما تگ hgroup زمانی استفاده می‌شود که شما قصد نمایش یکسری heading و sub-heading یا عنوان و زیرعنوان در کنار همدیگر را دارید.

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

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

تگ <aside>

از این المان زمانی استفاده می‌شود که شما قصد ارائه مطلبی را دارید که در جریان محتوایی اصلی صفحه نمی‌گنجد. برای مثال بخش کناری وبسایت‌ها یا همان چیزی که Sidebar نام دارد در این حیطه کاربرد دارد.

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

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

تگ <footer>

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

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

تگ <time>

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

<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>

با استفاده از خاصیت datetime شما می‌توانید زمان را به صورتی که Screen Readerها بتوانند مطالعه کنند و در واقع Machine آن را درک کنند قرار دهید.

تگ‌های <figure> و <figcaption>

تگ figure برای نمایش محتوای تصویری مورد استفاده قرار گرفته و تگی که در آن قرار می‌گیرد همان تگ همیشگی مربوط به تصاویر یعنی img است. تگ <figcaption> نیز که باید در بین دو تگ figure قرار بگیرد برای ارائه توضیحات در رابطه با تصویر استفاده می‌شود.

در پایان

در این مطلب سعی کردیم تا در ارتباط با تگ‌های معنادار در HTML توضیحاتی را ارائه دهیم و همچنین چند نمونه از آن‌ها را بررسی کنیم. برای درک بهتر از این موارد می‌توانید به دوره آموزشی HTML بخش «تگ های معنادار در HTML5» و «تگ های Article و Section» مراجعه کنید.