Penyingkapan. Dukungan Anda membantu menjaga situs tetap berjalan. Kami mendapatkan biaya rujukan untuk beberapa layanan yang kami rekomendasikan di halaman ini. Belajarlah lagi
Element ofWhat On Earth Is Semantic Markup? (And Why Should You Learn To Write It)What does <section> HTML Tag do?TheIsi
Contoh Kode
<section> <h1>Pink Flamingos</h1> <p>Plastic flamingos have been used as garden ornaments since the late 1950s.</p> </section>Flamingo plastik telah digunakan sebagai ornamen taman sejak akhir 1950-an
Menyajikan Konten
_______ 34 _______ adalah elemen HTML5 baru yang mendefinisikan bagian penting dari sebuah dokumen. Ini dapat digunakan di dalam artikel, di header atau footer, atau untuk menentukan navigasi. Jika suatu bagian dari konten berhak atas judulnya sendiri, dan judul tersebut akan dicantumkan dalam daftar isi teoretis atau aktual, itu harus ditempatkan di <section>. Pengecualian utama adalah di mana konten dapat disindikasikan;
Claire Broadley
Claire adalah penulis teknis, editor, dan penggemar HTML berpengalaman. Dia menulis untuk HTML. com dan menjalankan agen konten, Red Robot Media
contoh
Area dokumen, menjelaskan apa itu WWF
WWF
World Wide Fund for Nature (WWF) adalah
Mencoba "
Dukungan peramban
IE 9+, Firefox, Opera, Chrome dan Safari
Catatan. IE 8 atau versi browser IE sebelumnya tidak mendukungnya
Definisi tag dan petunjuk
menentukan area dokumen. Misalnya, bab, header, footer, atau area lain dari dokumen
Perbedaan antara HTML4. 01 dan HTML5
tag baru dalam tag HTML5
Properti global
Properti acara
Elemen HTML <section> mewakili bagian mandiri generik dari dokumen, yang tidak memiliki elemen semantik yang lebih spesifik untuk mewakilinya. Bagian harus selalu memiliki heading, dengan sedikit pengecualian
Elemen ini hanya mencakup atribut global
Seperti disebutkan di atas, <section> adalah elemen pembagian umum, dan hanya boleh digunakan jika tidak ada elemen yang lebih spesifik untuk mewakilinya. Sebagai contoh, menu navigasi harus dibungkus dengan elemen <nav>, tetapi daftar hasil pencarian atau tampilan peta dan kontrolnya tidak memiliki elemen khusus, dan dapat diletakkan di dalam <section>
Pertimbangkan juga kasus-kasus ini
- Jika konten elemen mewakili unit atom mandiri dari konten yang masuk akal disindikasikan sebagai bagian mandiri (e. g. posting blog atau komentar blog, atau artikel surat kabar), elemen <article> akan menjadi pilihan yang lebih baik
- Jika konten mewakili informasi tangensial berguna yang berfungsi bersama konten utama, tetapi bukan bagian langsung darinya (seperti tautan terkait, atau bio penulis), gunakan <section> <h2>Heading</h2> <p>Bunch of awesome content</p> </section> 0
- Jika konten mewakili area konten utama dokumen, gunakan <section> <h2>Heading</h2> <p>Bunch of awesome content</p> </section> 1
- Jika Anda hanya menggunakan elemen sebagai pembungkus gaya, gunakan <section> <h2>Heading</h2> <p>Bunch of awesome content</p> </section> 2 sebagai gantinya
Untuk menegaskan kembali, setiap <section>_ harus diidentifikasi, biasanya dengan menyertakan judul (<section> <h2>Heading</h2> <p>Bunch of awesome content</p> </section> 4 - <section> <h2>Heading</h2> <p>Bunch of awesome content</p> </section> 5 elemen) sebagai anak dari elemen <section>, jika memungkinkan. Lihat di bawah untuk contoh di mana Anda mungkin melihat <section> tanpa judul
Sebelum
<div> <h2>Heading</h2> <p>Bunch of awesome content</p> </div> _
Setelah
<section> <h2>Heading</h2> <p>Bunch of awesome content</p> </section> _
Keadaan di mana Anda mungkin melihat <section> digunakan tanpa judul biasanya ditemukan di aplikasi web/bagian UI daripada di struktur dokumen tradisional. Dalam sebuah dokumen, tidak masuk akal untuk memiliki bagian konten yang terpisah tanpa tajuk untuk menjelaskan isinya. Judul seperti itu berguna untuk semua pembaca, tetapi sangat berguna untuk pengguna teknologi pendukung seperti pembaca layar, dan juga bagus untuk SEO
Namun pertimbangkan mekanisme navigasi sekunder. Jika navigasi global sudah dibungkus dalam elemen <nav>, Anda dapat membungkus menu sebelumnya/berikutnya dalam <section>
<section> <a href="#">Previous article</a> <a href="#">Next article</a> </section> _
Atau bagaimana dengan semacam bilah tombol untuk mengontrol aplikasi Anda?
<section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> _
Pastikan untuk menggunakan beberapa teknologi asistif dan CSS yang ramah pembaca layar untuk menyembunyikannya, seperti itu
.hidden { position: absolute; top: -9999px; left: -9999px; }
Bergantung pada kontennya, menyertakan tajuk juga bagus untuk SEO, jadi ini merupakan pilihan untuk dipertimbangkan
Kategori konten, ,. Konten yang diizinkan. Penghilangan tag Tidak ada, tag awal dan akhir wajib diisi. Izin orang tua Setiap elemen yang menerima. Perhatikan bahwa elemen <section> tidak boleh turunan dari elemen <section> <a href="#">Previous article</a> <a href="#">Next article</a> </section> 2. Implicit ARIA role<section> <a href="#">Previous article</a> <a href="#">Next article</a> </section> 3 if the element has an accessible name, otherwise Permitted ARIA roles<section> <a href="#">Previous article</a> <a href="#">Next article</a> </section> 4, <section> <a href="#">Previous article</a> <a href="#">Next article</a> </section> 5, <section> <a href="#">Previous article</a> <a href="#">Next article</a> </section> 6, <section> <a href="#">Previous article</a> <a href="#">Next article</a> </section> 7, <section> <a href="#">Previous article</a> <a href="#">Next article</a> </section> 8, <section> <a href="#">Previous article</a> <a href="#">Next article</a> </section> 9, <section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> 0, <section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> 1, <section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> 2, <section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> 3, <section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> 4, <section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> 5, <section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> 6, <section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> 7, <section> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section> 8, .hidden { position: absolute; top: -9999px; left: -9999px; } 1, .hidden { position: absolute; top: -9999px; left: -9999px; } 1, ________1 .hidden { position: absolute; top: -9999px; left: -9999px; } 2DOM antarmuka.hidden { position: absolute; top: -9999px; left: -9999px; } _3