<h1> تا <h6> : تگ عناوین

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

مقدمه

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

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

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

استفاده صحیح از این تگ‌ها مزایای قابل توجهی دارد:

راهنمای استفاده صحیح از تگ‌های <h1> تا <h6>

نکات کلیدی در استفاده از تگ‌های عناوین عبارتند از:

  1. یکبار استفاده از <h1>: این تگ نماینده عنوان اصلی محتواست و بهتر است تنها یکبار در هر صفحه استفاده شود.
  2. سلسله مراتب منطقی: از <h2> برای بخش‌های اصلی و <h3> الی <h6> برای زیر‌بخشی هر بخش استفاده کنید تا ساختار سلسله مراتبی مشخصی ایجاد گردد.
  3. خوانایی: استفاده مطلوب از عناوین، متن را برای کاربران جذاب و قابل دنبال کردن می‌کند.
  4. سئو: موتورهای جستجو محتوای صفحه را به کمک تگ‌های عناوین بهتر تحلیل کرده و روابط بین بخش‌های مختلف آن را درک می‌کنند.

نمونه‌های کد استفاده از تگ‌های عناوین

در ادامه نمونه‌ای ساده از یک سند HTML که از تگ‌های عناوین استفاده شده است را مشاهده می‌کنید: 

<!DOCTYPE html>
<html lang="fa">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال تگ‌های عناوین</title>
  </head>
  <body>
    <h1>عنوان اصلی صفحه</h1>
    <h2>بخش اول</h2>
    <h3>زیرعنوان بخش اول</h3>
    <h2>بخش دوم</h2>
    <p>متن توضیحی درباره بخش دوم.</p>
  </body>
</html>

این نمونه نشان می‌دهد چگونه می‌توانید با استفاده از تگ‌های <h1> تا <h6>، ساختاری منظم و سلسله‌مراتبی برای محتوای خود ایجاد کنید.