اچ تی ام ال (HTML)برنامه نویسی طراحی سایت فرانت اند (Front-end)

تیتر ها (Headings) در HTML | تگ هدینگ چیست؟

۰ 27 زمان تقریبی مطالعه 2 دقیقه

فهرست مطالب

تیتر ها (Headings) در HTML

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

تیترها (Headings) در HTML بر اساس درجه ی اهمیت و اولویت، به ترتیب ۶ سطح زیر (تگ h1 مهم ترین و تگ h6 کم اهمیت ترین) شماره گذاری می‌شوند:

تگ h1
تگ h2
تگ h3
تگ h4
تگ h5
تگ h6

مثال: تگ های h1 , h2 , h3 , h4 , h5 , h6 در HTML5

<html lang='fa-IR' dir='rtl'>
<body>
<h1>آموزش تیترها در HTML</h1>
<h2>آموزش تیترها در HTML</h2>
<h3>آموزش تیترها در HTML</h3>
<h4>آموزش تیترها در HTML</h4>
<h5>آموزش تیترها در HTML</h5>
<h6>آموزش تیترها در HTML</h6>
</body>
</html>

۱۰

<body>

<h1>آموزش تیترها در HTML</h1>

<h2>آموزش تیترها در HTML</h2>

<h3>آموزش تیترها در HTML</h3>

<h4>آموزش تیترها در HTML</h4>

<h5>آموزش تیترها در HTML</h5>

<h6>آموزش تیترها در HTML</h6>

</body>

</html>

نمایش خروجی!

تگ h1 مهم‌ترین و تگ h6 کم اهمیت‌ترین تیتر در یک صفحه وب می‌باشد. از تگ h1 برای نمایش پراهمیت‌ترین تیتر صفحه، و از تگ های h2 و h3 برای نمایش زیرتیترها استفاده می‌شود. تگ های h4 تا h6 در میان طراحان وب از محبوبیت کمتری برخوردارند و به ندرت استفاده می شوند.

برخی از مرورگرهای وب جهت خوانایی بیشتر، به صورت پیشفرض به بالا و پایین تیترهای HTML مقداری فضای خالی (Margin) اضافه می کنند که البته می توانید با اِعمال CSS این روال را تغییر دهید.

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

چرا باید از تیتر ها استفاده کنیم؟

موتورهای جستجو به کمک تگ‌های h1 تا h6 که در صفحه وب به کار می‌روند، ساختار کلی و محتوای هر صفحه را ایندکس می‌کنند؛ بنابراین انتظار دارند که در کنار یک محتوای عالی یک ساختاربندی صحبح مشاهده کنند.

طبق استاندارد سازمان W3C، ساختار صحیح چینش تیترها ساختاری است که سلسله مراتبی باشد؛ یعنی نحوه قرارگیری تیترها از ابتدا تا انتهای صفحه به صورت زیر باشد :

طرز صحیح استفاده از تیتر ها (headings) در html

به شما اکیداً توصیه می‌کنیم که در طراحی صفحات وب، ساختار سلسله مراتبی صحیحی را برای استفاده از تیترها رعایت کنید :

به هیچ وجه از هدینگ ها جهت پررنگ (bold) کردن یا بزرگ‌تر کردن اندازه یک “متنی که تیتر نیست” استفاده نکنید!

تغییر اندازه فونت تگ های h1 , h2 , h3 , h4 , h5 , h6 در HTML5

اندازه فونت هر یک از این تگ‌ها مقداری پیشفرض است. با این حال شما می توانید با استفاده از دستور font-size در CSS، استایل آن ها را تغییر دهید :

<html lang="en-US" dir="ltr">
<head>
   <style> .custom { font-size: 48px; } </style>
</head>
<body>
    <h2>Hello World!</h2> <!-- Normal Heading -->
    <h2 class="custom">Hello World!</h2> <!-- Custom Heading -->
</body>
</html>

<head>

</head>

<body>

<h2>Hello World!</h2>

<h2 class="custom">Hello World!</h2>

</body>

</html>

نمایش خروجی!

تگ hr

HTML Horizontal Rules یا به اختصار تگ hr، یک خط افقی است که جهت جداکردن یک تیتر و متن وابسته به آن از تیتری دیگر کاربرد دارد.

<html lang="en" dir="ltr">
<body>
    <h2>This is heading 2</h2>
    <p>This is some text.</p>
    <hr>
    <h3>This is heading 3</h3>
    <p>This is some other text.</p>
    <hr>
</body>
</html>

۱۰

<body>

<h2>This is heading 2</h2>

<hr>

<h3>This is heading 3</h3>

<p>This is some other text.</p>

<hr>

</body>

</html>

نمایش خروجی!

مرورگرهای سازگار با هدینگ‌‌های html

در جدول زیر، لیست مرورگرها و نسخه های سازگار آن ها با هدینگ‌‌ها در اچ تی ام ال را مشاهده می کنید:

پلتفرم
مرورگر	گوگل کروم	مایکروسافت اج	فایرفاکس	اینترنت اکسپلورر	اپرا	سافاری	وب ویو اندروید	گوگل کروم اندروید	فایرفاکس اندروید	اپرا اندروید	سافاری iOS	سامسونگ اینترنت
نسخه		۱۲+	۱+						۴+