Semantic HTML là gì? Ý nghĩa và cách dùng HTML semantic tags

Thẻ	Chức năng	Cách sử dụng
< h1 > - < h6 >	Xác định các cấp tiêu đề.	< h1 > cho tiêu đề chính, < h2 > - < h6 > cho các cấp nội dung thấp hơn.
< p >	Xác định một đoạn văn.	Dùng để phân chia nội dung thành các đoạn riêng biệt.
< strong >	Đánh dấu nội dung quan trọng.	Dùng cho từ hoặc cụm từ cần nhấn mạnh về mặt ngữ nghĩa.
< em >	Nhấn mạnh nội dung.	Dùng khi muốn thể hiện sự nhấn mạnh trong câu.
< mark >	Đánh dấu nội dung cần chú ý.	Dùng để làm nổi bật một phần văn bản trong ngữ cảnh cụ thể.
< time >	Biểu diễn ngày, giờ hoặc thời gian.	Có thể kết hợp thuộc tính datetime để cung cấp giá trị thời gian cho máy đọc.
< small >	Xác định nội dung phụ.	Dùng cho chú thích, điều khoản, thông tin bản quyền hoặc lưu ý.
< del >	Đánh dấu nội dung đã xóa.	Dùng khi thể hiện thông tin không còn được áp dụng.
< ins >	Đánh dấu nội dung được thêm.	Dùng để thể hiện phần nội dung mới được bổ sung.

Cấu trúc cơ bản có thể triển khai như sau:

< body>

  < header>

    < nav>

      < !-- Menu điều hướng -->

    < /nav>

  < /header>

  < main>

    < section>

      < h1>Tiêu đề chính

      < !-- Nội dung chính -->

    < /section>

    < section>

      < h2>Chủ đề liên quan

      < !-- Nội dung -->

    < /section>

    < aside>

      < !-- Nội dung bổ trợ -->

    < /aside>

  < /main>

  < footer>

    < !-- Thông tin chân trang -->

  < /footer>

< /body>

Trong đó:

- < header > đảm nhận phần đầu trang và thường chứa khu vực điều hướng < nav >. 

- < main > bao bọc nội dung chính, bên trong có thể sử dụng < section > để phân chia các chủ đề và < aside > cho thông tin bổ trợ.

- Cuối cùng, < footer > chứa các thông tin ở phần chân trang.

Khi xây dựng layout, cần đảm bảo mỗi semantic tag phản ánh đúng vai trò của nội dung. Tuy nhiên, không nên sử dụng < section > hoặc < aside > chỉ để tạo bố cục; CSS Grid, Flexbox và các thuộc tính CSS mới là công cụ phù hợp để xử lý việc trình bày và sắp xếp giao diện.

 

 

3. Kết hợp với CSS và JavaScript

Semantic HTML chịu trách nhiệm xác định ý nghĩa và cấu trúc nội dung, trong khi CSS đảm nhận phần trình bày và JavaScript xử lý các hành vi tương tác. Phân tách rõ ba vai trò này giúp mã nguồn dễ đọc, dễ bảo trì và hạn chế phụ thuộc lẫn nhau.

Kết hợp semantic HTML với CSS

Developer có thể sử dụng CSS để định dạng trực quan cho các semantic tags mà không làm thay đổi ý nghĩa của chúng. Chẳng hạn, < header >, < nav >, < main > và < footer > có thể được tùy chỉnh bằng Flexbox hoặc Grid để tạo layout responsive.

< header class="site-header">

  < nav class="main-nav">

    < a href="/">Trang chủ

    < a href="/blog">Blog

  < /nav>

< /header>

.site -header {

  display : flex;

  justify-content : space-between;

}

.main-nav {

  display : flex;

  gap : 20px;

}

Kết hợp semantic HTML với JavaScript

JavaScript nên thao tác dựa trên các phần tử có vai trò rõ ràng thay vì phụ thuộc quá nhiều vào cấu trúc DOM hoặc các class chỉ dùng cho mục đích hiển thị. Ví dụ, có thể sử dụng < button > cho một hành động mở menu và JavaScript để xử lý sự kiện click.

< button type="button" id="menu-toggle">

  Mở menu

< /button>

const button = document.querySelector('#menu-toggle');

button.addEventListener('click', () => {

  // Xử lý mở/đóng menu

});

Cách tiếp cận này giúp HTML tập trung vào cấu trúc, CSS tập trung vào giao diện và JavaScript tập trung vào hành vi. Khi cần thay đổi thiết kế hoặc chức năng, developer cũng dễ dàng chỉnh sửa từng lớp mà ít ảnh hưởng đến các thành phần còn lại.

4. Xây dựng ma trận heading chuẩn SEO

Heading là hệ thống tiêu đề giúp phân cấp và tổ chức nội dung trên website. Khi xây dựng ma trận heading chuẩn SEO, cần sắp xếp các thẻ < h1 > đến < h6 > theo thứ tự logic, phản ánh đúng mối quan hệ giữa chủ đề chính và các nội dung con. Cấu trúc này vừa giúp người dùng dễ theo dõi, vừa hỗ trợ công cụ tìm kiếm hiểu rõ bố cục trang.

