Semantic Markup trong HTML
Nếu bạn là một người mới bắt đầu học HTML, hoặc thậm chí đã có một chút kinh nghiệm, thì Semantic Markup là một khái niệm theo mình nghĩ là khá quan trọng mà bạn cần chú ý khi xây dựng cấu trúc cho website. Nào bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!
Semantic Markup là gì?
Semantic Markup HTML cung cấp các thẻ có ý nghĩa cụ thể, giúp bạn lẫn các công cụ tìm kiếm hiểu rõ hơn về cấu trúc và nội dung của trang web.
Semantic HTML vs. Non-Semantic HTML
Ngoài ra trong thực tế còn có Non-Semantic HTML nữa nhé . Sự khác biệt lớn nhất giữa chúng nằm ở khả năng mô tả ý nghĩa của nội dung.
- Semantic HTML: Sử dụng các thẻ có ý nghĩa rõ ràng, giúp người đọc và công cụ tìm kiếm hiểu được mục đích của nội dung.
- Non-Semantic HTML: Sử dụng các thẻ chung chung như
<div>và<span>, không mang ý nghĩa cụ thể về nội dung.
Chức năng của Semantic Markup?
Có lẽ bạn đang tự hỏi, tại sao chúng ta cần quan tâm đến Semantic Markup? Tại sao không chỉ sử dụng các thẻ <div> và <span> để tạo cấu trúc cho trang web? Dưới đây là những lý do chính:
Dễ đọc và dễ hiểu: Code Semantic HTML rõ ràng, mạch lạc, giúp cả người lẫn bot dễ dàng hiểu được cấu trúc và nội dung của trang web.
Cải thiện khả năng tiếp cận (Accessibility): Giúp người dùng khuyết tật sử dụng trình đọc màn hình (screen reader) dễ dàng điều hướng và hiểu nội dung trang web.
Tối ưu hóa công cụ tìm kiếm (SEO): Giúp các công cụ tìm kiếm hiểu rõ hơn về nội dung và cấu trúc của trang web, từ đó cải thiện thứ hạng tìm kiếm của bạn.
Nâng cao khả năng bảo trì và mở rộng: Giúp mã nguồn HTML trở nên dễ đọc, dễ hiểu và dễ bảo trì hơn.
Các thẻ Semantic HTML5
HTML5 giới thiệu một loạt các thẻ semantic mới, giúp chúng ta dễ dàng hơn trong việc đánh dấu nội dung trang web một cách có ý nghĩa. Dưới đây là một số thẻ phổ biến nhất:
<header>:
Đại diện cho phần tiêu đề của một trang web hoặc một phần tử HTML khác. Nó thường chứa logo, tiêu đề trang web, menu điều hướng và các thông tin giới thiệu khác.
<nav>:
Đại diện cho một phần của trang web chứa các liên kết điều hướng. Nó thường được sử dụng để tạo menu điều hướng chính của trang web.
<main>:
Đại diện cho nội dung chính của một trang web. Nó nên chứa nội dung quan trọng nhất của trang web, không bao gồm các phần tử lặp lại như header, footer hoặc sidebar.
<article>:
Đại diện cho một nội dung độc lập và có ý nghĩa, có thể được phân phối hoặc tái sử dụng độc lập. Nó thường được sử dụng để đánh dấu các bài viết trên blog, tin tức, diễn đàn hoặc các nội dung tương tự.
<section>:
Đại diện cho một phần của trang web được nhóm lại theo một chủ đề hoặc mục đích cụ thể. Nó thường được sử dụng để chia trang web thành các phần nhỏ hơn, dễ quản lý và dễ hiểu hơn.
<aside>:
Đại diện cho một nội dung phụ, liên quan đến nội dung chính của trang web nhưng không phải là nội dung cốt lõi. Nó thường được sử dụng để hiển thị các thông tin bổ sung, quảng cáo, liên kết liên quan hoặc các nội dung tương tự.
<footer>:
Đại diện cho phần cuối của một trang web hoặc một phần tử HTML khác. Nó thường chứa thông tin bản quyền, thông tin liên hệ, liên kết đến các trang khác trên trang web hoặc các thông tin bổ sung khác.
Ví dụ
Để giúp bạn hiểu rõ hơn về cách sử dụng Semantic Markup, chúng ta sẽ cùng nhau xây dựng một trang web đơn giản giới thiệu một nhà hàng Việt Nam.
See the Pen
Semantic HTML5 by haycuoilennao19 (@haycuoilennao19)
on CodePen.
Trong ví dụ này, chúng ta đã sử dụng các thẻ semantic để đánh dấu các phần khác nhau của trang web:
<header>: Chứa logo, tiêu đề nhà hàng, mô tả ngắn và menu điều hướng.<nav>: Chứa các liên kết điều hướng đến các trang khác trên trang web.<main>: Chứa nội dung chính của trang web, bao gồm phần giới thiệu và thực đơn.<section>: Chia nội dung chính thành các phần nhỏ hơn, dễ quản lý và dễ đọc hơn.<article>: Đánh dấu các món ăn trong thực đơn là các nội dung độc lập và có ý nghĩa.<aside>: Hiển thị thông tin ưu đãi đặc biệt.<footer>: Chứa thông tin bản quyền, địa chỉ, điện thoại và email của nhà hàng.
Lưu ý khi sử dụng Semantic Markup
Trước khi chọn một thẻ HTML, bạn hãy suy nghĩ về ý nghĩa của nội dung mà muốn đánh dấu. Thẻ nào phù hợp nhất để truyền tải ý nghĩa đó một cách rõ ràng và chính xác?
Ngoài ra bạn hãy cố gắng sử dụng các thẻ semantic một cách nhất quán trên toàn bộ trang web. Điều này sẽ giúp bạn tạo ra một trang web có cấu trúc rõ ràng, dễ hiểu và dễ bảo trì.
Kết luận
Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về Semantic Markup và cách áp dụng nó vào thực tế. Chúc bạn thành công trên con đường trở thành nhà lập trình web chuyên nghiệp!
