Thẻ Heading HTML: H1, H2, H3, H4, H5, H6

Thẻ Heading HTML được sử dụng để xác định cấp độ và cấu trúc nội dung trang web. Hãy tham khảo bài viết dưới đây để hiểu rõ hơn về các thẻ Heading trong HTML.

Thẻ Heading trong HTML

1. Thẻ Heading trong HTML

Trong HTML, có tổng cộng 6 thẻ heading từ h1 đến h6, mỗi thẻ giảm dần về mức độ quan trọng. Thẻ h1 đại diện cho tiêu đề quan trọng nhất, còn thẻ h6 là tiêu đề nhỏ nhất.

Mặc định, trình duyệt sẽ hiển thị văn bản trong thẻ heading với font chữ lớn và đậm hơn so với văn bản thông thường. Thẻ h1 có font chữ lớn nhất, thẻ h6 có font chữ nhỏ nhất.

Ví dụ: Dưới đây là một minh họa về cách sử dụng thẻ heading trong HTML:

Sau khi thực hiện thẻ heading, kết quả sẽ hiển thị như sau:

- Áp dụng thẻ heading trong HTML để phân loại và làm nổi bật các tiêu đề, những phần quan trọng trong tài liệu.

- Vì các công cụ tìm kiếm như Google thường sử dụng thẻ heading để chỉ mục cấu trúc và nội dung trang web, nên chúng ta nên tận dụng thẻ heading cho việc đặc điểm nội dung trên trang web.

- Ưu tiên sử dụng thẻ heading h1 cho tiêu đề chính, quan trọng nhất, và sau đó là các thẻ heading h2, h3, ... h6 theo thứ tự giảm dần.

3. Kích thước thẻ heading trong HTML

Kích thước mặc định của các thẻ heading trong HTML thường được định sẵn. Tuy nhiên, nếu cần, bạn có thể điều chỉnh kích thước bằng cách sử dụng thuộc tính style và thiết lập font-size trong CSS.

Ví dụ minh họa:

Kết quả sau khi sử dụng thẻ hr sẽ hiển thị như sau:

4. Thẻ hr trong HTML

Thẻ hr trong HTML thường được sử dụng để tạo đường ngang, phân chia các phần nội dung trên trang web.

Thẻ hr thường được sử dụng để phân tách các phần nội dung trên trang HTML.

Ví dụ: Dưới đây là minh họa cách sử dụng thẻ hr trong HTML:

Kết quả sau khi áp dụng thẻ hr sẽ có dạng như sau:

5. Phần tử head trong HTML

Phần tử head trong HTML chứa thông tin siêu dữ liệu (metadata). Siêu dữ liệu HTML là thông tin về tài liệu HTML và thường không được hiển thị trực tiếp cho người đọc.

Thường được đặt giữa thẻ html và thẻ body trong cấu trúc trang HTML.

Ví dụ: Dưới đây là một ví dụ về phần tử head trong HTML:

Kết quả sau khi sử dụng phần tử head sẽ có dạng như sau:

6. Xem mã nguồn HTML

6.1 Xem mã nguồn HTML

Để xem mã nguồn HTML, click phải vào trang HTML và chọn 'View Page Source' (trên trình duyệt Chrome) hoặc 'View Source' (trên trình duyệt Edge). Một cửa sổ mới hiện lên chứa mã nguồn HTML của trang.

6.2 Kiểm tra phần tử HTML

Click phải vào phần tử (hoặc click vào khoảng trống bất kỳ), chọn 'Inspect' hoặc 'Inspect Element' để xem các phần tử (bao gồm cả phần tử HTML và CSS). Nếu bạn muốn, bạn có thể chỉnh sửa HTML hoặc CSS trực tiếp trên cửa sổ Elements hoặc cửa sổ Styles.

7. Danh sách các thẻ trong HTML

Dưới đây là bảng danh sách các thẻ trong HTML:

Bài viết trên đây của Mytour vừa giới thiệu về thẻ Heading trong HTML. Trong bài viết tiếp theo, Mytour sẽ tiếp tục giới thiệu về các thẻ định dạng đoạn văn bản trong HTML.