آشنایی با هیدینگ ها در HTML

در این فصل قصد داریم شما را با تگ های Headings (عناوین) در زبان HTML آشنا کنیم. هیدینگ ها در اسناد HTML مهم بوده و عناوین محتوای ما را مشخص میکنند.


هیدینگ ها در HTML

در اسناد HTML عناوین برای ما از اهمیت زیادی برخوردار است.

موتور های جستجوی مختلف از جمله گوگل و ... از Heading ها برای ایندکس کردن ساختار  و محتوای صفحات وب استفاده میکنند. 

کاربران سایت شما در قدم اول برای بررسی اجمالی مطالب سایتتان از Heading استفاده میکنند. 

این خیلی مهمه که شما برای نشان دادن ساختار صفحه ی خود از Heading ها استفاده کنید.

Heading ها از تگ <h1> تا تگ <h6> تعریف میشوند.

<h1> بیانگر پر اهمیت ترین عنوان و <h6> بیانگر کم اهمیت ترین عنوان هست :

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
خودتان امتحان کنید

نکته : مرورگر ها به صورت اتوماتیک مقداری فضای خالی (margin) به ابتدا و انتهای Heading ها اضافه میکنند.


خط افقی در HTML 

تگ <hr> باعث ایجاد یک خط افقی در صفحه ی HTML میشود. 

از این عنصر برای جدا کردن محتوای صفحات سایت استفاده میشود. در نمونه کد زیر از این عنصر استفاده شده است :

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
خودتان امتحان کنید

عنصر head در HTML

تگ <head> فضایی برای قرار گرفتن metadata های سایت ماست.

منظور از metadata ها اطلاعاتی هستند که در صفحات HTML قابل مشاهده نیستند اما صفحات ما برای اجرای درست و نمایش صحیح محتوا از اطلاعات آنها استفاده میکنند.

عنصر <head> هیچ ارتباطی با عناصر headings ندارد.

عنصر <head> بین دو عنصر <html> و <body> قرار میگیرد :

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.
خودتان امتحان کنید

نکته: متا دیتا ها معمولا شامل عنوان سند، کارکتر ست، استایل ها، لینک ها، اسکریپت ها و دیگر اطلاعات متا هستند.


چطور سورس یک صفحه ی HTML را مشاهده کنیم؟

آیا تاکنون صفحه ی سایتی را دیده اید که شگفت زده بشوید و از خود بپرسید "چطور آنها این صفحه را درست کرده اند؟"

دو روش برای مشاهده ی سورس یک صفحه ی وب وجود دارد :

مشاهده ی سورس کد صفحه ی HTML :

برای این کار بر روی صفحه ی مورد نظر راست کلیک کرده و گزینه ی "View Page Source" (در کروم) و یا "View Source" (در اینترنت اکسپلورر) و یا چیزی شبیه به اینها در دیگر مرورگر ها را انتخاب کنید. در این صورت صفحه ی باز خواهد شد که سورس صفحه ی HTML در آن قرار دارد.

اینسپکت کردن بر روی یک عنصر HTML :

برای این کار روی عنصر مرود نظر کلیک راست کرده و گزینه ی "Inspect" و یا "Inspect Element" را برای مشاهده ی چگونگی ساخته شدن آن عنصر، انتخاب می کنید. در این صورت نیز میتوانید سورس صفحه را مشاهده کنید .در این حالت میتوانید سورس صفحه را تغییر دهید و نتیجه را به صورت آنی در مرورگر مشاهده کنید(البته فقط در رایانه ی خودتان).

به خاطر داشته باشید که تغییر سورس HTML در روش دوم فقط در رایانه شما اتفاق افتاده و تاثیری بر روی سورس HTML در سرور نخواهد داشت. با بارگذاری دوباره ی صفحه تغییرات اعمال شده از بین رفته و صفحه به حالت قبلی باز خواهد گشت.

منتشر شده در ۲۷ اردیبهشت ۱۳۹۶ حمید رضا ملکی ۹۵۱ بازدید
دیدگاه ها
حسین سه شنبه ۲ خرداد ۱۳۹۶

سلام. ممنون از مطالب خوبتون. من سوالی برام پیش اومده. آیا استفاده از هیدینگ ها در مقاله اجباریست؟ ما میتونیم تیتر خودمون رو داخل یه پاراگراف بنویسیم و از طریق کدهای CSS اندازه و نوع فونت و ... رو روی آن اعمال کنیم و این طوری کنترل بیشتری روی تیتر های خودمون داریم تا اینکه از هدینگ های تعریف شده استفاده کنیم.

مدیر سایت سه شنبه ۲ خرداد ۱۳۹۶

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