آموزش سرتیتر (عنوان) در HTML به زبان ساده

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

آموزش سریع سرتیتر در اچ تی ام ال

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

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

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

نحوه نوشتن: برای ساخت یک تیتر، متن خود را بین تگ باز (مثلاً <h1>) و تگ بسته (که یک اسلش دارد، مثل </h1>) قرار می‌دهید.

یک مثال کاربردی و سریع

به کد زیر نگاه کنید تا تفاوت سطح‌ها و نحوه استفاده از آن‌ها را به خوبی متوجه شوید:

وقتی این کد را در مرورگر اجرا کنید، تیتر اول بسیار درشت و تیتر ششم بسیار ریز نمایش داده می‌شود.

توضیحات بیشتر

شش عنوان مختلف با تگهای

تا

، از بالاترین سطح h1 (عنوان اصلی) تا پایین ترین سطح h6 (عنوان با کمترین اهمیت) در HTML تعریف شده اند.

h1 بزرگترین تگ عنوان و h6 کوچکترین آن ها می باشد. درنتیجه h1 برای مهمترین عنوان و h6 برای کم اهمیت ترین عنوان صفحه استفاده می شوند.

عناوین در HTML به موتور جستجو کمک می کنند تا ساختار صفحه وب را درک و ایندکس (یا شاخص گذاری) کنند.

توجه: کلمه کلیدی اصلی درباره کل محتوای یک صفحه وب باید در تگ عنوان h1 قرار گیرد.

مثال

Heading no. ۱

Heading no. ۲

Heading no. ۳

Heading no. ۴

Heading no. ۵

Heading no. ۶

خروجی

• عناصر عنوان h1 تا h6 فقط باید برای سرتیترها استفاده شوند و نباید به منظور توپرکردن و یا بزرگتر کردن اندازه متن از آنها استفاده شود.
• عناوین HTML را می توان با عناصر تو در تو نیز استفاده کرد.

This is main heading of page. 

h1 is the most important heading, which is used to display the keyword of page 

This is first sub-heading

h2 describes the first sub heading of page. 

This is Second sub-heading

h3 describes the second sub heading of page.

We can use h1 to h6 tag to use the different sub-heading with their paragraphs if

          required.

خروجی

۳ قانون طلایی برای استفاده از سرتیترها

برای اینکه کدهای شما استاندارد باشد و در وب‌سایت به درستی کار کند، این سه نکته را همیشه به خاطر بسپارید:

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

• رعایت ترتیب منطقی: سلسله مراتب تیترها را رعایت کنید. یعنی تیترهای فرعیِ <h1> باید <h2> باشند و زیرمجموعه‌های <h2> باید با <h3> نوشته شوند. هرگز برای کوچکتر کردن سایز متن، از <h1> مستقیماً به <h4> نپرید.

• اهمیت برای گوگل (SEO): موتورهای جستجو برای فهمیدن اینکه صفحه شما دقیقاً درباره چیست، به شدت به این تگ‌ها (مخصوصاً <h1> و <h2>) توجه می‌کنند. استفاده درست از آن‌ها باعث می‌شود مقالات شما در گوگل رتبه بهتری بگیرند.