مثال

نحو

1
  <h1>Getting Started with Web Design</h1>
2

3
  <h2>Welcome</h2>
4

5
  <p>Suspendisse sit amet odio et metus feugiat scelerisque eget ac enim. Quisque vel elit dui. Phasellus dui nunc, vehicula vel hendrerit a, lobortis eget magna. </p>
6

7
  <h2>The Basics</h2>
8

9
  <p>Est duis laboris sunt do consectetur aute. Praesent fermentum dictum erat eget cursus. Integer neque urna, eleifend a justo ac, placerat aliquam dui.</p>
10

11
  <h3>Color</h3>
12

13
  <p>Nulla tempus, nulla a bibendum placerat, magna diam convallis mauris, id tincidunt quam ligula id diam. Curabitur vel elementum ipsum, ut imperdiet sem. Fusce volutpat scelerisque congue.</p>
14

15
  <h4>Monochrome</h4>
16

17
  <p>Integer neque urna, eleifend a justo ac, placerat aliquam dui.</p>
18

19
  <h3>Typography</h3>
20

21
  <p>Sint dolore labore sit in cupidatat fugiat anim. Curabitur vel malesuada erat. </p>
22

23
  <h2>Should Web Designers Code?</h2>
24

25
  <p>Excepteur cillum ut occaecat aliqua fugiat irure minim velit anim. Aliquam pharetra nunc nulla, et rhoncus ante pellentesque sed.</p>
26

27
  <h3>Understanding the box-model</h3>
28

29
  <p>Ipsum nulla duis magna amet. Excepteur ipsum ullamco irure voluptate.</p>

نتیجه

طرح کلی سند

اگر HTML فوق را از طریق an اجرا کنیم ابزار outliner HTML ما می توانیم ببینیم که مرورگر چگونه ساختاری را که سرفصل های ما دیکته کرده اند تفسیر می کند:

نمونه طرح کلی سند که عناوین را نشان می دهدنمونه طرح کلی سند که عناوین را نشان می دهدنمونه طرح کلی سند که عناوین را نشان می دهد

پشتیبانی مرورگر

HTML h1h6 عناصر در تمام مرورگرهای مدرن پشتیبانی می شوند. بیشتر در caniuse.com بخوانید.

ویژگی های

h1h6 پشتیبانی از عناصر ویژگی های جهانی در HTML. مشخصه های جهانی برای همه عناصر HTML مشترک هستند و می توانند روی همه آنها استفاده شوند (اگرچه ممکن است تأثیر زیادی روی برخی از آنها نداشته باشند).

محتوا

h1h6 پشتیبانی از عناصر عبارت بندی محتوا.

سئو

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

با h1h6 عناصر، از مهمترین عناوین شروع کنید (h1) و در صورت لزوم به سمت پایین حرکت کنید. هر عنوان اضافی به عنوان زیرمجموعه ای از عنوان قبلی مشخص می شود. موتورهای جستجو می توانند این موضوع را شناسایی کنند و به محتوای شما کمک کنند وقتی کاربر یک پرس و جو را انجام می دهد، به صورت غنی تر یا دقیق تر در نتایج جستجو بازگردد.

اگر یک سند HTML دارای چندین عنوان باشد، تنها یک عنوان وجود دارد h1، مگر اینکه در داخل عنصر برش دهنده دیگری مانند an موجود باشد article.

بیشتر بدانید