Có thể xây dựng ma trận heading theo nguyên tắc:
 

 

Ví dụ cấu trúc trang web sử dụng semantic HTML

Dưới đây là một cấu trúc trang web cơ bản sử dụng các semantic HTML tags phổ biến. Mỗi thẻ đảm nhận một vai trò riêng, giúp mã nguồn dễ hiểu và thể hiện rõ mối quan hệ giữa các khu vực nội dung. 

< !DOCTYPE html>

< html lang="vi">

< head>

  < meta charset="UTF-8">

  < meta name="viewport" content="width=device-width, initial-scale=1.0">

  < title>Semantic HTML

< /head>

< body>

  < header>

    < a href="/" class="logo">Website

    < nav>

      < a href="/">Trang chủ

      < a href="/about">Giới thiệu

      < a href="/blog">Blog

      < a href="/contact">Liên hệ

    < /nav>

  < /header>

  < main>

    < article>

      < header>

        < h1>Semantic HTML là gì?

        < p>

          Cập nhật ngày

          < time datetime="2026-08-14">14/08/2026

        < /p>

      < /header>

      < section>

        < h2>Semantic HTML là gì?

        < p>

          Semantic HTML sử dụng các thẻ có ý nghĩa để mô tả

          cấu trúc và vai trò của nội dung trên website.

        < /p>

      < /section>

      < section>

        < h2>Các thẻ semantic HTML phổ biến

        < h3>Nhóm thẻ cấu trúc

        < p>Gồm header, nav, main và footer.

        < figure>

          < img src="semantic-html.jpg" alt="Cấu trúc semantic HTML">

          < figcaption>Cấu trúc cơ bản của một trang semantic HTML.< /figcaption>

        < /figure>

      < /section>

    < /article>

    < aside>

      < h2>Bài viết liên quan

      < ul>

        < li > HTML là gì?

        < li > SEO website là gì?

      < /ul>

    < /aside>

  < /main>

  < footer>

    < p>© 2026 Website. All rights reserved.

  < /footer>

< /body>

< /html>
 

Cụ thể: 

 

Những sai lầm phổ biến khi dùng semantic HTML và cách khắc phục

Semantic HTML giúp cấu trúc website rõ ràng hơn nhưng sử dụng không đúng ngữ cảnh có thể làm mất đi lợi ích. Hiện nay, một số developer có xu hướng lạm dụng semantic tags hoặc thay thế mọi < div > bằng các thẻ semantic dù không thực sự phù hợp. Vì vậy, bạn cần hiểu rõ vai trò của từng thẻ và lựa chọn dựa trên ngữ nghĩa nội dung thay vì sử dụng theo khuôn mẫu.

1. Lạm dụng HTML semantic 

Một trong những sai lầm phổ biến là sử dụng quá nhiều semantic tags cho những nội dung không có vai trò tương ứng. Chẳng hạn, không phải mọi nhóm nội dung đều cần đặt trong < section >, cũng như không phải mọi nhóm liên kết đều nên sử dụng < nav >. Lạm dụng có thể khiến cấu trúc HTML trở nên phức tạp và gây khó khăn cho công nghệ hỗ trợ khi phân tích nội dung.

Cách khắc phục là chỉ sử dụng semantic tag khi nó thực sự mô tả đúng vai trò của nội dung. Nếu không có thẻ semantic phù hợp, < div > vẫn là lựa chọn hoàn toàn hợp lệ để tạo vùng chứa hoặc phục vụ mục đích bố cục.

2. Thay thế hoàn toàn div bằng thẻ semantic

Sử dụng semantic HTML không có nghĩa là bạn phải loại bỏ hoàn toàn < div > khỏi mã nguồn website. Thẻ < div > vẫn cần thiết khi developer chỉ cần một phần tử chứa để nhóm các thành phần hoặc phục vụ việc xây dựng layout mà không có ý nghĩa ngữ nghĩa cụ thể. Cố gắng thay mọi < div > bằng < section >, < article > hoặc < aside > có thể khiến mã HTML trở nên thiếu chính xác.

Do đó, cần xác định mục đích của phần tử trước khi lựa chọn tag. Nếu nội dung có vai trò semantic rõ ràng, hãy dùng thẻ tương ứng; nếu chỉ cần một container để xử lý CSS hoặc JavaScript, < div > vẫn là lựa chọn phù hợp. 

3. Vi phạm quy tắc phân cấp heading

Sử dụng heading không theo thứ tự logic là lỗi thường gặp khi xây dựng cấu trúc nội dung. Ví dụ, một trang có thể chuyển trực tiếp từ < h2 > sang < h4 > chỉ vì muốn thay đổi kích thước tiêu đề, khiến mối quan hệ giữa các nội dung trở nên khó hiểu. Heading cần phản ánh cấp độ và cấu trúc của nội dung, không nên được lựa chọn chỉ dựa trên cách hiển thị. Cách khắc phục là xây dựng hệ thống heading theo thứ bậc từ < h1 > đến các cấp thấp hơn dựa trên cấu trúc nội dung thực tế. Sử dụng CSS để điều chỉnh kích thước, font chữ hoặc khoảng cách của heading thay vì thay đổi cấp thẻ chỉ để đạt được một kiểu hiển thị mong muốn.
 

 

4. Không dùng main hoặc nav

Một số website vẫn sử dụng < div > để bao bọc toàn bộ nội dung chính hoặc khu vực menu mà không dùng < main > và < nav >. Điều này khiến cấu trúc trang kém rõ ràng, đồng thời làm giảm khả năng nhận diện các khu vực quan trọng đối với screen reader và công nghệ hỗ trợ. Đặc biệt, < main > giúp xác định phần nội dung chính, còn < nav > cho biết khu vực chứa các liên kết điều hướng quan trọng. Cách xử lý là sử dụng < main > để bao bọc nội dung chính của trang và < nav > cho các khu vực điều hướng có ý nghĩa. 

5. Nhầm lẫn giữa thẻ section và article

Thẻ < section > và < article > đều dùng để tổ chức nội dung nên dễ bị sử dụng nhầm trong quá trình xây dựng website. Thẻ < section > phù hợp với một nhóm nội dung có cùng chủ đề trong một trang, trong khi < article > dành cho nội dung độc lập có thể tồn tại hoặc được phân phối riêng. Ví dụ, một bài viết có thể là < article > và bên trong được chia thành nhiều < section > theo từng chủ đề.

Do đó trước khi lựa chọn thẻ, bạn cần xác định nội dung có thể tồn tại độc lập với phần còn lại hay không. Nếu nội dung có ý nghĩa riêng và có thể được phân phối hoặc tái sử dụng độc lập, nên sử dụng < article >; ngược lại, nếu chỉ là một phần nội dung thuộc chủ đề lớn hơn, < section > sẽ phù hợp hơn. 

6. Dùng sai thẻ header và footer

Một lỗi khác là cho rằng < header > và < footer > chỉ được phép xuất hiện một lần ở đầu và cuối toàn bộ trang. Trên thực tế, hai thẻ này có thể được sử dụng cho một trang hoặc một khu vực nội dung như < article > hay < section >, miễn là chúng đảm nhận đúng vai trò phần mở đầu hoặc kết thúc. Sử dụng sai ngữ cảnh có thể khiến cấu trúc semantic trở nên khó hiểu và không phản ánh đúng mối quan hệ giữa các thành phần.

Cách khắc phục chính là sử dụng thẻ < header > cho phần giới thiệu hoặc nội dung mở đầu của trang hay một sectioning content, chẳng hạn tiêu đề, thông tin tác giả hoặc điều hướng liên quan. Sử dụng < footer > cho thông tin kết thúc như tác giả, bản quyền, liên kết bổ sung hoặc thông tin liên quan đến khu vực nội dung đó.
 

Semantic HTML5 trong kỷ nguyên Component-Driven Frameworks

Sự phát triển của các component-driven frameworks như React, Vue hay Angular khiến website được xây dựng từ các component có khả năng tái sử dụng. Tuy nhiên, component không thay thế vai trò của semantic HTML5 mà cần được kết hợp để tạo cấu trúc website rõ ràng, dễ bảo trì và thân thiện với accessibility. Khi triển khai semantic HTML trong mô hình component-driven, bạn cần chú ý các nguyên tắc sau:

- Component nên sử dụng semantic tag phù hợp: Component Header có thể sử dụng < header >, Navigation sử dụng < nav >, còn component bài viết có thể sử dụng < article > và < section >.

- Không đồng nhất component với semantic tag: Component được tạo ra nhằm tái sử dụng giao diện, logic hoặc chức năng, trong khi semantic tag được lựa chọn dựa trên ý nghĩa của nội dung. Vì vậy, không phải component nào cũng cần tương ứng với một semantic tag.

- Không thay thế mọi < div > bằng semantic tag: Thẻ < div > vẫn phù hợp khi chỉ đóng vai trò container phục vụ CSS, layout hoặc JavaScript mà không có ý nghĩa ngữ nghĩa cụ thể.

- Ưu tiên HTML native cho thành phần tương tác: Với các chức năng như nút bấm, liên kết hoặc trường nhập liệu, nên sử dụng < button >, < a >, < input > thay vì dùng < div > hoặc < span > kết hợp JavaScript để mô phỏng hành vi.

- Kết hợp semantic HTML với accessibility: Semantic tag giúp trình duyệt và công nghệ hỗ trợ hiểu cấu trúc component tốt hơn. Khi cần, developer có thể kết hợp thêm thuộc tính ARIA và các kỹ thuật accessibility phù hợp.

- Chuẩn hóa semantic structure trong hệ thống component: Các component dùng chung nên có cấu trúc semantic nhất quán. Ví dụ, Card có thể sử dụng < article > nếu mỗi card là một nội dung độc lập, nhưng thẻ < div > sẽ phù hợp hơn nếu card chỉ là một container trình bày.