تگ های عناوین در زبان HTML – برنامه نویسی HTML بخش نهم
عناوین در زبان HTML یا (HTML Heading)، می تواند سلسله مراتب و ساختار محتوای یک صفحه وب را مشخص کند. آن ها می توانند برای شما یک سلسله مراتب بصری ایجاد کنند که در بالاترین سطح آن تگ h1 قرار می گیرد که اصلی ترین عنوان در میان عناوین است و در مقام های بعدی به ترتیب عناوین h2، h3 تا h6 قرار می گیرد که هر کدام برای مشخص کردن عناوین زیرمجموعه به کار گرفته می شوند.
علت استفاده از عناوین در زبان HTML
عناوین در زبان HTML یک بخش مهم و حیاتی برای مشخص کردن ساختار محتواها هستند و امکان ایجاد یک فضای بصری در هر بخش و یا موضوع در صفحه وب را برایمان میسر می کنند. در صورتی که از عناوین به درستی استفاده شود، خوانایی متون، تجربه کاربری و روند مطالعه متون بر روی صفحه های وب بهبود پیدا می کند و می توانیم مطمئن شویم که اطلاعات به شکل درستی به کاربران انتقال پیدا می کند.
- اهمیت عناوین زبان HTML بر روی سئو: در صورتی که از عناوین به شکل درستی استفاده شود، موتورهای جستجو می توانند به شکل بهتری ساختار صفحه های وب را درک کنند و در نتیجه آن ها را به شکل بهتری ایندکس کنند.
- برجسته کردن بخش های مهم در صفحه وب: با استفاده از عناوین در زبان HTML شما می توانید خوانایی متن ها را افزایش دهید و به درستی مطالب خودتان را به مخاطب انتقال دهید.
تگ های عناوین در زبان HTML
عناوین در زبان HTML با استفاده از تگ عنوان (Heading tags) به شکل<h1> تا <h6> تعریف می شوند. در اینجا ترتیب دهی درست تگ ها در صفحه وب بسیار مهم است. زبان HTML از سطح های مختلف عنوان دهی در زبان 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>
ساختار سلسله مراتب تگ های عناوین در زبان HTML
در پایین شما می توانید ساختار سلسله مراتبی استفاده از تگ های عنوان در زبان HTML را مشاهده کنید.
- تگ <h1>: این تگ اصلی ترین تگ در صفحه HTML است و نشان دهنده موضوع صفحه و محتوایی است که در هر صفحه وب به کار می برید. به همین خاطر شما تنها باید یکبار از این تگ در صفحه وب خودتان استفاده کنید.
- تگ <h2>: این تگ موضوعات زیرمجموعه تگ h1 را مشخص می کند و بخش های اصلی از محتوای شما را نشان می هد. با استفاده از این تگ شما می توانید بخش های مختلف از صفحه وب خودتان را مشخص کنید.
- تگ های <h3>تا <h6>: این تگ ها برای مشخص کردن زیرمجموعه های بعدی صفحه وب شما به کار گرفته می شوند و اغلب به صورت تو در تو در زیرمجموعه تگ<h2>به کار گرفته می شوند. این تگ ها می توانند ساختارهای مختلف از محتوای صفحه که شما در بخش های گوناگون از آن ها بهره می برید را مشخص کنند.
مثال های از به کارگیری عناوین در زبان HTML
در مثال هایی که در ادامه می آید، شما می توانید استفاده از تمام تگ های عناوین برای ساختن بخش های مختلف صفحه را مشاهد کنید. همچنین در اینجا ما از زبان CSS برای استایل دهی به این صفحه ها استفاده کرده ایم که شما می توانید درباره آن ها در بخش های مرتبط این سایت مطالب کاملی را فرا بگیرید.
استفاده از تگ های <h1> تا <h6> برای توسعه صفحه ها وب
در این مثال ما از تگ های عناوین در زبان HTML استفاده کرده ایم. هر کدام از این تگ ها می توانند اندازه و وزن خودشان را به بخش هایی که در آن به کار رفته اند را بدهند.
<!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>
</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>
استایل دهی به تگ های عناوین در زبان HTML با استفاده از CSS
در مثال زیر ما از تگ style استفاده کرده ایم تا بتوانیم خانواده فونت، رنگ فونت و اندازه آن را برای هر کدام از عناوین به کار ببریم.
<!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) برای تگ H1 استفاده کرده ایم. همچنین اندازه آن را بر روی 32px تنظیم کرده ایم. در اینجا برای عنوان H2 نیز از رنگ سبز و اندازه فونت 30px استفاده کرده ایم.
استفاده از تگ های HTML در میان تگ های عناوین
شما می توانید از تگ های عناوین h1 تا h6 به عنوان تگ های عنوان اصلی و زیرمجموعه برای سازمان دهی محتوای خودتان استفاده کنید. شما می توانید از تگ های HTML دیگر نیز در میان این تگ ها به صورت تو در تو استفاده کنید تا بتوانید ساختار بندی محتوای خودتان را به شکل بهتری بهبود ببخشید. در اینجا چند مثال برای شما وجود دارد:
استفاده از تگ در تگ عناوین
شما می توانید از تگ span برای استایل دهی به بخشی مشخصی از نوشته خودتان که در درون یک عنوان یا هر بخش نوشتاری دیگری است استفاده کنید. این کار به شما اجازه می دهد که بتوانید استایل های مشخصی را به بخش های مختلف عنوان خودتان نسبت دهید
<!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> لینک در عناوین
برای اینکه بتوانید از یک لینک در عنوان خودتان استفاده کنید می توانید از تگ در اینجا بهره بگیرید. این کار در زمانی که شما می خواهید عناوین خودتان را به صفحه های دیگر اتصال دهید بسیار سودمند است.
در مثال زیر نمونه ای از به کاربردن این تگ را مشاهده می کنید:
<!DOCTYPE html>
<html>
<head>
<title>Using <a> Tag for Links</title>
</head>
<body>
<h1><a href="https://www.hostbaz.com">Visit our website</a></h1>
</body>
</html>
استفاده از تگ های <em> و <strong> در عناوین
این دسته از تگ ها برای ایجاد تاکید بر بخش های از عناوین به کار گرفته می شود. تگ <em> از نظر معنایی به معنی «تاکید» بوده و سبب ایتالیک شدن نوشته می شود، در حالیکه تگ <strong> به معنای ضخیم تر کردن نوشته است و سبب می شود که خط بزرگتر و تیره تر نمایش داده شود.
<!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>
تگ های<sub> و <sup> در عناوین HTML
با استفاده از تگ <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> استفاده کنید. این کار سبب می شود که توضیحات کامل در پرچمک ابزار عنوان نمایش داده شود.
<!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> در عناوین HTML
با استفاده از تگ <mark> شما می توانید بخش هایی از نوشته خودتان را های لایت کنید. این کار به خصوص در زمانی که در جستجوی مطلبی هستید و یا می خواهید بخشی از نوشته را انتخاب کنید بسیار مفید است
<!DOCTYPE html>
<html>
<head>
<title>Using <mark> Tag</title>
</head>
<body>
<h1>Search for "<mark>important</mark>" information here.</h1>
</body>
</html>
اشتباهاتی که باید از آن ها پرهیز کنید
در به کاربردن تگ عناوین در زبان HTML اشتباهاتی وجود دارد که باید از آن ها پرهیز کنید:
- پرش از سطح عناوین: همیشه سعی کنید که سلسله مراتب درستی را رعایت کنید و عناوین شما دقیقاً در سلسله مراتب پشت سر هم قرار بگیرند. از پرش میان سلسله مراتب پرهیز کنید.
- از تگ H1 تنها یک بار استفاده کنید. تگ h1 مشخص کنند موضوع اصلی صفحه وب شما است. شما نباید بیشتر از یک بار در هر صفحه از این تگ استفاده کنید. برای ساختار بندی بخش های وب خودتان می توانید از تگ های دیگر بهره بگیرید.
- استفاده کردن بیش از انداز از استایل بندی هم می تواند مشکل ساز باشد. در صورتی که می خواهید ظاهر عناوین را به درستی استایل بندی کنید بهتر است از زبان CSS و آموزش هایی که ما در همین وب سایت به شما می دهیم استفاده کنید.