Trước khi giới thiệu HTML ngữ nghĩa, các nhà phát triển đã sử dụng div để sắp xếp nội dung. Các phần tử div không có ý nghĩa riêng. Chúng chỉ cung cấp cách áp dụng các kiểu và sắp xếp nội dung.
Từ ngữ nghĩa có nghĩa là liên quan đến ý nghĩa. Các phần tử HTML ngữ nghĩa mô tả mục đích nội dung của chúng. Chúng cung cấp ý nghĩa cho nhà phát triển, người dùng, công cụ tìm kiếm và công nghệ hỗ trợ. Dưới đây là danh sách các thẻ HTML ngữ nghĩa phổ biến mà bạn có thể sử dụng trong dự án tiếp theo của mình.
Div là gì?
Trong HTML, phần tử div (phân chia) là vùng chứa cấp khối. Bạn sử dụng div để nhóm hoặc chia các phần tử HTML thành các phần trên trang web. Cú pháp như hình dưới đây:
<div>
</div>
Lợi ích của việc sử dụng các phần tử HTML ngữ nghĩa trên Div
HTML5 đã giới thiệu các phần tử HTML ngữ nghĩa để giúp đọc mã dễ dàng hơn. Các phần tử ngữ nghĩa cung cấp ý nghĩa và cấu trúc cho nội dung trang web.
Chúng làm cho mã của bạn dễ hiểu đối với các nhà phát triển khác. Chúng cũng giúp các công cụ tìm kiếm dễ dàng tìm thấy nội dung của bạn hơn và hướng lưu lượng truy cập đến trang web của bạn. Dưới đây là một số yếu tố ngữ nghĩa mà bạn có thể sử dụng trong các dự án HTML và CSS của mình.
Các thẻ xác định phần tiêu đề trên tài liệu. Thông thường, nó chứa logo trang web, điều hướng và tiêu đề của trang. Đây là phần xuất hiện trên đầu trang web. Bạn có thể tùy chỉnh tiêu đề theo nhu cầu của mình. Cú pháp như sau:
<body>
<header>
<h1> Hi There!</h1>
<p>I am a header</p>
</header>
</body>
2. <điều hướng>
Các <điều hướng> thẻ chứa các liên kết điều hướng cho trang web. Đây có thể là menu, mục lục hoặc chỉ mục. Nó thường được đặt trong nhãn. Cú pháp như sau:
<header>
<nav>
<ul>
<li>My website links</li>
<li><ahref="#"> Home</a></li>
<li ><ahref="#"> About Us </a></li>
</ul>
</nav>
<h1>The above is navigation part of my website.</h1>
</header>
Trên trình duyệt nó sẽ như thế này:
Bạn có thể sử dụng các mô hình bố cục CSS chẳng hạn như CSS flexbox để căn chỉnh các phần tử
