Sự khác biệt giữa <section>
và<div>
trong là HTML
gì?
Không phải chúng ta xác định các phần trong cả hai trường hợp?
Sự khác biệt giữa <section>
và<div>
trong là HTML
gì?
Không phải chúng ta xác định các phần trong cả hai trường hợp?
Câu trả lời:
<section>
có nghĩa là nội dung bên trong được nhóm lại (nghĩa là liên quan đến một chủ đề) và sẽ xuất hiện dưới dạng một mục trong một phác thảo của trang.
<div>
Mặt khác, không truyền đạt bất kỳ ý nghĩa , ngoài việc bất kỳ tìm thấy trong nó class
, lang
và title
các thuộc tính.
Vì vậy, không: sử dụng <div>
không xác định một phần trong HTML.
Từ thông số kỹ thuật:
<section>
Phần
<section>
tử đại diện cho một phần chung của tài liệu hoặc ứng dụng. Một phần, trong bối cảnh này, là một nhóm nội dung theo chủ đề. Mỗi cáisection
nên được xác định, thông thường bằng cách bao gồm một tiêu đề (phần tử h1-h6) làm phần tử con của<section>
phần tử.Ví dụ về các phần sẽ là các chương, các trang được gắn thẻ khác nhau trong hộp thoại được gắn thẻ hoặc các phần được đánh số của một luận án. Trang chủ của một trang web có thể được chia thành các phần để giới thiệu, các mục tin tức và thông tin liên lạc.
...
Phần
<section>
tử không phải là phần tử container chung. Khi một yếu tố chỉ cần thiết cho mục đích tạo kiểu hoặc để thuận tiện cho việc viết kịch bản, các tác giả được khuyến khích sử dụng<div>
phần tử thay thế. Một quy tắc chung là<section>
phần tử chỉ phù hợp nếu nội dung của phần tử sẽ được liệt kê rõ ràng trong phác thảo của tài liệu.
( https://www.w3.org/TR/html/sections.html#the-section-element )
<div>
Các
<div>
yếu tố không có ý nghĩa đặc biệt nào cả. Nó đại diện cho con của nó. Nó có thể được sử dụng vớiclass
,lang
vàtitle
thuộc tính để đánh dấu ngữ nghĩa chung cho một nhóm các yếu tố liên tiếp.Lưu ý: Các tác giả được khuyến khích mạnh mẽ xem
<div>
yếu tố này là yếu tố của biện pháp cuối cùng, vì khi không có yếu tố nào khác phù hợp. Sử dụng các yếu tố phù hợp hơn thay vì<div>
yếu tố dẫn đến khả năng tiếp cận tốt hơn cho người đọc và khả năng bảo trì dễ dàng hơn cho các tác giả.
( https://www.w3.org/TR/html/grouping-content.html#the-div-element )
section
so với div
, bao gồm cả câu trả lời này, tôi đã đi đến kết luận rằng chúng chính xác là cùng một yếu tố. W3C nói div
"đại diện cho con của nó". Chà, đó cũng không phải là những gì section
yếu tố làm? Vâng, section
ngụ ý con cái của nó được nhóm lại với nhau, nhưng bằng chính hành động đưa trẻ em vào trong a div
, bạn cũng vậy, vâng, nhóm chúng lại với nhau . Ít nhất là cách tôi làm, tôi không biết về các bạn.
section
so với div
- - Đừng nghĩ quá nhiều về nó. HTML không phức tạp. Nghiêng bằng chính hành động đưa trẻ em vào trong div
, bạn cũng vậy, vâng, nhóm chúng lại với nhau . Không theo thông số kỹ thuật HTML mà bạn không. Bạn đang gói chúng div
cho mục đích tạo kiểu, hoặc tiện lợi cho JavaScript hoặc một cái gì đó khác mà W3C chưa nghĩ đến, nhưng không cho độc giả biết rằng các phần tử con là một nhóm.
<p>This is a paragraph</p>
hoặc <h2>This is a second-level heading</h2>
. Vì <div>
không có nghĩa, bạn chỉ sử dụng nó nếu không có phần tử HTML nào khác có nghĩa phù hợp với văn bản được đề cập.
<div> Vs <Section>
<div>:
Phần tử HTML (hoặc Phần tử phân chia tài liệu HTML) là vùng chứa chung cho nội dung luồng, vốn không đại diện cho bất cứ điều gì. Nó có thể được sử dụng để nhóm các thành phần cho mục đích tạo kiểu (sử dụng các thuộc tính lớp hoặc id) hoặc vì chúng chia sẻ các giá trị thuộc tính, chẳng hạn như lang. Nó chỉ được sử dụng khi không có yếu tố ngữ nghĩa nào khác (như <article>
hoặc <nav>
) là phù hợp.
<section>:
Các HTML yếu tố Mục ( <section>
) đại diện cho một phần chung của một tài liệu, ví dụ, một nhóm chuyên đề của nội dung, điển hình với tiêu đề một.
<div>:
Hỗ trợ trình duyệt
<section>:
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.
Trong đó, một div chỉ có liên quan từ phối cảnh CSS hoặc DOM thuần túy, trong khi một phần cũng có liên quan đến ngữ nghĩa và, trong tương lai gần, để lập chỉ mục bởi các công cụ tìm kiếm.
Chỉ là một quan sát - không tìm thấy bất kỳ tài liệu nào chứng thực điều này
Nếu một phần chứa phần khác, tiêu đề h1 trong phần bên trong được hiển thị ở phông chữ nhỏ hơn tiêu đề h1- ở phần bên ngoài. Khi sử dụng div thay vì phần, tiêu đề div h1 bên trong được cấp bằng là h1.
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>
- tiêu đề Level2 - được hiển thị ở phông chữ nhỏ hơn tiêu đề Level1 -.
Khi sử dụng css để tô màu tiêu đề h1, h1 bên trong cũng được tô màu (hoạt động như h1 thông thường). Đó là hành vi tương tự trong Firefox 18, IE 10 và Chrome 28.
Trong tiêu chuẩn HTML5, <section>
phần tử được xác định là một khối các phần tử liên quan.
Phần <div>
tử được định nghĩa là một khối các phần tử con.
Cẩn thận không lạm dụng thẻ phần để thay thế cho phần tử div . Một thẻ phần nên xác định một khu vực quan trọng trong bối cảnh của cơ thể . Về mặt ngữ nghĩa, HTML5 khuyến khích chúng ta xác định tài liệu của mình như sau:
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>
Chiến lược này cho phép robot web và trình đọc màn hình tự động hiểu rõ hơn về luồng nội dung của bạn. Đánh dấu này xác định rõ nơi chứa nội dung trang chính của bạn. Tất nhiên, tiêu đề và chân trang thường phổ biến trên hàng trăm nếu không phải là hàng ngàn trang trong một trang web. Các phần thẻ nên hạn chế để giải thích mà nội dung độc đáo được chứa. Trong thẻ phần , sau đó chúng ta nên tiếp tục đánh dấu và kiểm soát nội dung bằng các thẻ HTML thấp hơn trong cấu trúc phân cấp, như h1 , div , span , v.v.
Trong hầu hết các trang đơn giản, chỉ nên có một thẻ phần duy nhất , không nên nhiều thẻ. Ngoài ra, vui lòng xem xét rằng có các thẻ HTML5 thú vị khác tương tự như phần . Xem xét sử dụng bài viết , tóm tắt , sang một bên và những người khác trong luồng tài liệu của bạn. Như bạn có thể thấy, các thẻ này tăng cường hơn nữa khả năng của chúng tôi để xác định các khu vực chính của tài liệu HTML.
main
thẻ ở đó và bên trong nó, một hoặc nhiều section
thẻ.
<div>
Tất cả chúng ta đều biết và yêu thương. Đây là một yếu tố cấp khối không có ý nghĩa ngữ nghĩa bổ sung (W3C: Markup, WhatWG)
<section>
Phần chung tài liệu hoặc phần ứng dụng. Một bình thường có một tiêu đề (tiêu đề) và có thể một chân trang quá. Đó là một đoạn nội dung liên quan, như phần phụ của một bài viết dài, phần chính của trang (ví dụ: phần tin tức trên trang chủ) hoặc một trang trong giao diện được gắn thẻ của ứng dụng web. (W3C: Đánh dấu, WhatWG)
Đề xuất của tôi: div: đã sử dụng phiên bản thấp hơn (tôi nghĩ là 4,01 đến vẫn) phần tử html (rất nhiều nhà thiết kế đã xử lý điều đó). phần: phần tử html comming (html5) gần đây.
Thẻ phần cung cấp một cú pháp ngữ nghĩa hơn cho html. div là một thẻ chung cho một phần. Khi bạn sử dụng thẻ phần cho nội dung phù hợp, nó cũng có thể được sử dụng để tối ưu hóa công cụ tìm kiếm. thẻ phần cũng làm cho nó dễ dàng để phân tích cú pháp html. để biết thêm thông tin, tham khảo. http://blog.whatwg.org/is-not-just-a-semantic
Đây là một mẹo về cách tôi phân biệt vài yếu tố html5 gần đây trong trường hợp ứng dụng web (hoàn toàn chủ quan).
<section>
đánh dấu một tiện ích trong giao diện người dùng đồ họa, trong khi đó <div>
là bộ chứa các thành phần của tiện ích như thùng chứa nút và nhãn, v.v.
<article>
nhóm vật dụng chia sẻ một mục đích.
<header>
là tiêu đề và thanh thực đơn.
<footer>
là thanh trạng thái.
Các <section>
thẻ định nghĩa phần trong một tài liệu, chẳng hạn như chương, tiêu đề, footers, hoặc bất kỳ phần khác của tài liệu.
trong khi:
Các <div>
thẻ định nghĩa một bộ phận hoặc một phần trong một tài liệu HTML.
Các <div>
thẻ được sử dụng để nhóm khối các yếu tố để định dạng chúng với CSS.
<header>
, <footer>
, <nav>
, <article>
Vv)
<section></section>
Phần
<section>
tử HTML đại diện cho một phần chung của tài liệu, nghĩa là một nhóm nội dung theo chủ đề, thường có tiêu đề. Mỗi<section>
nên được xác định, thường bằng cách bao gồm một tiêu đề (<h1>
-<h6>
phần tử) là phần tử con của<section>
phần tử. Để biết chi tiết xin vui lòng theo liên kết.
Người giới thiệu :
<div></div>
Phần
<div>
tử HTML (hoặc Phần tử phân chia tài liệu HTML) là vùng chứa chung cho nội dung luồng, vốn không đại diện cho bất cứ điều gì. Nó có thể được sử dụng để nhóm các thành phần cho mục đích tạo kiểu (sử dụng các thuộc tính lớp hoặc id) hoặc vì chúng chia sẻ các giá trị thuộc tính, chẳng hạn như lang. Nó chỉ được sử dụng khi không có yếu tố ngữ nghĩa nào khác (như<article>
hoặc<nav>
) là phù hợp.
Tài liệu tham khảo: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Euity/div
Dưới đây là một số liên kết thảo luận thêm về sự khác biệt giữa chúng: