Thẻ định dạng tiêu đề

Định nghĩa và cách dùng

  • Thẻ <hx>: chữ "h" viết tắc của từ "headings" nghĩa là đề mục, hoặc tiêu đề.
  • Thẻ <hx> : Sử dụng để định nghĩa tiêu đề cho nội dung HTML, giúp cho trình duyệt nhận biết được tiêu đề của một nội dung.
  • Thẻ <hx> có giá trị từ <h1> tới <h6>, trong đó mức độ quan trọng giảm từ <h1> tới <h6> (hay ta có thể hiểu: tiêu đề lớn nhất là <h1>, và tiêu đề nhỏ nhất là <h6>).
  • Nội dung bên trong <hx></hx> chỉ nên chứa các thẻ thuộc nhóm inline.
  • Thẻ <hx></hx> chỉ nên thể hiện tiêu đề, không dùng cho mục đích khác.

Html viết:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
<h4>Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)</h4>
<h5>Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)</h5>
<h6>Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)</h6>
</body>
</html>

Hiển thị trình duyệt:

Đây là tiêu đề quan trọng nhất (lớn nhất)

Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)

Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)

Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)

Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)
Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)

Thẻ <h1> là thẻ quan trọng nhất trong trang HTML, trong một trang html thường người ta sử dụng <h1> một lần duy nhất cho logo, hoặc dòng mô tả trang web (mục đích SEO), mục đích của <h1> là khai báo cho trình duyệt biết đâu là phần quan trọng nhất của trang web.

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<h1>Logo</h1>
<h2>Tiêu đề lớn</h2>
<p>Nội dung của tiêu đề lớn</p>

<h3>Tiêu đề nhỏ</h3>
<p>Nội dung của tiêu đề nhỏ</p>
</body>
</html>

Hiển thị trình duyệt:

Logo

Tiêu đề lớn

Nội dung của tiêu đề lớn

Tiêu đề nhỏ

Nội dung của tiêu đề nhỏ

Những cấu trúc không nên sử dụng

Không được chứa bên trong <hx></hx> các thẻ thuộc nhóm các thẻ block, code như thế này là sai, không đúng chuẩn W3C:

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<h1><p>Đây là đoạn văn</p></h1>

<h2><div>Đây là đoạn văn</div></h2>

<h3>
<dl>
<dt>
Tiêu đề</dt>
<dd>
Nội dung</dd>
</dl>

</h3>

<h2>
<ul>
<li>
liên kết 01</li>
<li>
liên kết 02</li>
</ul>

</h2>
</body>
</html>

THÔNG BÁO LỖI