Đề mục trong HTML
Đề mục rất quan trọng trong một trang HTML Đề mục trong HTML Đề mục được định nghĩa bằng các thẻ từ <h1> đến <h6> <h1> sử dụng để định nghĩa đề mục quan trọng nhất trong trang. <h6> sử dụng để định nghĩa đề mục ít quan trọng nhất trong trang. ...
Đề mục rất quan trọng trong một trang HTML
Đề mục trong HTML
Đề mục được định nghĩa bằng các thẻ từ <h1> đến <h6>
<h1> sử dụng để định nghĩa đề mục quan trọng nhất trong trang. <h6> sử dụng để định nghĩa đề mục ít quan trọng nhất trong trang.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <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> </body> </html> |
Demo
Lưu ý: Các trình duyệt sẽ tự động thêm khoảng trống ở trên và dưới mỗi đề mục.
Sự quan trọng của đề mục
Chỉ sử dụng các thẻ từ h1 đến h6 cho đề mục. Không sử dụng các thẻ đề mục để làm chữ TO hoặc đậm.
Các bộ máy tìm kiếm sẽ sử dụng những đề mục để đánh dấu cấu trúc và nội dung website của bạn.
Người dùng sẽ đọc website của bạn dễ dàng hơn thông qua các đề mục, vì vậy việc sử dụng để mục để hiển thị cấu trúc trang là rất quan trọng.
Thẻ h1 dùng để đánh dấu đề mục chính, sau đó đến thẻ h2, h3… tùy thuộc vào độ quan trọng của đề mục.
Dòng kẻ ngang
Sử dụng thẻ <hr> để tạo đường kẻ ngang trong trang HTML.
Thẻ hr có tác dụng tách biệt giữa các nội dung với nhau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <p>Thẻ hr dùng để tạo một dòng kẻ ngang tách các nội dung:</p> <hr> <p>Đây là một đoạn văn bản.</p> <hr> <p>Đây là một đoạn văn bản.</p> <hr> <p>Đây là một đoạn văn bản.</p> </body> </html> |
Demo
Thẻ <head> trong HTML
Thẻ <head> không liên quan gì tới các đề mục trong HTML.
Thẻ <head> chỉ dùng để chứa những dữ liệu bổ sung, không được hiển thị trên trang.
Thẻ <head> được đặt ở giữa thẻ <html> và thẻ <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Trang web đầu tiên của tôi</title> <meta charset="UTF-8"> </head> <body> <p>Thẻ head dùng để chứa các siêu dữ liệu (meta data).</p> <p>Siêu dữ liệu là những dữ liệu bổ sung cho trang HTML.</p> </body> </html> |
Demo
Thẻ <title> trong HTML
Thẻ <title> dùng để định nghĩa tiêu đề của trang HTML.
Tiêu đề này sẽ không hiển thị trên nội dung của trang nhưng sẽ được hiển thị trên thanh tiêu đề của trình duyệt.
Thẻ <meta> trong HTML
Thẻ <meta> được dùng để định nghĩa mã ký tự và các thông tin khác cho trang HTML.
Các thẻ dữ liệu khác
Trong bài học về trang trí HTML bạn sẽ biết nhiều hơn về các thẻ:
Thẻ <style> dùng để định nghĩa các kiểu CSS trong trang.
Thẻ <link> dùng để liên kết tới một tệp tin CSS bên ngoài trang.
Cách xem mã nguồn một trang web
Bạn đã bao giờ nhìn thấy một trang web rất đẹp và tự hỏi “Này! Làm sao họ làm được như thế nhỉ?”
Rất đơn giản, bạn nhấn chuột phải vào một khoảng trống trong trang và chọn “View Page Source” (trong Chrome) hoặc “View Source” (trong IE), hoặc những câu tương tự trong các trình duyệt khác. Sau đó trình duyệt sẽ mở ra một cửa sổ (hoặc tab) mới chứa mã HTML của trang.
Bài tập
Bài tập 1 Bài tập 2 Bài tập 3Thư viện thẻ HTML
Thư viện thẻ của WebVN chứa thông tin về các thẻ và các thuộc tính trong HTML.
Bạn sẽ được học thêm về các thẻ và thuộc tính HTML trong những bài tiếp theo.
| Thẻ | Miêu tả |
|---|---|
| <html> | Định nghĩa trang HTML |
| <body> | Nội dung trang HTML |
| <head> | Thành phần bổ sung thông tin cho trang HTML |
| <h1> đến <h6> | Tạo đề mục |
| <hr> | Tạo dòng kẻ ngang |
