Thẻ HTML <h1> đến <h6>

Định nghĩa và cách sử dụng

<h1> đến <h6> Thẻ được sử dụng để định nghĩa tiêu đề HTML.

<h1> Định nghĩa tiêu đề quan trọng nhất.<h6> Định nghĩa tiêu đề không quan trọng nhất.

Lưu ý

Mỗi trang chỉ sử dụng một <h1> - Đây nên đại diện cho tiêu đề chính hoặc chủ đề chính của trang. Ngoài ra, không được bỏ qua cấp độ tiêu đề - <h1> bắt đầu, sau đó sử dụng <h2>và tiếp theo.

Do các thẻ h có ý nghĩa rõ ràng, vì vậy hãy chọn cẩn thận cấp độ thẻ phù hợp để xây dựng cấu trúc tài liệu. Do đó, đừng sử dụng thẻ tiêu đề để thay đổi kích thước chữ trong cùng một dòng. Thay vào đó, chúng ta nên sử dụng cài đặt CSS để đạt được hiệu ứng hiển thị đẹp.

Nếu bạn muốn biết thêm thông tin về cách chọn và sử dụng các thẻ HTML, hãy đọc cuốnChất lượng Web》。

Xem thêm:

Hướng dẫn HTML:Tiêu đề HTML

Hướng dẫn tham khảo HTML DOM:đối tượng Tiêu đề

mô hình

ví dụ 1

bốn tiêu đề HTML khác nhau:

<h1> Đây là tiêu đề 1</h1>
<h2> Đây là tiêu đề 2</h2>
<h3> Đây là tiêu đề 3</h3>
<h4> Đây là tiêu đề 4</h4>
<h5> Đây là tiêu đề 5</h5>
<h6> Đây là tiêu đề 6</h6>

Thử ngay

ví dụ 2

Cài đặt màu nền và màu văn bản tiêu đề (sử dụng CSS):

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

Thử ngay

ví dụ 3

Cài đặt cách căn chỉnh tiêu đề (sử dụng CSS):

<h1 style="text-align:center"> Đây là tiêu đề 1</h1>
<h2 style="text-align:left"> Đây là tiêu đề 2</h2>
<h3 style="text-align:right"> Đây là tiêu đề 3</h3>
<h4 style="text-align:justify"> Đây là tiêu đề 4</h4>

Thử ngay

thuộc tính toàn cục

<h1> - <h6> thẻ hỗ trợ thuộc tính toàn cục trong HTML。

thuộc tính sự kiện

<h1> - <h6> thẻ hỗ trợ thuộc tính sự kiện trong HTML。

cài đặt mặc định CSS

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <h1> Thành phần:

ví dụ 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Thử ngay

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <h2> Thành phần:

ví dụ 2

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Thử ngay

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <h3> Thành phần:

ví dụ 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Thử ngay

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <h4> Thành phần:

ví dụ 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Thử ngay

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <h5> Thành phần:

Ví dụ 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Thử ngay

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <h6> Thành phần:

Ví dụ 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Thử ngay

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