Khóa học IT HTML Cơ bản 016_Phần tử ngữ nghĩa
Phần tử ngữ nghĩa
HTML5 giới thiệu nhiều phần tử ngữ nghĩa, mục đích của các phần tử này là cải thiện tính ngữ nghĩa của cấu trúc tài liệu, làm cho tài liệu dễ đọc hơn, dễ bảo trì hơn và thân thiện hơn với cả công cụ tìm kiếm và nhà phát triển.
Cấu trúc trang thường bao gồm: đầu trang, chân trang, tiêu đề, điều hướng, nội dung, thanh bên, v.v.
Thiết kế bố cục trang sử dụng phần tử <div>:
[!Tóm tắt]
- Không thuận lợi cho nhà phát triển viết mã. Khi bạn đối mặt với màn hình đầy phần tử
<div>, rất khó để nhanh chóng phân biệt ý nghĩa của chúng.- Không thuận lợi cho SEO (Tối ưu hóa công cụ tìm kiếm). Trình duyệt chỉ biết bạn đã sử dụng phần tử
<div>, và bản thân phần tửdivkhông có ý nghĩa gì - nó chỉ là một container.
Thiết kế bố cục trang sử dụng phần tử ngữ nghĩa:
Sử dụng <header> <nav> <main> <aside> <footer> để biểu diễn các vùng khác nhau của trang. Các thẻ này mang lại cho trang ngữ nghĩa và cấu trúc tốt, giúp cả nhà phát triển và trình duyệt nhanh chóng hiểu nội dung web.
| Phần tử | Mục đích |
|---|---|
<header> | Dùng để định nghĩa vùng đầu trang, thường bao gồm logo website, điều hướng chính, liên kết toàn trang và hộp tìm kiếm. |
<nav> | Dùng để định nghĩa phần liên kết điều hướng của trang. |
<main> | Dùng để định nghĩa nội dung chính hoặc chức năng chính của trang. Nội dung này nên là duy nhất trên trang. |
<aside> | Dùng để định nghĩa nội dung thanh bên của trang. Nội dung này liên quan đến nội dung chính nhưng là tùy chọn. |
<footer> | Dùng để định nghĩa vùng chân trang, thường bao gồm thông tin bản quyền, thông tin liên hệ và các thông tin liên quan khác. |
<article> | Dùng để định nghĩa các bài viết, tài liệu, trang, ứng dụng hoặc vùng nội dung độc lập khác. |
<section> | Dùng để định nghĩa một phần độc lập chung trong trang web, thường chứa tiêu đề hoặc đoạn văn/khối. |
<figure> | Dùng để định nghĩa hình ảnh, biểu đồ, ảnh và nội dung độc lập khác. |
<figcaption> | Dùng để cung cấp tiêu đề hoặc mô tả cho phần tử <figure>. |
Ví dụ:
<!DOCTYPE html><html lang="en"><head> <title>Trang web của tôi</title></head><body> <header> <h1>Trang web của tôi</h1> </header>
<nav> <ul> <li><a href="#">Trang chủ</a></li> <li><a href="#">Về tôi</a></li> <li><a href="#">Liên hệ</a></li> </ul> </nav>
<main> <article> <h2>Giới thiệu về tôi</h2> <p>Tên tôi là XXX, đây là một ví dụ về phần tử ngữ nghĩa.</p> </article> </main>
<aside> <h2>Liên kết liên quan</h2> <ul> <li><a href="#">Blog của tôi</a></li> <li><a href="#">Trang GitHub của tôi</a></li> </ul> </aside>
<footer> <p>Bản quyền 2023 XXX</p> </footer></body></html>Hiệu ứng:
Ví dụ này chứa một trang web sử dụng các phần tử ngữ nghĩa HTML5 để mô tả ý nghĩa của nội dung web.
- Phần tử
<header>định nghĩa vùng đầu trang, chứa logo website và điều hướng chính. - Phần tử
<nav>định nghĩa phần liên kết điều hướng của trang. - Phần tử
<main>định nghĩa nội dung chính của trang, chứa bài viết giới thiệu của tôi. - Phần tử
<aside>định nghĩa nội dung thanh bên của trang, chứa các liên kết liên quan. - Phần tử
<footer>định nghĩa vùng chân trang, chứa thông tin bản quyền.
[!Tóm tắt]
- Công cụ tìm kiếm có thể hiểu nội dung web tốt hơn, cải thiện xếp hạng của trang trong kết quả tìm kiếm.
- Có thể giúp người khuyết tật hiểu nội dung web dễ dàng hơn, cải thiện khả năng tiếp cận web.
- Có thể giúp nhà phát triển tổ chức cấu trúc trang web tốt hơn, cải thiện khả năng bảo trì web.