Semantic HTML là gì? Và cách sử dụng nó đúng cách

Semantic HTML là gì?

Semantic HTML là việc sử dụng các thẻ HTML rõ ràng xác định mục đích của nội dung mà chúng bao bọc, giúp mã trang web của bạn dễ hiểu hơn cho cả nhà phát triển và các công cụ tìm kiếm.

Các thẻ HTML này còn được gọi là các phần tử ngữ nghĩa. Chúng cung cấp mô tả có ý nghĩa về vai trò của nội dung trong một trang web.

Ví dụ, <header> là một thẻ HTML ngữ nghĩa. Nó bao bọc phần đầu trang (nội dung giới thiệu) ở đầu trang.

Bạn có thể thấy điều này và một số thẻ HTML ngữ nghĩa phổ biến khác dưới đây:

Lưu ý

Hướng dẫn này giả định bạn có hiểu biết cơ bản về HTML, một ngôn ngữ đánh dấu được sử dụng để cấu trúc các trang web và nội dung. Nếu bạn mới bắt đầu với HTML, hãy đọc một hướng dẫn giới thiệu trước.

Semantic HTML so với Non-Semantic HTML

Các thẻ HTML ngữ nghĩa mô tả ý nghĩa của nội dung, trong khi các thẻ HTML không ngữ nghĩa là chung chung và chủ yếu được sử dụng cho mục đích định dạng và bố cục.

Các thẻ HTML không ngữ nghĩa không truyền đạt bất kỳ ý nghĩa cụ thể nào về chính nội dung.

Dưới đây là một so sánh hình ảnh giữa các khối mã HTML không ngữ nghĩa và ngữ nghĩa:

So sánh hai khối mã, bạn có thể dễ dàng thấy rằng mã không ngữ nghĩa chỉ sử dụng các thẻ <div> và <span> không mô tả nội dung hoặc các phần của trang.

Trong khi đó, mã HTML ngữ nghĩa cung cấp các mô tả rõ ràng mà ngay cả những người không lập trình cũng có thể hiểu.

Ví dụ, mã HTML ngữ nghĩa cho bạn biết rằng “My Website” là tiêu đề của trang.

Tại sao các thẻ HTML ngữ nghĩa lại quan trọng?

Các thẻ HTML ngữ nghĩa quan trọng vì chúng cải thiện khả năng truy cập và hiểu biết về các trang của bạn cho cả con người và các công cụ tìm kiếm.

Dưới đây là những lợi ích chính của việc sử dụng HTML ngữ nghĩa:

• Cải thiện trải nghiệm người dùng và khả năng truy cập: Các công cụ đọc màn hình và các công cụ khác có thể điều hướng các bố cục ngữ nghĩa hiệu quả hơn và mô tả chính xác nội dung của bạn cho người dùng
• Hiệu suất SEO tốt hơn: Các thẻ ngữ nghĩa trong HTML giúp các bot tìm kiếm như Googlebot xác định chính xác các phần liên quan của nội dung từ HTML của trang bạn. Điều này có thể dẫn đến việc lập chỉ mục tốt hơn và có thể thứ hạng cao hơn cho các từ khóa liên quan.
• Tăng khả năng xuất hiện cho các kết quả phong phú: Các phần tử ngữ nghĩa có thể nâng cao schema markup, một đoạn mã bạn thêm vào các trang của mình để giúp Google hiển thị các kết quả phong phú. Các kết quả phong phú chứa thông tin bổ sung như đánh giá, giá cả hoặc ngày sự kiện.
• Mã bảo vệ tương lai: Semantic HTML tuân theo các tiêu chuẩn web giúp mã của bạn tương thích hơn với các công nghệ trong tương lai
• Giao tiếp rõ ràng: Các nhà phát triển, nhà thiết kế và SEO làm việc cùng nhau có thể dễ dàng hiểu mục đích của từng phần. Điều này giúp việc duy trì và cập nhật trang web của bạn trở nên dễ dàng hơn.

Đọc thêm: Cải thiện SEO: 11 bước để nâng cao thứ hạng của bạn

Các phần tử HTML ngữ nghĩa phổ biến

Có nhiều phần tử HTML ngữ nghĩa, nhưng hãy cùng xem xét các thẻ ngữ nghĩa được sử dụng phổ biến nhất theo từng loại:

Các thẻ HTML ngữ nghĩa cho cấu trúc

Các phần tử HTML ngữ nghĩa này xác định cấu trúc và bố cục của một trang:

