آموزش HTML - تیترها

تیترهای HTML ساختار و سلسله‌مراتب (سطوح) محتوای یک صفحه وب را مشخص می‌کنند. آن‌ها یک سلسله‌مراتب بصری ایجاد می‌کنند که در آن بالاترین سطح تیتر، یعنی h1، نشان‌دهنده مهم‌ترین محتوا یا تیتر اصلی است و سطوح پایین‌تر مانند h2، h3، h4 و غیره برای زیرمجموعه‌ها و زیرعنوان‌ها به کار می‌روند.

دلیل استفاده از تیترها

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

• تأثیر تیتر بر سئو (SEO): تیترهای سازمان‌یافته به موتورهای جستجو کمک می‌کنند تا ساختار محتوا و ایندکس‌گذاری آن را بهتر درک کنند.
• برجسته کردن موضوعات مهم: استفاده درست از تگ‌های تیتر، خوانایی محتوا را حفظ می‌کند.

تگ‌های تیتر در HTML

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

مثال

مثال زیر سطوح مختلف تیتر در HTML را نشان می‌دهد −

<!DOCTYPE html>
<html>
  <body>
    <h1>This is Heading 1 (H1 Tag)</h1>
    <h2>This is Heading 2 (H2 Tag)</h2>
    <h3>This is Heading 3 (H3 Tag)</h3>
    <h4>This is Heading 4 (H4 Tag)</h4>
    <h5>This is Heading 5 (H5 Tag)</h5>
    <h6>This is Heading 6 (H6 Tag)</h6>
  </body>
</html>

ساختار سلسله‌مراتبی تگ‌های تیتر

در ادامه، فهرستی بر اساس سلسله‌مراتب تگ‌های تیتر (از بیشترین به کمترین اهمیت) آورده شده است −

• تگ <h1> − بالاترین سطح تیتر که نشان‌دهنده موضوع اصلی یا عنوان کل صفحه است.

• تگ <h2> − زیرعنوان‌های زیرمجموعه <h1> که بخش‌های اصلی مرتبط با موضوع کلی را نشان می‌دهند. این تگ‌ها زمینه مشخص‌تری برای محتوا فراهم می‌کنند.

• تگ‌های <h3> تا <h6> − این تگ‌ها برای زیربخش‌های بعدی یا محتواهای تودرتو در داخل تیترهای <h2> استفاده می‌شوند. آن‌ها سطح عمیق‌تری از سلسله‌مراتب را برای سازمان‌دهی محتوا در بخش‌های خاص ارائه می‌دهند.

مثال‌هایی از تیترهای HTML

در این مثال‌ها، نحوه استفاده از تمام تگ‌های تیتر برای ایجاد انواع مختلف تیتر و استایل‌دهی به آن‌ها با استفاده از CSS را مشاهده خواهید کرد −

تیترها با استفاده از تگ‌های <h1> تا <h6>

در این مثال، از تگ‌های تیتر (h1 تا h6) استفاده می‌کنیم؛ هر کدام از آن‌ها اندازه و وزن متفاوتی برای محتوا دارند −

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" width="device-width, initial-scale=1.0">
    <title>Example of HTML Headings</title>
  </head>
  <body>
    <h1>Heading 1: Main Heading of Page</h1>
    <h2>Heading 2: Section</h2>
    <h3>Heading 3: Subsection</h3>
    <h4>Heading 4: Sub-subsection</h4>
    <h5>Heading 5: Lower-level heading</h5>
    <h6>Heading 6: Lowest-level heading</h6>
  </body>
</html>

استایل‌دهی به تیترها با CSS

در مثال زیر، استایل‌هایی مانند خانواده فونت (font family)، رنگ فونت (font color)، اندازه فونت (font size) و غیره را روی تیترها اعمال می‌کنیم −

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of HTML Headings</title>
    <style>
      h1, h2, h3, h4, h5, h6{
       font-family: Verdana;
      }
      h1{
       color: Red;
       font-size: 32px;
      }
      h2{
       color: Green;
       font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Heading 1: Main Heading of Page</h1>
    <h2>Heading 2: Section</h2>
    <h3>Heading 3: Subsection</h3>
    <h4>Heading 4: Sub-subsection</h4>
    <h5>Heading 5: Lower-level heading</h5>
    <h6>Heading 6: Lowest-level heading</h6>
  </body>
</html>

در اینجا، استایل فونت "Verdana" را روی تمامی تگ‌های تیتر اعمال کرده‌ایم، رنگ "Red" با اندازه فونت 32px را برای تیتر H1 مشخص نموده و رنگ "Green" با اندازه فونت 30px را برای تیتر H2 تعریف کرده‌ایم.

استفاده از تگ‌های HTML در داخل تگ‌های تیتر

تیترهای HTML (از h1 تا h6) به عنوان عناوین اصلی و زیرعنوان‌ها برای سازمان‌دهی محتوا عمل می‌کنند. در داخل این تگ‌های تیتر، می‌توانید از تگ‌های مختلف دیگر HTML برای بهبود و ساختاردهی موثرتر محتوای خود استفاده کنید. در ادامه چند نمونه آورده شده است −

تگ <span>

شما می‌توانید از تگ <span> برای اعمال استایل‌های درون‌خطی (inline) یا کلاس‌ها به بخش‌های خاصی از متن در داخل یک تیتر استفاده کنید. این کار امکان استایل‌دهی سفارشی متنِ درون تیتر را فراهم می‌سازد.

<!DOCTYPE html>
<html>
<head>
   <title>Using <span> Tag</title>
</head>
<body>
   <h2>This is a <span style="color: blue;">blue</span> word.</h2>
</body>
</html>

تگ <a> برای لینک‌ها

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

<!DOCTYPE html>
<html>
<head>
   <title>Using <a> Tag for Links</title>
</head>
<body>
   <h1><a href="https://www.tutorialspoint.com">Visit our website</a></h1>
</body>
</html>

تگ‌های <em> و <strong>

این تگ‌ها برای تأکید روی متن در داخل تیترها استفاده می‌شوند. تگ <em> متن را مورب (italic) می‌کند، در حالی که <strong> آن را پررنگ (bold) می‌سازد.

<!DOCTYPE html>
<html>
<head>
   <title>Using <em> and <strong> Tags</title>
</head>
<body>
   <h3>This is <em>emphasized</em> and <strong>important</strong> text.</h3>
</body>
</html>

تگ‌های <sup> و <sub>

در تیتر، برای گنجاندن متن بالا‌نویس (superscript) یا زیرنویس (subscript)، از <sup> و <sub> استفاده کنید.

<!DOCTYPE html>
<html>
<head>
   <title>Using <sup> and <sub> Tags</title>
</head>
<body>
   <h4>The 10<sup>th</sup> floor is at the top.</h4>
   <h5>The chemical formula for water is H<sub>2</sub>O.</h5>
</body>
</html>

تگ <abbr> برای کلمات اختصاری

هنگامی که نیاز دارید یک مخفف یا عبارت اختصاری را در تیتر بگنجانید، از تگ <abbr> استفاده کنید. این تگ اغلب یک راهنمای متنی (tooltip) شامل معنی کامل عبارت ارائه می‌دهد.

<!DOCTYPE html>
<html>
<head>
   <title>Using <abbr> Tag for Abbreviations</title>
</head>
<body>
   <h2>HTML stands for <abbr title="Hypertext Markup Language">HTML</abbr>.</h2>
</body>
</html>

تگ <br> برای شکستن خط

گاهی اوقات ممکن است برای فرمت‌بندی بهتر بخواهید در داخل یک تیتر خط جدید ایجاد کنید. تگ <br> این منظور را برآورده می‌کند.

<!DOCTYPE html>
<html>
<head>
   <title>Using <br> Tag for Line Breaks</title>
</head>
<body>
   <h3>This is the first line.<br>This is the second line.</h3>
</body>
</html>

تگ <mark>

از تگ <mark> برای برجسته کردن (Highlight) متن خاصی در داخل تیتر استفاده کنید. این تگ معمولاً برای نشان دادن نتایج جستجو یا بخش‌های انتخاب‌شده از متن به کار می‌رود.

<!DOCTYPE html>
<html>
<head>
   <title>Using <mark> Tag</title>
</head>
<body>
   <h1>Search for "<mark>important</mark>" information here.</h1>
</body>
</html>

اشتباهاتی که باید از آن‌ها اجتناب کرد

اطمینان حاصل کنید که هنگام استفاده از تگ‌های تیتر، از اشتباهات زیر پرهیز می‌کنید −

• جا انداختن سطوح: همیشه سلسله‌مراتب درست (h1، h2، h3 و غیره) را رعایت کنید و سطوح را جا نیندازید.
• استفاده بیش از حد از h1: تگ h1 را برای عنوان اصلی نگه دارید و از آن چندین بار در یک صفحه استفاده نکنید.
• افراط در استایل‌دهی: از استایل‌دهی بیش از حد خودداری کنید؛ وظیفه مدیریت ظاهر بر عهده CSS است، نه تگ‌های تیتر.