Penjelasan html <section>
:
Element
<section>
mempunyai defenisi sebagai bagian dari sebuah dokumen, misal bab pada sebuah artikel, part sebuah content yang topik pembahasannya keluar dari bahasan sebelumnya.Dalam Penulisan pada html, element
<section>
dianjurkan didalamnya terdapat element html heading <h1>
- <h6>
, karena tag heading pada element <section>
menunjukan judul atau title dari element <section>
tersebut.Ilustrasi pertama adalah : Sebuah buku mempunyai bagian yang terdiri dari kata pengantar, pembukaan, bab 1 dan dst, dan penutup. Nah bagian itu disebut
<section>
, dan untuk judul pada bagian atas itu adalah heading <h1>
- <h6>
.Ilustrasi kedua adalah : Misal anda penulis pada sebuah blog, dan menulis konten berjudul Cara membuat robot, dan pada kontent tersebut terdapat tahap-tahap pembuatan, tahap pertama mengumpulkan bahan beserta penjelasannya, tahap kedua cara merakit dan penjelasannya, dst..., nah tahap-tahap tersebut bisa disebut
<section>
.Contoh penerapan html <section>
:
<article>
<header><h1>Cara Membuat Robot</h1></header>
<section>
<header><h2>Menyiapkan Bahan</h2></header>
<p>Lorem Ipsum dolor sit amet..... </p>
</section>
<section>
<header><h2>Cara Merakit</h2></header>
<p>Lorem Ipsum dolor sit amet... </p>
</section>
<section>
<header><h2>Cara menggerakkan</h2></header>
<p>Lorem Ipsum dolor sit amet... </p>
</section>
</article>
<section>
<footer><h4><small>example.com</small></h4></footer>
</section>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> section { border : 1px solid silver; border-radius : 5px; margin-bottom : 15px; padding : 10px; } </style> </head> <body> <article> <header><h1>Cara Membuat Robot</h1></header> <section> <header><h2>Menyiapkan Bahan</h2></header> <p>Lorem Ipsum dolor sit amet..... </p> </section> <section> <header><h2>Cara Merakit</h2></header> <p>Lorem Ipsum dolor sit amet... </p> </section> <section> <header><h2>Cara menggerakkan</h2></header> <p>Lorem Ipsum dolor sit amet... </p> </section> </article> <section> <footer><h4><small>example.com</small></h4></footer> </section> </body> </html>
Global Attributes:
Element
<section>
mencakup Global Attributes HTML.Event Attributes:
Element
<section>
mencakup Event Attributes HTML.
Browser Support :
HTML | |||||
---|---|---|---|---|---|
Element | Chrome | Safari | Firefox | Opera | IE / Edge |
<section> | 6.0 | 5.0 | 4.0 | 11.1 | 9.0 |
Nilai pada table menentukan minimal versi browser |
Default CSS :
Browser yang support dengan element
<section>
, mempunyai nilai default :section {
display: block;
}