معرفی ۱۰ تگ معنادار در HTML5

تگ‌های معنادار یکی از مهم‌ترین ویژگی‌های معرفی شده در HTML5 است که همه‌ی توسعه‌دهندگان وب باید بر نحوه‌ی استفاده از آن تسلط داشته باشند و همان‌طور که قبلا در مقاله‌ی چگونه SEO وبسایت‌مان را بهبود ببخشیم؟ گفته شد، استفاده از تگ‌های معنادار در SEO وبسایت‌ها بسیار تاثیرگذار است.

با ما همراه باشید تا در ادامه‌ی مقاله با ۱۰ تگ معنادار HTML5 آشنا شویم:

۱) تگ section

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

البته باید توجه داشته باشید که تگ‌های دیگری مانند <nav>، <article> و <aside> برای دسته‌بندی بخش‌های مختلف صفحه وجود دارد و زمانی که هیچکدام از این تگ‌ها مناسب نباشند از تگ <section> استفاده خواهیم کرد.

<section>
  <h2>Welcome to the Before Semicolon</h2>
  <p>Millions of people rely on this space to save and discover the best articles, stories and videos on the web.</p>
  <img src="path/to/some/hero/image" alt="img description"/>
</section>

با قراردادن عنوان برای هر section میزان دسترسی‌پذیری و SEO وبسایت افزایش پیدا می‌کند اما اگر نمی‌خواهید که این عنوان برای کاربران قابل مشاهده باشد بایستی آن را از دید کاربران عادی پنهان کنید.

<section class="secondary-menu">
  <h2 class="hidden">Controls</h2>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

۲) تگ article

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

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

<article class="forecast">
    <h1>Weather forecast for Boston</h1>
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>

موضوع جالب دیگر این است که شما می‌توانید تگ‌های <article> را به‌صورت تودرتو استفاده کنید و به این شکل این امکان وجود دارد که کامنت‌های زیر یک پست از وبلاگ را در تگ <article> قرار دهید:

<article class="blog-post">
  <h2>Programming</h2>
  <p>What makes you a programmer is how you approach problems not the number of tools you use.</p>
  <section class="comments">
    <h3>Comments</h3>
    <article class="user-comment">
        <h2><strong>Mark</strong></h2>
        <p>Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
        </p>
       <p>Really great article</p>
    </article>
  </section>
</article>

۳) تگ main

تگ <main> برای دربرگرفتن یا گسترش موضوع اصلی صفحه استفاده می‌شود. البته توجه داشته باشید که فقط یک بار از این تگ می‌توانید در صفحه‌ی وب خود استفاده کنید. محتواهایی که در این تگ قرار داده می‌شوند باید منحصربه‌فرد و در صفحه‌های دیگر وب index نشده باشند.

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

مرورگرها معمولا به‌دنبال تگ <main> می‌گردند تا محتواهای اصلی صفحه را درکنار هم قرار دهند. به‌این شکل شما می‌توانید تگ‌های <article> را در تگ <main> قرار دهید.

۴) تگ aside

محتوای تگ <aside> باید با محتوای تگ <main> مرتبط باشد. فرض را بر این بگیرید که محتوای تگ <main> درباره‌ی مقصد سفر است، حال شما می‌توانید از تگ <aside> برای قراردادن محتواهایی درباره‌ی هزینه‌ی سفر استفاده کنید که دسترسی کاربر به محتواها را راحت‌تر می‌کند.

<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>
<aside>
    <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>

همچنین شما می‌توانید از این تگ در تگ‌های دیگری مانند <article> و <section> استفاده کنید.

۵) تگ header

محتواهای مقدماتی بخش‌های مختلف هر صفحه‌‌ی وب را می‌توانید در تگ <header> قرار دهید.

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p>
  </header>
  <p>We live on a planet that's blue and green, with so many things still unseen.</p>
</article>

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

۶) تگ nav

تگ <nav> را می‌توان یک تگ خاص دانست که جزئیاتی برای پیمایش در صفحه‌ی فعلی یا دیگر صفحه‌های وب در آن قرار داده می‌شود. همچنین علاوه‌بر ناوبری صفحه‌ی اصلی می‌توانید از این تگ برای قرار دادن فهرست مطالب، breadcrumbها و … استفاده کنید.

<nav class="main-nav">
  <ul>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">contact</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

درصورتی که به یک secondary menu نیاز دارید باید از تگ <section> استفاده کنید. همچنین برای قرار دادن لینک‌های صفحه‌های دیگر در footer نیازی به استفاده از تگ <nav> نیست مگر اینکه به‌وضوح لیبل گذاری شده و تفاوت آن مشخص باشد.

۷) تگ footer

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

<article>
  <h1>How to be a wizard</h1>
  <ol>
    <li>Grow a long, majestic beard.</li>
    <li>Wear a tall, pointed hat.</li>
    <li>Have I mentioned the beard?</li>
  </ol>
  <footer>
    <p>© 2018 Gandalf</p>
  </footer>
</article>

اغلب محتواهایی که در این تگ قرار می‌گیرند شامل لینک‌ها، مشخصات نویسنده، جزئیات کپی‌رایت و … است.

<footer>
  <p>copyright Before Semicolon. All rights reseverd.</p>
</footer>

۸) تگ‌های figure و figcaption

تگ‌های <figure> و <figcaption> به‌منظور زمینه‌سازی محتواهایی مانند تصاویر، قطعه‌های کد، نمودارها، نقل قول‌ها، شعرها و … استفاده می‌شود اما توسعه‌دهندگان به‌طور معمول برای افزودن یادداشت به تصاویر از تگ <figure> استفاده می‌کنند.

<figure>
  <figcaption>How to find average value</figcaption>
  <pre>
   const average = (nList) => 
      (nList.reduce((avg, n) => avg + n, 0)) / nList.length;
  </pre>
</figure>

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

۹) تگ heading

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

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

از اشتباه‌های رایج در استفاده از این تگ را می‌توان نادیده گرفتن تگ <h2> یا استفاده از این تگ برای تغییر مقدار font-size متن‌ها دانست.

۱۰) تگ‌های strong و em

از تگ‌های <strong> و <em> برای تاکید یا نشان دادن درجه‌ی اهمیت بخشی از متن استفاده می‌شود.

تگ <strong> غالبا برای نشان دادن درجه‌ی اهمیت یک متن استفاده می‌شود و به‌همین دلیل به‌صورت bold نمایش داده می‌شود. حال این موضوع باعث شده تا برخی افراد کاربرد تگ‌های <strong> و <b> را با یکدیگر اشتباه بگیرند.

<p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p>

از تگ <em> نیز برای تاکید بر روی بخش خاصی از متن استفاده می‌شود اما توجه داشته باشید که این تگ را با تگ <i> اشتباه نگیرید.

<p>
  In HTML 5, what was previously called
  <em>block-level</em> content is now called
  <em>flow</em> content.
</p>

حال با استفاده از این دو تگ می‌توانید screen readerها و موتورهای جستجو را متوجه اهمیت آن بخش از متن‌هایتان کنید.

منبع: https://betterprogramming.pub/10-html-semantic-tags-and-when-to-use-them-5ae7d7d0b0f2