Hướng dẫn và ví dụ HTML Heading
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
Cấu trúc một trang HTML bao gồm nhiều Section (đoạn), và chúng có thể lồng nhau. Một section cũng có thể có Section Heading (Đề mục) nó giúp người dùng biết được nội dung chính mà section này đề cập tới.
Các phần tử HTML <h1> - <h6> đại diện cho 6 mức của các section heading. Trong đó <h1> là mức cao nhất, <h6> là mức thấp nhất.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Một trang được thiết kế tốt có một cấu trúc Heading rõ ràng, giúp người dùng dễ dàng tìm được nội dung mà họ muốn. Ngoài ra Heading là một trong các tiêu chí đánh giá của các bộ máy tìm kiếm như Google, vì vậy nó có ích cho SEO.
Trong một trang bạn nên có duy nhất một phần tử <h1>, nó là Heading của toàn bộ trang. Cấu trúc Heading trong trang của bạn giống như một cấu trúc cây, sử dụng <h1> ở mức 1, sau đó là <h2> ở mức 2, sau đó là <h3> ở mức 3,...
Bạn cần tránh việc bỏ qua (skip) một mức nào đó, chẳng hạn: sử dụng <h1> ở mức 1, sau đó sử dụng <h3> ở mức 2, như vậy bạn đã bỏ qua <h2>. Một số thiết bị đọc màn hình (Screen Reader) dành cho người mù sử dụng kỹ thuật điều hướng (navigation technique) dựa trên các Heading, việc bỏ qua một mức Heading nào đó khiến họ bối rối, không biết tại sao nội dung bị mất mát.
<!-- GOOD: -->
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<!-- BAD: -->
<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
Ví dụ:
<h1>HTML Headings Tutorial</h1>
<i>Author: o7planning, Views: 500</i>
<h2>1 - What is section heading?</h2> Section Heading is ....
<h2>2 - Heading Elements</h2> The HTML <h1>–<h6>
elements represent six levels of section headings...
<h3>2.1 - H1 Element</h3> h1 is ....
<h3>2.2 - H2 Element</h3> h2 is ....
Mỗi một HTML Heading đều có một kích thước mặc định, nhưng bạn có thể sử dụng CSS font-size để thiết lập kích thước mới cho chúng.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5 style="font-size:20px;">Heading level 5 (font-size:20px)</h5>
<h6>Heading level 6</h6>
*
