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

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

Các thẻ <h1> đến <h6> được sử dụng để xác định những tiêu đề HTML. Đây là ví dụ về 6 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>

<h1> xác định tiêu đề quan trọng nhất. <h6> xác định tiêu đề ít quan trọng nhất.

Lưu ý: Chỉ sử dụng một thẻ <h1> trên mỗi trang - đại diện cho tiêu đề/chủ đề chính cho toàn bộ trang. Ngoài ra, đừng bỏ qua các cấp tiêu đề - bắt đầu bằng <h1>, sau đó sử dụng <h2>, v.v...

Hỗ trợ trình duyệt

Thuộc tính Global

Thẻ <h1> đến <h6> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <h1> đến <h6> cũng hỗ trợ các thuộc tính sự kiện trong HTML.

Các ví dụ khác

Đặt màu nền và màu văn bản của tiêu đề (với CSS):

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

Đặt căn chỉnh cho các tiêu đề (với 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>

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

Hầu hết các trình duyệt sẽ hiển thị phần tử <h1> với các giá trị mặc định sau:

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

Hầu hết các trình duyệt sẽ hiển thị phần tử <h2> với các giá trị mặc định sau:

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

Hầu hết các trình duyệt sẽ hiển thị phần tử <h3> với các giá trị mặc định sau:

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

Hầu hết các trình duyệt sẽ hiển thị phần tử <h4> với các giá trị mặc định sau:

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

Hầu hết các trình duyệt sẽ hiển thị phần tử <h5> với các giá trị mặc định sau:

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

Hầu hết các trình duyệt sẽ hiển thị phần tử <h6> với các giá trị mặc định sau:

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