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


۱۷ خرداد ۱۴۰۰
معرفی ۱۰ تگ معنادار در 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

برچسب‌ها:

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
...

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi