Apa perbedaan antara <section>
dan <div>
di dalam HTML
?
Bukankah kita mendefinisikan bagian dalam kedua kasus?
Apa perbedaan antara <section>
dan <div>
di dalam HTML
?
Bukankah kita mendefinisikan bagian dalam kedua kasus?
Jawaban:
<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
, lang
dan title
atribut.
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. Masingsection
- 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 denganclass
,lang
, dantitle
atribut 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
vs div
, termasuk mengingat jawaban ini, saya sampai pada kesimpulan bahwa mereka adalah elemen yang persis sama. W3C mengatakan div
"mewakili anak-anaknya". Nah, bukankah itu juga yang section
elemen lakukan? Ya, section
menyiratkan anak-anaknya dikelompokkan bersama, tetapi dengan tindakan menempatkan anak-anak di dalam a div
, Anda juga, ya, mengelompokkan mereka . Setidaknya dengan cara saya melakukannya, saya tidak tahu tentang kalian.
section
vs. div
" - jangan terlalu memikirkannya. HTML tidak rumit. "Dengan tindakan menempatkan anak-anak di dalam div
, kamu juga, ya, mengelompokkan mereka ." Tidak sesuai dengan spesifikasi HTML Anda tidak. Anda membungkusnya div
untuk keperluan gaya, atau kenyamanan JavaScript, atau hal lain yang belum dipikirkan W3C, tetapi tidak menunjukkan kepada pembaca bahwa elemen anak adalah grup.
<p>This is a paragraph</p>
atau <h2>This is a second-level heading</h2>
. Karena <div>
menambahkan tidak ada makna, Anda hanya akan menggunakannya jika tidak ada elemen HTML lain yang menambahkan makna yang sesuai untuk teks yang dimaksud.
<div> Vs <Section>
<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.
<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.
main
tag di sana, dan di dalamnya, satu atau lebih section
tag.
<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.
<header>
, <footer>
, <nav>
, <article>
Dll)
<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 :
<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: