Sự khác nhau giữa div và section

  • Điều khoản dịch vụ
  • Chính sách bảo mật
  • Liên hệ

PhongvanIT.com là nền tảng cung cấp các thông tin để bạn có thể ôn luyện, củng cố kiến thức, chuẩn bị tốt cho buổi phỏng vấn sắp tới, tăng cao cơ hội nhận offer. © 2017-2021 PhongvanIT.com

Sử dụng thẻ article tạo bài viết, phân chia trang HTML5 với section và các thông tin bổ sung từ aside

article là phần tử để bao bọc nội dung độc lập, nó có thể là một bài post của diễn đàn, một bài viết của trang, một bài báo, một bình luận ... hoặc bất kỳ một nội dung độc lập nào.

Thẻ

trong HTML5 được dùng thay thế cho thẻ
của HTML4.

Tiêu đề bài viết

Các nội dung bài viết

Phần tử

có thể chứa các
khác. Các
bên trong trình bày các nội dung liên quan đến
bên ngoài.

Thẻ

Thẻ

dùng để phân chia một cách logic một trang, một article. Vậy Thẻ
dùng để chia nội dung trong một article. Ví dụ như trang chủ có thể có một
chứa thông tin giới thiệu về công ty,
khác chứa mục tin tức,
khác chứa thông tin liên hệ ...

Mỗi

là một khối xác định, thường nó có chứa các tiêu đề [h1 - h6] để phân chia

Chào mừng

Tiêu đề

Nội dung, hình ảnh ...

Thẻ

được hiểu như nội dung thứ cấp của phần nội dung chính của trang. thường dùng để biểu diễn sidebar. Khi một sử dụng trong

thì nội dung trong liên quan đến

Quà tặng cho mọi người

Trang web giúp bạn chọn và mua quà tặng

Quà tặng được chuyển đến khách hàng trong khoảng 24h

HTML5 ra mắt kèm theo một loạt các thẻ mới và thú vị giúp các Front End developer có thể đánh dấu thành phần trong website chi tiết hơn trong quá trình cắt HTML. Tuy nhiên là vì có nhiều thẻ mới nên công dụng của nó gây ra nhầm lẫn cho các lập trình viên nhất là 2 thẻ 

 và 
. Hôm nay chúng ta sẽ cùng làm rõ sự khác biệt.

Đầu tiên xin dược nhắc lại một điểm mà developer thường hay quên nhưng lại vô cùng quan trọng khi làm việc với HTML [tất cả các phiên bản] đó là:

Trong HTML thì bạn quy định dùng thẻ nào là dựa vào ý nghĩa của nội dung trong website!

Tại sao phải nhắc lại như vậy là bởi vì vô cùng nhiều developer đã đang và có thể là vẫn sẽ quyết việc lựa chọn thẻ nào phụ thuộc vào 2 yếu tố sau:

  • Phần tử sẽ được hiển thị như thế nào trên trang. Đây là một sai lầm vì việc quy định hiển thị nên sử dụng CSS thay vì HTML.
  • Cảm tính. Sau khi không thể quyết định vào yếu tố trên thì một số người sử dụng cảm tính để đưa ra quyết định!

Bạn không muốn nằm trong số những người tư duy theo kiểu này bởi vì mặc dù trang web của bạn khi hiển thị trên trình duyệt sẽ vẫn không khác biệt gì trong con mắt của người dùng so với khi sử dụng đúng chuẩn HTML tuy nhiên trong mắt của các user agent khác đặc biệt là các Search Engine sẽ có sự khác biệt không nhỏ.

Theo tiêu chuẩn định nghĩa bởi phiên bản HTML5 thì 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. Thay thế cho một trong những phần từ quen thuộc mà bạn hay code ở HTML 4 là 
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.

Thẻ 
là gì

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 dàn, một trang báo điện tử, một blog, một trang review…

Khác biệt giữa <section> và <article> 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ẻ <section> và <article> 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 <section> và <article> 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ẻ <section> và <article> trong HTML5 Trước tiên và quan trọng...

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 dụng hai thẻ 

 và 
 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ể để bình luận ở phía dưới.

Bài viết dựa trên CodeHub

Video liên quan

Chủ Đề