Sự khác biệt giữa DIV và PHẦN?

Hiểu phần tử SECTION HTML5

Khi HTML5 chôn vào cảnh một số năm trước, nó đã thêm một loạt các phần tử phân đoạn mới vào langauge, bao gồm phần tử SECTION. Hầu hết các yếu tố mới mà HTML5 giới thiệu đều có sử dụng rõ ràng. Ví dụ: phần tử được sử dụng để xác định các bài viết và phần chính của trang web, phần tử được sử dụng để xác định nội dung liên quan không quan trọng đối với phần còn lại của trang và tiêu đề, điều hướng và chân trang khá tự giải thích. Tuy nhiên, phần tử SECTION mới được thêm vào hơi rõ ràng hơn một chút.

Nhiều người tin rằng các phần tử HTML PHẦN và thực sự chỉ là những điều tương tự - các thành phần chứa chung được sử dụng để chứa nội dung trên một trang web. Thực tế, tuy nhiên, là hai yếu tố này, trong khi cả hai là yếu tố container, là bất cứ điều gì nhưng chung chung. Có những lý do cụ thể để sử dụng cả phần tử SECTION và phần tử DIV - và bài viết này sẽ giải thích những khác biệt đó.

Phần và Divs

Phần tử SECTION được định nghĩa là một phần ngữ nghĩa của trang web hoặc trang web không phải là một loại cụ thể hơn (như bài viết hoặc sang một bên). Tôi có xu hướng sử dụng yếu tố này khi tôi đánh dấu một phần riêng biệt của trang - một phần có thể bán buôn được di chuyển và sử dụng trên các trang khác hoặc các phần của trang web. Đó là một phần nội dung riêng biệt hoặc một "phần" nội dung, nếu bạn muốn.

Ngược lại, bạn sử dụng phần tử DIV cho các phần của trang mà bạn muốn chia, nhưng với các mục đích khác ngoài ngữ nghĩa . Tôi sẽ bọc một khu vực của nội dung trong một bộ phận nếu tôi làm như vậy hoàn toàn để cung cấp cho bản thân mình một "móc" để sử dụng với CSS. Nó có thể không phải là một phần khác biệt của nội dung dựa trên ngữ nghĩa, nhưng là một cái gì đó tôi đang ra lệnh để đạt được bố trí tôi muốn cho trang của tôi.

Đó là tất cả về ngữ nghĩa

Đây là một khái niệm khó hiểu, nhưng sự khác biệt duy nhất giữa phần tử DIV và phần tử SECTION là ngữ nghĩa. Nói cách khác, đó là ý nghĩa của phần mã bạn đang chia.

Bất kỳ nội dung nào được chứa bên trong phần tử DIV đều không có bất kỳ ý nghĩa cố hữu nào. Nó được sử dụng tốt nhất cho những thứ như:

Phần tử DIV đã từng là phần tử duy nhất mà chúng tôi có để thêm các móc để tạo kiểu cho các tài liệu của chúng ta và tạo các cột và các bố cục lạ mắt. Vì lý do đó, chúng tôi đã kết thúc với HTML đã được giải quyết với các yếu tố DIV - những gì các nhà thiết kế web có thể gọi là “viêm thần kinh.” Thậm chí có cả trình soạn thảo WYSIWYG chỉ sử dụng phần tử DIV. Tôi đã thực sự chạy trên HTML sử dụng phần tử DIV thay vì cho các đoạn văn!

Với HTML5, chúng ta có thể bắt đầu sử dụng các phần tử phân đoạn để tạo ra nhiều tài liệu mô tả ngữ nghĩa hơn (sử dụng cho điều hướng và cho các số liệu mô tả và vv) và cũng xác định kiểu trên các phần tử đó.

Điều gì về các yếu tố SPAN?

Yếu tố khác mà hầu hết mọi người nghĩ đến khi họ nghĩ về yếu tố DIV là yếu tố. Phần tử này, như DIV, không phải là một phần tử ngữ nghĩa. Nó là một phần tử nội tuyến mà bạn có thể sử dụng để thêm các móc cho các kiểu và các kịch bản xung quanh các khối nội dung nội tuyến (thường là văn bản). Theo nghĩa đó, nó chính xác giống như phần tử DIV, chỉ nội dòng chứ không phải là phần tử khối . Trong một số cách, có thể dễ dàng nghĩ DIV là một phần tử SPAN cấp khối và sử dụng nó theo cùng cách bạn chỉ SPAN cho toàn bộ khối nội dung HTML.

Không có yếu tố phân đoạn nội tuyến có thể so sánh được trong HTML5.

Dành cho phiên bản cũ hơn của Internet Explorer

Ngay cả khi bạn đang hỗ trợ các phiên bản IE cũ hơn đáng kể (như IE 8 trở xuống) không nhận ra HTML5 đáng tin cậy, bạn không nên ngại sử dụng các thẻ HTML đúng ngữ nghĩa. Các ngữ nghĩa sẽ giúp bạn và nhóm của bạn quản lý trang trong tương lai (vì bạn sẽ biết rằng phần đó là bài viết nếu nó được bao quanh bởi phần tử ARTICLE). Ngoài ra, các trình duyệt nhận ra các thẻ đó sẽ hỗ trợ chúng tốt hơn.

Bạn vẫn có thể sử dụng các phần tử phân đoạn ngữ nghĩa HTML5 với Internet Explorer, bạn chỉ cần thêm tập lệnh và có thể là một vài yếu tố DIV xung quanh để làm cho chúng nhận ra các thẻ dưới dạng HTML.

Sử dụng phần tử DIV và PHẦN

Nếu bạn đang sử dụng chúng một cách chính xác, bạn có thể sử dụng cả hai phần tử DIV và SECTION cùng nhau trong một tài liệu HTML5 hợp lệ. Như bạn đã thấy ở đây trong bài viết này, bạn sử dụng phần tử SECTION để xác định các phần rời rạc ngữ nghĩa của nội dung và bạn sử dụng phần tử DIV làm móc cho CSS và JavaScript cũng như xác định bố cục không có ý nghĩa ngữ nghĩa.

Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào 3/15/17