• <header>: Chỉ định nội dung giới thiệu hoặc điều hướng của một trang web hoặc một phần. Nó thường bao gồm các phần tử như tiêu đề, menu điều hướng, thanh tìm kiếm và logo.
• <nav>: Định nghĩa một khối liên kết điều hướng. Sử dụng nó cho điều hướng toàn trang (ví dụ: liên kết đến “Trang chủ,” “Giới thiệu về chúng tôi,” hoặc “Dịch vụ”) hoặc để nhóm các liên kết thành các phần cụ thể trong một trang (như “Tính năng,” “Giá cả,” hoặc “Mục lục”).
• <main>: Đại diện cho nội dung chính hoặc các phần chính của một trang web. Chỉ sử dụng thẻ này một lần cho mỗi trang.
• <section>: Nhóm các nội dung liên quan có cùng chủ đề hoặc mục đích. Ví dụ, bạn có thể chia một landing page thành các phần như “Tính năng,” “Lợi ích,” hoặc “Trường hợp sử dụng.”
• <article>: Định nghĩa nội dung độc lập mà bạn có thể tái sử dụng hoặc phân phối riêng biệt, như bài viết blog, đánh giá sản phẩm và bài báo tin tức.
• <aside>: Đại diện cho nội dung bổ sung hoặc hỗ trợ nội dung chính. Một số ví dụ bao gồm thanh bên, thông báo hoặc một khối liên kết liên quan.
• <footer>: Chỉ định phần chân trang của một trang hoặc phần thường bao gồm các liên kết điều hướng, thông tin liên hệ và thông tin bản quyền.

Dưới đây là một ví dụ về khối mã HTML được đánh dấu bằng các thẻ ngữ nghĩa ở trên:

Đây là cách mà trang kết quả có thể trông như thế nào (các thẻ ngữ nghĩa được chú thích cho thấy các khu vực mà chúng ảnh hưởng).

Các thẻ HTML ngữ nghĩa cho văn bản

Các thẻ HTML ngữ nghĩa này truyền đạt ý nghĩa và định dạng của văn bản mà chúng được áp dụng:

• <h1> đến <h6> (tiêu đề): Chỉ định thứ bậc thông tin trên một trang web. Ví dụ, <h1> đánh dấu tiêu đề cấp cao nhất, trong khi <h2> đến <h6> đại diện cho các tiêu đề phụ.
• <p> (đoạn văn): Đại diện cho một khối văn bản—thường là một đoạn văn. Tránh sử dụng <p> cho các từ hoặc cụm từ đơn lẻ.
• <a> (liên kết): Đánh dấu các liên kết siêu văn bản dẫn đến các trang khác hoặc các phần trong cùng một tài liệu. Sử dụng văn bản liên kết mô tả, phù hợp để thông báo cho người dùng và các công cụ tìm kiếm nơi liên kết dẫn đến. <ol> (danh sách có thứ tự)
• : Chỉ định một danh sách có thứ tự (được đánh số). Sử dụng nó cho các mục cần được trình bày theo một trình tự cụ thể (ví dụ: các bước trong một công thức).<ul> (danh sách không có thứ tự)
• <ul> (danh sách không có thứ tự): Định nghĩa một danh sách không có thứ tự (danh sách có dấu chấm đầu dòng). Sử dụng nó cho nội dung không yêu cầu thứ tự (ví dụ: danh sách các tính năng).
• <q> / <blockquote>: Đại diện cho văn bản có trích dẫn. Sử dụng thẻ <q> cho các trích dẫn ngắn, inline và <blockquote> cho các trích dẫn dài, nhiều dòng.
• <em> (nhấn mạnh): Đánh dấu văn bản để chỉ ra tầm quan trọng, thường được hiển thị bằng chữ nghiêng. Sử dụng một cách tiết kiệm để làm nổi bật information quan trọng—không phải để tạo kiểu.
• <strong> (nhấn mạnh mạnh mẽ): Chỉ ra văn bản có tầm quan trọng mạnh mẽ, thường được hiển thị bằng chữ đậm. Sử dụng nó để làm nổi bật thông tin quan trọng.

Xem ví dụ về đoạn mã HTML này với văn bản được đánh dấu bằng các thẻ ngữ nghĩa ở trên:

Và đây là cách trang kết quả có thể trông như thế nào (các thẻ ngữ nghĩa được chú thích cho thấy các khu vực mà chúng ảnh hưởng).

Các Thẻ HTML Ngữ Nghĩa Khác

Các thẻ này phục vụ các mục đích chuyên biệt ngoài cấu trúc chung hoặc văn bản:

