Semantic element là gì?

Các phần tử như <header>, <footer> và <article> đều được coi là các phần từ ngữ nghĩa (semantic element) vì chúng mô tả chính xác mục đích của phần tử và loại nội dung bên trong chúng. Đối lập với nó là các phần tử phi ngữ nghĩa (non-semantic element) như <div> và <span>.

Để xem xét lợi ích của các phần tử ngữ nghĩa (semantic element), đây là hai đoạn mã HTML. Đoạn mã đầu tiên này sử dụng các phần tử ngữ nghĩa (semantic element):

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

Trong khi đoạn mã thứ hai này sử dụng các phần tử phi ngữ nghĩa:

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

Đầu tiên, nó dễ đọc hơn nhiều. Đây có lẽ là điều đầu tiên bạn sẽ nhận thấy khi nhìn vào đoạn mã đầu tiên sử dụng các phần tử ngữ nghĩa. Đây là một ví dụ nhỏ, nhưng là một lập trình viên bạn có thể đọc qua hàng trăm hoặc hàng nghìn dòng mã. Mã đó càng dễ đọc và dễ hiểu thì công việc của bạn càng dễ dàng.

Nó có khả năng tiếp cận lớn hơn. Bạn không phải là người duy nhất tìm thấy các phần tử ngữ nghĩa dễ hiểu hơn. Các công cụ tìm kiếm (search engine) và công nghệ hỗ trợ (như trình đọc màn hình (screen reader) cho người dùng bị khiếm thị) cũng có thể hiểu rõ hơn về ngữ cảnh và nội dung trang web của bạn, đồng nghĩa với việc người dùng của bạn sẽ có trải nghiệm tốt hơn.

Nhìn chung, các phần tử ngữ nghĩa cũng dẫn đến mã nhất quán hơn. Khi tạo header bằng các phần tử không có ngữ nghĩa, các lập trình viên khác nhau có thể viết theader này là <div class = "header">, <div id = "header">, <div class = "head"> hoặc đơn giản là <div>. Có rất nhiều cách để bạn có thể tạo phần tử header và tất cả chúng đều phụ thuộc vào sở thích cá nhân của người lập trình. Bằng cách tạo một phần tử ngữ nghĩa tiêu chuẩn, nó giúp mọi người dễ dàng hơn.