Apa perbedaan antara <section> dan <div>?

Apa perbedaan antara <section>dan <div>di dalam HTML?
Bukankah kita mendefinisikan bagian dalam kedua kasus?

<section> berarti bahwa konten di dalamnya dikelompokkan (yaitu terkait dengan satu tema), dan akan muncul sebagai entri dalam garis besar halaman.

<div>, di sisi lain, tidak menyampaikan makna apa pun , selain dari yang ditemukan di dalamnya class, langdan titleatribut.

Jadi tidak: menggunakan a <div>tidak mendefinisikan bagian dalam HTML.

Dari spec:

<section>

The <section>elemen merupakan bagian generik dari dokumen atau aplikasi. Bagian, dalam konteks ini, adalah pengelompokan konten secara tematik. Masing section- masing harus diidentifikasi, biasanya dengan memasukkan tajuk (elemen h1-h6) sebagai anak <section>elemen.

Contoh bagian adalah bab, berbagai halaman tab dalam kotak dialog tab, atau bagian nomor tesis. Halaman beranda situs web dapat dibagi menjadi beberapa bagian untuk pengantar, berita, dan informasi kontak.

...

The <section>unsur bukan unsur wadah generik. Ketika suatu elemen dibutuhkan hanya untuk tujuan penataan gaya atau sebagai kemudahan untuk penulisan, penulis disarankan untuk menggunakan <div>elemen tersebut. Aturan umum adalah bahwa <section>elemen tersebut hanya sesuai jika konten elemen akan dicantumkan secara eksplisit dalam garis besar dokumen.

( https://www.w3.org/TR/html/sections.html#the-section-element )

<div>

The <div>elemen memiliki arti khusus sama sekali. Ini mewakili anak-anaknya. Hal ini dapat digunakan dengan class, lang, dan titleatribut untuk menandai semantik umum untuk sekelompok elemen berturut-turut.

Catatan: Penulis sangat dianjurkan untuk melihat <div>elemen sebagai elemen pilihan terakhir, karena ketika tidak ada elemen lain yang cocok. Penggunaan elemen yang lebih tepat daripada <div>elemen mengarah pada aksesibilitas yang lebih baik bagi pembaca dan kemudahan pemeliharaan bagi penulis.

( https://www.w3.org/TR/html/grouping-content.html#the-div-element )

<section>menandai bagian , <div>menandai blok generik tanpa semantik terkait.

<div> Vs <Section>

Ronde 1

<div>:The HTML elemen (atau Divisi Dokumen HTML Element) adalah wadah generik untuk konten aliran, yang tidak inheren mewakili apa-apa. Ini dapat digunakan untuk mengelompokkan elemen untuk keperluan penataan (menggunakan atribut class atau id), atau karena mereka membagikan nilai atribut, seperti lang. Ini harus digunakan hanya ketika tidak ada elemen semantik lainnya (seperti <article>atau <nav>) yang sesuai.

<section>:The HTML Bagian elemen ( <section>) merupakan bagian generik dari sebuah dokumen, yaitu, pengelompokan tematik konten, biasanya dengan heading.

Ronde 2

<div>: Dukungan Browser

<section>: Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung elemen.

Dalam nada itu, div hanya relevan dari perspektif CSS atau DOM murni, sedangkan bagian juga relevan untuk semantik dan, dalam waktu dekat, untuk pengindeksan oleh mesin pencari.

Hanya pengamatan - belum menemukan dokumentasi yang menguatkan ini

Jika suatu bagian berisi bagian lain, h1-header di bagian dalam ditampilkan dalam font yang lebih kecil daripada h1-header di bagian luar. Saat menggunakan div sebagai ganti bagian, div bagian dalam h1-header diputar sebagai h1.

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

- header Level2 - ditampilkan dalam font yang lebih kecil daripada header Level1.

Saat menggunakan css untuk mewarnai h1 header, h1 bagian dalam juga diwarnai (berperilaku seperti h1 biasa). Ini perilaku yang sama di Firefox 18, IE 10 dan Chrome 28.

Dalam standar HTML5, <section>elemen didefinisikan sebagai blok elemen terkait.

The <div>elemen didefinisikan sebagai sebuah blok elemen anak.

Berhati-hatilah untuk tidak terlalu sering menggunakan tag bagian sebagai pengganti elemen div . Sebuah bagian tag harus mendefinisikan wilayah yang signifikan dalam konteks tubuh . Secara semantik, HTML5 mendorong kami untuk mendefinisikan dokumen kami sebagai berikut:

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>

Strategi ini memungkinkan robot web dan pembaca layar otomatis untuk lebih memahami aliran konten Anda. Markup ini dengan jelas menentukan di mana konten halaman utama Anda terkandung. Tentu saja, header dan footer sering ditemukan di ratusan bahkan ribuan halaman dalam sebuah situs web. The bagian tag harus dibatasi untuk menjelaskan di mana konten yang unik yang terkandung. Di dalam tag bagian , kita kemudian harus terus markup dan mengontrol konten dengan tag HTML yang lebih rendah dalam hierarki, seperti h1 , div , span , dll.

Di sebagian besar halaman sederhana, seharusnya hanya ada satu tag bagian , bukan beberapa tag. Harap perhatikan juga bahwa ada tag HTML5 menarik lainnya yang mirip dengan bagian . Pertimbangkan untuk menggunakan artikel , ringkasan , samping , dan lainnya dalam aliran dokumen Anda. Seperti yang Anda lihat, tag ini semakin meningkatkan kemampuan kami untuk menentukan wilayah utama dokumen HTML.

<div>- wadah aliran generik yang kita semua kenal dan cintai. Ini adalah elemen tingkat blok tanpa makna semantik tambahan (W3C: Markup, WhatWG)

<section>—Bagian dokumen umum atau aplikasi. A biasanya memiliki heading (judul) dan mungkin juga footer. Ini adalah sebagian dari konten terkait, seperti subbagian dari artikel panjang, bagian utama halaman (misalnya bagian berita di beranda), atau halaman di antarmuka tab webapp. (W3C: Markup, WhatWG)

Saran saya: div: menggunakan versi yang lebih rendah (saya pikir masih 4,01) elemen html (banyak desainer menangani itu). bagian: elemen html baru-baru ini akan datang (html5).

Tag bagian menyediakan sintaksis yang lebih semantik untuk html. div adalah tag umum untuk bagian. Ketika Anda menggunakan tag bagian untuk konten yang sesuai, itu dapat digunakan untuk optimasi mesin pencari juga. tag bagian juga memudahkan parsing html. untuk info lebih lanjut, lihat. http://blog.whatwg.org/is-not-just-a-semantic

Menggunakan <section>mungkin lebih rapi , bantuan pembaca layar dan SEO sementara <div>adalah lebih kecil dalam byte dan lebih cepat untuk jenis

Secara keseluruhan sangat sedikit perbedaannya.

Juga, tidak akan merekomendasikan menempatkan <section>dalam <section>, bukannya menempatkan <div>di dalam<section>

Berikut adalah tip tentang bagaimana saya membedakan beberapa elemen html5 baru-baru ini dalam kasus aplikasi web (murni subjektif).

<section>menandai widget dalam antarmuka pengguna grafis, sedangkan <div>wadah dari komponen widget seperti wadah yang menahan tombol, dan label dll.

<article> mengelompokkan widget yang memiliki tujuan yang sama.

<header> adalah judul dan menu.

<footer> adalah bilah status.

The <section>tag mendefinisikan bagian dalam sebuah dokumen, seperti bab, header, footer, atau bagian lain dari dokumen.

sedangkan:

The <div>mendefinisikan sebuah divisi atau bagian dalam dokumen HTML.

The <div>tag digunakan untuk kelompok blok-elemen untuk memformat mereka dengan CSS.

<section></section>

<section>Elemen HTML mewakili bagian umum dari suatu dokumen, yaitu pengelompokan konten secara tematik, biasanya dengan tajuk. Masing <section>- masing harus diidentifikasi, biasanya dengan memasukkan tajuk ( <h1>- <h6>elemen) sebagai anak <section> elemen. Untuk Perincian Silakan ikuti tautan.

Referensi :

• http://www.w3schools.com/tags/tag_section.asp
• https://developer.mozilla.org/en/docs/Web/HTML/Element/section

<div></div>

<div>Elemen HTML (atau Elemen Divisi Dokumen HTML) adalah wadah generik untuk konten aliran, yang tidak secara inheren mewakili apa pun. Ini dapat digunakan untuk mengelompokkan elemen untuk keperluan penataan (menggunakan atribut class atau id), atau karena mereka membagikan nilai atribut, seperti lang. Ini harus digunakan hanya ketika tidak ada elemen semantik lainnya (seperti <article>atau <nav>) yang sesuai.

Referensi: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div

Berikut adalah beberapa tautan yang membahas lebih lanjut tentang perbedaan di antara mereka:

• http://html5doctor.com/avoiding-common-html5-mistakes/
• https://teamtreehouse.com/community/use-div-or-section-element
• http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm