Các thẻ Heading <h1>-<h6>

Các thẻ heading tử <h1> đến <h6> giúp chúng ta tao tiêu đề, đề mục cho một trang web.

Thẻ heading

Trong một trang HTML có thể chia ra nhiều đề mục với cấp độ khác nhau. HTML cung cấp sáu thẻ để trình bày đề mục từ <h1> đến <h6> tương ứng với sáu cấp độ tử cao nhất <h1> đến thấp nhất <h6>.

Sử dụng các thẻ tạo đề mục sẽ giúp người đọc (hoặc công cụ tìm kiếm) nhanh chóng nắm bắt được bố cục bài viết.

Ví dụ:

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="UTF-8">
    	<title>Headings</title>
	</head>
	<body>
		<h1>Heading 1</h1>
		<h2>Heading 2</h2>
		<h3>Heading 3</h3>
		<h4>Heading 4</h4>
		<h5>Heading 5</h5>
		<h6>Heading 6</h6>
	</body>
</html>

Kết quả:

Ví dụ về các thẻ headings

Các thẻ heading <h1> - <h6> thuộc nhóm phần tử có cấp độ hiển thị block;

Sự quan trọng của các thẻ <h1> - <h6>

Các công cụ tìm kiếm thường sử dụng các thẻ headings này để lập chỉ mục cấu trúc và nội dung của trang web.

Người dùng cũng thường lướt qua tiêu đề của trang web nên việc dùng thẻ heading để hiển thị cấu trúc tài liệu là điều quan trọng.

Thẻ <h1> có cấp độ cao nhất thường được dùng để hiển thị tiêu đề của trang, tiếp đến là thẻ <h2> , <h3>… với cấp độ giảm dần.

Chú ý:

Chỉ sử dụng các thẻ <h1> - <h6> cho việc hiển thị các tiêu đề, đề mục, không nên sử dụng chúng cho việc tạo chữ đậm hay cỡ lớn.

Trong một trang chỉ nên dùng duy nhất một thẻ <h1> .

Kích thước thẻ Headings

Các thẻ heading đều có kích thước mặc định. Tuy nhiên ta có thể thay đổi kích thước của bất kỳ thẻ nào bằng cách dùng thuộc tính style

Ví dụ:

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="UTF-8">
    	<title>Headings</title>
	</head>
	<body>
		<h1>Heading 1</h1>
		<h2>Heading 2</h2>
		<h3 style="font-size: 60px;">Heading 3</h3>
		<h4>Heading 4</h4>
		<h5 style="font-size: 30px;">Heading 5</h5>
		<h6>Heading 6</h6>
	</body>
</html>

Kết quả:

Ví dụ thẻ heading

Các lưu ý khi dùng thẻ headings

  • Phân chia đề mục phù hợp: Cần sử dụng các thẻ theo đúng cấp độ của đề mục, không nhảy cách thẻ (VD: có thẻ <h3> mà không có thẻ <h2>)
  • Không dùng thẻ h1 - h6 để định dạng văn bản: Các thẻ h1-h6 đều có font mặc định là đậm với cỡ chữ của thẻ h1 là to nhất , giảm dần đến thẻ h6, tuy nhiên mục đích của các thẻ này không phải dùng để định dạng văn bản. Một đoạn văn bản không phải là đề mục nhưng muốn cỡ chữ to hơn, đậm hơn mà dùng các thẻ h1,…,h6 là sai. <h1> - <h6> Chỉ dùng cho đề mục.
  • Chỉ dùng một thẻ h1: Thẻ <h1> được dùng cho đề mục cao nhất, thường là tiêu đề của trang, vì thế ta chỉ nên dùng một thẻ h1 cho một trang html.
  • Các thẻ <h1>-<h6> không có thuộc tính đăch trưng riêng, chúng chỉ có các thuộc tính toàn cục.
« Bài trước Chú thích trong HTML
Đoạn văn bản
Bài mới
Mục lục