HTML/CSS | Semantics là gì?

Học HTML, CSS từ Zero Tới Hero

• HTML Semantic là gì?
• HTML có thẻ không mang ngữ nghĩa?
• Sử dụng HTML đúng ngữ nghĩa có quan trọng?
• Ưu tiên chọn Styles hay Semantics?
  • Trong mẫu thiết kế có một thành phần không phải tiêu đề nhưng lại có cỡ chữ lớn và in đậm. Trường hợp này bạn có dùng thẻ h (h1 - h6) không?
  • Trong thiết kế có một đoạn văn có cỡ chữ lớn sau thẻ h2, không phải là tiêu đề. Sử dụng thẻ h3 có phù hợp không? Nếu không thì dùng thẻ nào?
  • Trong một tiêu đề h1 có 2 từ khóa được đánh giá là rất quan trọng. Bạn có sử dụng thêm thẻ nào để bao bọc nó không? Nếu có thì dùng thẻ nào?

#HTML Semantic là gì?

HTML Semantic (ngữ nghĩa) là một khái niệm rất quan trọng trong HTML. Nắm được ngữ nghĩa giúp bạn sử dụng HTML đúng hơn về ý nghĩa, giúp bạn phân biệt được trường hợp nào dùng thẻ HTML nào.

HTML cung cấp các thẻ HTML có ngữ nghĩa để chúng ta sử dụng đúng mục đích, giúp nội dung trong HTML trở nên có ý nghĩa. Chỉ cần nhìn vào tên thẻ HTML có ngữ nghĩa là có thể cho chúng ta biết được loại nội dung mà nó thể hiện.

Ví dụ, một đoạn văn bản không ngữ nghĩa:

Nhãn không chỉ ngon mà có mang lại nhiều giá trị sức khỏe.

và cách làm nó trở nên có ngữ nghĩa trong HTML:

<p>Nhãn không chỉ ngon mà có mang lại nhiều giá trị sức khỏe.</p>

hoặc:

<h1>Nhãn không chỉ ngon mà có mang lại nhiều giá trị sức khỏe.</h1>

Một số ví dụ về ngữ nghĩa của HTML:

• Các thẻ h (headings), có ngữ nghĩa thể hiện các tiêu đề
• Thẻ p (paragraph), có ngữ nghĩa thể hiện đoạn văn bản
• Thẻ img (image), có ngữ nghĩa thể hiện hình ảnh
• Thẻ strong, có ngữ nghĩa thể hiện sự quan trọng
• Thẻ em, có ngữ nghĩa thể hiện sự nhấn mạnh
• …
• Và nhiều thẻ có ngữ nghĩa khác mà chúng ta sẽ được tìm hiểu trong khóa học này

HTML có thẻ không mang ngữ nghĩa?

Có. Trong HTML có thẻ <div> và <span> không mang ngữ nghĩa. Nhìn vào 2 thẻ này chúng ta không biết nội dung bên trong cụ thể là loại nội dung nào.

Sử dụng HTML đúng ngữ nghĩa có quan trọng?

Có một vài lý do chính để chúng ta nên viết HTML đúng ngữ nghĩa như sau:

• Giúp bạn và đồng nghiệp của bạn dễ dàng đọc hiểu code, dễ bảo trì và nâng cấp về sau.
• Tối ưu hơn cho SEO, hỗ trợ các công cụ tìm hiểu dễ dàng hiểu được ý nghĩa nội dung trang web.
• Tối ưu hơn cho khả năng truy cập (Web accessibility).

Ưu tiên chọn Styles hay Semantics?

Mình sẽ đưa ra một số câu hỏi cho các bạn nhé.

1. Trong mẫu thiết kế có một thành phần không phải tiêu đề nhưng lại có cỡ chữ lớn và in đậm. Trường hợp này bạn có dùng thẻ h (h1 - h6) không?

Nếu bạn dùng thẻ h trong tình huống này là sai ngữ nghĩa. Vì thẻ h được thiết kế để sử dụng cho các đầu mục, tiêu đề, v.v.

2. Trong thiết kế có một đoạn văn có cỡ chữ lớn sau thẻ h2, không phải là tiêu đề. Sử dụng thẻ h3 có phù hợp không? Nếu không thì dùng thẻ nào?

Vì không phải tiêu đề nên chúng không sử dụng bất cứ thẻ h nào cả. Trường hợp này phù hợp nhất là sử dụng thẻ <p>.

3. Trong một tiêu đề h1 có 2 từ khóa được đánh giá là rất quan trọng. Bạn có sử dụng thêm thẻ nào để bao bọc nó không? Nếu có thì dùng thẻ nào?

Nếu có từ khóa được đánh giá là rất quan trọng nằm trong một tiêu đề. Bạn nên sử dụng thêm thẻ <strong> để tăng tầm quan trọng của từ khóa này.

Tóm tắt

• Semantic (ngữ nghĩa) là một khái niệm rất quan trọng trong HTML. Nắm được ngữ nghĩa giúp bạn sử dụng HTML đúng hơn về ý nghĩa, giúp bạn phân biệt được trường hợp nào dùng thẻ HTML nào.
• HTML cung cấp các thẻ HTML có ngữ nghĩa để chúng ta sử dụng đúng mục đích, giúp nội dung trong HTML trở nên có ý nghĩa.
• Lý do chúng ta nên nắm chắc ngữ nghĩa trong HTML là: giúp các nhà phát triển dễ đọc hiểu code hơn, tối ưu cho SEO và khả năng truy cập.