• <figure> và <figcaption>: Cung cấp ngữ cảnh cho nội dung phương tiện được nhóm lại (ví dụ: hình ảnh, sơ đồ hoặc biểu đồ). Kết hợp thẻ <figure> với phần tử <figcaption> để bao gồm một chú thích hoặc mô tả.
• <mark>: Làm nổi bật văn bản liên quan đến ngữ cảnh hiện tại, thường được sử dụng để nhấn mạnh kết quả tìm kiếm hoặc các điểm chính trong văn bản. Theo mặc định, các trình duyệt hiển thị <mark> với nền màu vàng.
• <pre>: Chỉ ra văn bản đã được định dạng trước và lý tưởng cho việc hiển thị các đoạn mã hoặc bất kỳ văn bản nào mà định dạng là rất quan trọng. Ví dụ, giữ nguyên khoảng trắng, ngắt dòng, v.v.

Các Thực Hành Tốt Nhất Về HTML Ngữ Nghĩa

Tuân theo các thực hành tốt nhất này để triển khai hiệu quả các phần tử HTML ngữ nghĩa:

Sử Dụng Các Phần Tử Đúng Mục Đích

Luôn chọn các phần tử ngữ nghĩa phù hợp với mục đích của nội dung.

Ví dụ, sử dụng <header> cho nội dung giới thiệu, <article> cho các bài viết độc lập, và <nav> cho các liên kết điều hướng. Điều này giúp HTML của bạn dễ đọc và thân thiện với SEO.

Không Sử Dụng Các Thẻ HTML Ngữ Nghĩa Để Tạo Kiểu

Đừng sử dụng các thẻ HTML ngữ nghĩa chỉ vì hiệu ứng trực quan của chúng.

Ví dụ, đừng sử dụng các thẻ <h1> đến <h6> chỉ để làm cho văn bản lớn. Sử dụng chúng cho tiêu đề chính và tiêu đề phụ của nội dung của bạn.

Tương tự, đừng áp dụng các phần tử <strong> hoặc <em> chỉ để thêm chữ đậm hoặc chữ nghiêng cho văn bản không cần nhấn mạnh.

Nói tóm lại, chỉ chọn ngữ nghĩa để truyền đạt ý nghĩa và ngữ cảnh. Để tạo kiểu và hình thức, hãy sử dụng CSS.

Lồng Ghép Các Thẻ Đúng Cách

Đảm bảo lồng ghép các thẻ ngữ nghĩa theo đúng thứ tự để duy trì cấu trúc logic.

Ví dụ, đặt các tiêu đề bên trong các thẻ <section> hoặc <article> và đảm bảo bạn đặt một <footer> trong ngữ cảnh cha của nó.

Ngoài ra, chỉ sử dụng phần tử <main> một lần mỗi trang. Và đảm bảo không lồng nó trong các thẻ ngữ nghĩa khác như <header>, <footer>, <article> hoặc <aside>.

Tìm và Sửa Các Vấn Đề Về Thẻ HTML

HTML ngữ nghĩa được triển khai tốt có thể cải thiện hiệu suất SEO của trang web và trải nghiệm người dùng của nó.

Tuy nhiên, việc sử dụng chúng không đúng cách có thể gây nhầm lẫn cho các công cụ tìm kiếm và dẫn đến các vấn đề với thứ hạng nội dung của bạn.

Bạn có thể tránh một số vấn đề này bằng cách thực hiện các kiểm tra SEO định kỳ cho trang web của bạn.

Nhanh chóng kiểm tra các tín hiệu thẻ HTML như tiêu đề, tiêu đề và văn bản alt trên một URL với trình kiểm tra SEO website miễn phí của chúng tôi.

Để theo dõi liên tục trên toàn bộ trang web của bạn, Semrush Site Audit sẽ đánh dấu các vấn đề HTML quy mô lớn.

Mở công cụ, nhập miền của bạn và nhấp vào “Bắt đầu Kiểm Tra.”

Theo dõi các hướng dẫn cấu hình và nhấp vào “Bắt đầu Kiểm Tra Trang Web.”

Tiếp theo, chuyển đến tab “Vấn Đề”.

Và gõ “thẻ” vào ô tìm kiếm.

Bạn sẽ thấy danh sách các vấn đề về thẻ HTML nếu trang web của bạn có bất kỳ vấn đề nào.

Hầu hết trong số đó liên quan đến các thẻ HTML không phải là phần tử ngữ nghĩa. Nhưng bạn cũng có thể kiểm tra xem có bất kỳ vấn đề nào với các thẻ <h1> của bạn không.

Nhấp vào “Tại sao và cách sửa nó” để tìm hiểu thêm về các vấn đề. Và làm theo các khuyến nghị để sửa chúng.