Lập trình

Phân Biệt Thẻ section và Thẻ article trong HTML5

Huy Erick

HTML5 mang đến một loạt các thẻ mới giúp các lập trình viên frontend có thể đánh dấu trang văn bản HTML một cách rõ ràng và chi tiết hơn. Tuy nhiên, cách sử dụng...

HTML5 mang đến một loạt các thẻ mới giúp các lập trình viên frontend có thể đánh dấu trang văn bản HTML một cách rõ ràng và chi tiết hơn. Tuy nhiên, cách sử dụng của một số thẻ mới đã gây ra không ít bối rối cho các lập trình viên. Hai trong số các thẻ khiến người dùng cảm thấy bối rối khi sử dụng đó là

.

Nếu bạn đang rơi vào tình huống tương tự như trên, bài viết này sẽ giúp bạn hiểu rõ cách sử dụng của từng thẻ cũng như phân biệt sự khác nhau giữa chúng để không còn phải vò đầu bứt tóc mỗi khi cần quyết định sử dụng thẻ nào.

Ý nghĩa của thẻ

Theo tiêu chuẩn định nghĩa bởi phiên bản HTML5, thẻ

được sử dụng để đánh dấu một thành phần độc lập (có thể là một phần tử văn bản, một ảnh, một
...) có trong văn bản.

Bạn lưu ý rằng bản thân thẻ

không tạo ra ý nghĩa cho nội dung bên trong nó mà đơn giản chỉ để phân biệt giữa các thành phần khác nhau của trang HTML. Hiểu một cách đơn giản,
giống như một công-ten-nơ chứa hàng và bạn có thể để bất cứ loại hàng nào bên trong nó.

Lấy một ví dụ của một trang web giới thiệu công ty trong đó có hai đoạn văn bản khác nhau như sau:

Giai Đoạn Mới Thành Lập

Công ty ABC được bắt đầu thành lập vào năm...

Giai Đoạn Phát Triển

Bắt đầu từ năm 2000, sau 5 năm thành lập chúng tôi đã áp dụng các tiêu chuẩn...

Với đoạn mã trên, bạn có thể thay thế thẻ

bằng thẻ
như sau:

Giai Đoạn Mới Thành Lập

Công ty ABC được bắt đầu thành lập vào năm...

Giai Đoạn Phát Triển

Bắt đầu từ năm 2000, sau 5 năm thành lập chúng tôi đã áp dụng các tiêu chuẩn...

Lưu ý rằng việc quyết định trong trường hợp nào sử dụng thẻ

phụ thuộc vào việc quyết định xem khi nào cần tách rời các thành phần khác nhau trong văn bản. Do đó, không nên có một quy luật cứng nhắc nào áp dụng cho việc sử dụng thẻ
này.

Ý nghĩa của thẻ

Thẻ

thường được sử dụng để đánh dấu một bài viết trong trang. Trang này có thể thuộc về một diễn đàn, một trang báo điện tử, một blog, một trang review...

Khác biệt giữa
trong HTML5

Trong bài viết này chúng ta sẽ phần biệt sự khác nhau giữa hai thẻ

trong HTML5

Trước tiên và quan trọng...

Như bạn có thể thấy, thẻ

có thể chứa bên trong nó nội dung của bài viết từ tiêu đề cho tới nội dung chi tiết.

Ngoài ra, chúng ta cũng nên sử dụng thẻ

để bao ngoài tiêu đề bài viết (thẻ

) và thẻ
để bao ngoài phần nội dung chính của bài viết, cụ thể như sau:

Khác biệt giữa
trong HTML5

Trong bài viết này chúng ta sẽ phần biệt sự khác nhau giữa hai thẻ

trong HTML5

Trước tiên và quan trọng...

Kết luận

Hy vọng sau khi đọc xong bài viết này bạn đã có một cái nhìn tương đối rõ ràng hơn về việc sử dụng hai thẻ

trong HTML5. Trường hợp còn điểm nào chưa rõ hoặc muốn đóng góp phản hồi về nội dung bài viết, bạn có thể để lại bình luận ở phía dưới.
1