[HTML/HTML5] Phần 6: Tiêu đề HTML

Cập nhật lần cuối: 26/06/2017 lúc 00:41:11

Tiêu đề rất quan trọng đối với các tài liệu HTML.

Tiêu đề HTML (HTML Heading)
Các tiêu đề được định nghĩa với các thẻ từ h1 đến h6. Thẻ h1 định nghĩa tiêu đề với kích thước lớn nhất. h6 định nghĩa với tiêu đề có kích thước nhỏ nhất (ít quan trọng nhất).


<h1>Tiêu đề h1 --- dammio.com</h1>
<h2>Tiêu đề h2</h2>
<h3>Tiêu đề h3</h3>
<h4>Tiêu đề h4</h4>
<h5>Tiêu đề h5</h5>
<h6>Tiêu đề h6</h6>

Lưu ý: Các trình duyệt sẽ tự động thêm 1 số khoảng trắng lề (margin) trước và sau 1 tiêu đề.

Tại sao tiêu đề lại quan trọng?
Các cơ chế tìm kiếm (Google, Bing, Coccoc, …) sử dụng tiêu đề để thiết lập chỉ mục kiến trúc và nội dung trang web của bạn, chẳng hạn như website dammio.com có sử dụng tiêu đề h1 và h2 để thiết lập chỉ mục nội dung. Người dùng thường xem lướt qua trang web theo tiêu đề, vì vậy sử dụng tiêu đề để hiển thị cấu trúc trang web là rất quan trọng. Tiêu đề h1 dùng cho các tiêu đề chính, theo sau là tiêu đề h2, và tiêu đề h3, và các tiêu đề khác.

Lưu ý: Sử dụng tiêu đề HTML chỉ cho các đề mục. Đừng dùng tiêu đề để in đậm hoặc làm to kích thước đoạn văn bản.

Quy tắc chiều ngang HTML
Thẻ hr định nghĩa một đường ngang ngăn cách các phần nội dung trong 1 trang HTML.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<h1>Đây là tiêu đề 1 --- dammio.com</h1>
<p>Đây là đoạn văn bản.</p>
<hr>
<h2>Đây là tiêu đề 2</h2>
<p>Đây là đoạn văn bản.</p>
<hr> <!-- Đường ngang ngăn cách -->
<h2>Đây là tiêu đề 2</h2>
<p>Đây là đoạn văn bản.</p>
</body>
</html>

Phần tử head
Phần tử head định nghĩa các thông tin siêu dữ liệu (metadata) ở đầu trang web về tài liệu HTML và các thông tin này không được hiển thị ở trình duyệt. Phần tử head được đặt ở giữa sau thẻ html và trước thẻ body.

<!DOCTYPE html>
<html>
<head>
  <title>Tiêu đề HTML đầu tiên</title>
  <meta charset="UTF-8">
</head>
<body>
.
.
.

Lưu ý: Siêu dữ liệu định nghĩa tiêu đề, tập ký tự (character set), phong cách, liên kết, script, và các thông tin khác.

Liên quan: [HTML/HTML5] Phần 36: Các phần tử mới trong HTML5

Các xem mã nguồn HTML?
Đôi khi bạn nhìn thấy 1 trang web rất đẹp và thắc mắc làm sao trang đó làm được như vậy, và chắc hẳn bạn muốn xem mã nguồn HTML trang đó.

Để xem mã nguồn HTML, bạn chọn chuột phải chọn “View Page Source” (ở Chrome) hay “View Source” (ở IE), hoặc cách tương tự ở các trình duyệt khác. Sau đó, bạn sẽ thấy 1 cửa sổ mã nguồn HTML.

Kiểm tra 1 phần tử HTML

Kiểm tra mã HTML của một liên kết bài viết mới ở website dammio.com

Chuột phải trên 1 phần tử (hay 1 vùng trống) và chọn “Inspect” (Kiểm tra — Ctrl + Shift + I) hay “Inspect Element” để xem cách các phần tử cấu thành (bạn sẽ nhìn thấy cả mã HTML và CSS). Bạn cũng có thể chỉnh sửa HTML hay CSS ở thanh bên Style.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [HTML/HTML5] Phần 6: Tiêu đề HTML. https://www.dammio.com/2017/06/18/htmlhtml5-phan-6-tieu-de-html.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 6: Tiêu đề HTML}, year = {2017}, url = {https://www.dammio.com/2017/06/18/htmlhtml5-phan-6-tieu-de-html}, urldate = {2024-09-29} }

Kết nối