07/09/2018, 14:42

Thẻ Heading trong HTML

Heading (tiêu đề) là một yếu tố quan trọng trong tài liệu HTML. Heading trong HTML Heading được định nghĩa bằng các thẻ <h1> đến <h6>. <h1> xác định tiêu đề quan trọng nhất, giá trị giảm dần đến <h6>. Ví dụ: <h1>Đây là ...

Heading (tiêu đề) là một yếu tố quan trọng trong tài liệu HTML.

Heading trong HTML

Heading được định nghĩa bằng các thẻ <h1> đến <h6>.

<h1> xác định tiêu đề quan trọng nhất, giá trị giảm dần đến <h6>.

Ví dụ:

<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>

Lưu ý: trình duyệt sẽ tự thêm một khoảng trắng trước và sau Heading.

Tầm quan trọng của Heading

Các công cụ tìm kiếm sử dụng tiêu đề để lập chỉ mục cấu trúc và nội dung cho trang web của bạn.

Người dùng lướt web tìm kiếm thông tin dựa theo tiêu đề chính, vì vậy sử dụng tiêu đề đúng cách rất quan trọng để thể hiện cấu trúc bài viết hay trang web.

Thẻ <h1> nên được sử dụng cho tiêu đề chính, tiếp theo là <h2>, sau đó đến <h3>, v.v.

Lưu ý: Chỉ sử dụng Heading trong HTML cho tiêu đề. Không sử dụng Heading để biểu thị chữ to hoặc in đậm.

Quy tắc sử dụng Horizontal (dòng kẻ ngang) trong HTML

Thẻ <hr> định nghĩa sự ngắt quãng văn bản trong một trang HTML và thường được hiển thị dưới dạng dòng kẻ ngang.

Phần tử <hr> được sử dụng để tách nội dung (hoặc xác định một thay đổi) trong một trang HTML:

<h1>Đây là tiêu đề 1</h1>
<p>Đây là nội dung 1.</p>
<hr>
<h2>Đây là tiêu đề 2</h2>
<p>Đây là nội dung 2.</p>
<hr>

Phần tử <head> trong HTML

Phần tử <head> không liên quan gì đến thẻ tiêu đề trong HTML.

Phần tử <head> là một vùng chứa cho metadata (siêu dữ liệu). Metadata trong HTML là dữ liệu về tài liệu HTML. Metadata không được hiển thị.

Phần tử <head> được đặt giữa thẻ <html> và thẻ <body>:

<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset=”UTF-8″>
</head>
<body>
.
.
.

Lưu ý: metadata thường xác định tiêu đề tài liệu, tập ký tự, kiểu, liên kết, tập lệnh, và các thông tin khác.

Làm thế nào để xem mã nguồn HTML?

Xem mã nguồn HTML

Rất đơn giản, nhấp chuột phải vào trang và chọn “Xem Nguồn trang” (trong Chrome) hoặc “Xem Nguồn” (trong IE) hoặc tương tự trong các trình duyệt khác. Thao tác này sẽ mở ra một cửa sổ chứa mã nguồn HTML của trang.

Kiểm tra một thành phần HTML

Nhấp chuột phải vào một phần tử (hoặc một vùng trống), và chọn “Kiểm tra” hoặc “Kiểm tra phần tử” để xem những thành phần nào được tạo thành (cả HTML và CSS). Bạn cũng có thể chỉnh sửa HTML, CSS khi đang di chuyển trong bảng điều khiển Elements hoặc Styles.

Tham khảo các thẻ HTML

Thẻ Mô tả
<html> xác định nguồn tài liệu HTML
<body> xác định phần thân HTML
<head> bao gồm phần tử đầu (title, scripts, styles, meta information,…)
<h1> to <h6> xác định tiêu đề trong HTML
<hr> xác định sự thay đổi chủ đề trong nội dung
Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy:
  • Khóa học lập trình frontend cơ bản : Bootstrap 4, Jquery, CSS3, HTML5
  • Học lập trình Frontend nâng cao qua project thực tế
0