HTML section tag | belajar <section> element
Referensi Belajar HTML section tag. Tutorial dan panduan mengenai element <section>...</section> yang digunakan untuk memarkup bagian-bagian halaman. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <section>.
Deskripsi
Penjelasan HTML section
section artinya bagian atau seksi. HTML tag <section> merepresentasikan sebuah bagian dokumen atau aplikasi. Secara kontekstual, <section> element digunakan untuk mengelompokkan konten/dokumen menjadi beberapa bagian berdasarkan tema atau pokok pikiran masing-masing.
Di dalam sebuah element <section>, sebaiknya ditulis pula element heading, yaitu element <h1> sampai dengan <h6> yang ditulis secara langsung didalam element <section> sebagai anak element pertama yang menunjukkan judul atau tematik dari bagian konten tersebut.
Dalam penggunaannya, <section> tidak diperuntukkan sebagai container yang digunakan untuk menampung beberapa elements dengan maksud untuk mendesign/memberi style dengan CSS.
<section> berbeda dengan <div> karena ia memiliki arti semantik (semantic meaning) yang dapat digunakan untuk mengklasifikasikan bagian dari outline sebuah dokumen.
Global Attributes
Atribut Secara Global (Keseluruhan)
<section> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<section> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <section> element
<section>
<h2>HTML5</h2>
<p>
HTML5 adalah versi terbaru dari spesifikasi HTML yang yang dikembangkan oleh W3C. Sebenarnya ada dua versi spesifikasi, satu dikembangkan oleh WHATWG dan satunya lagi oleh W3C.
</p>
</section>
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mengenal Web Standard</title>
<style>
/* CSS Code */
body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 960px;
margin:0 auto;
padding: 1em;
font-size: 100%;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.875em;
line-height: 1.5;
}
a {
text-decoration: none;
}
a:hover {
border-bottom: 1px solid blue;
}
ul {
margin:0;
padding:0;
list-style:none;
}
#header ul li {
display:inline-block;
padding: .5em;
}
#content{
width: 70%;
float: left;
}
#content section {
margin-top: 2em;
border-top: 2px solid #ccc;
}
#sidebar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 30%;
float: right;
padding-left: 1em;
}
section h3+p {
border-bottom: 1px solid #ccc;
padding-bottom: 1em;
}
section article {
border-bottom: 1px solid #ccc;
line-height:normal;
}
#footer {
clear:both;
text-align:center;
padding-top: 1em;
}
</style>
</head>
<body>
<!-- <header> untuk <body> element - header utama -->
<header id="header" role="banner">
<h1>Belajar Bersama dul</h1>
<!-- <nav> navigasi -->
<nav role="navigation">
<ul>
<li><a href="#">Artikel Terbaru</a></li>
<li><a href="#">Artikel Populer</a></li>
<li><a href="#">Penulis</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
</nav>
</header>
<!-- <main> element -->
<main id="content" class="group" role="main">
<!-- <article> element -->
<article id="post" role="article">
<!-- <header> untuk <article> element -->
<header>
<h2>Mengenal Web Standard</h2>
<p>Ditulis oleh: dul,
<time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time>
</p>
</header>
<p>
Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em> (smartphone, tablet, desktop dan lain sebagainya). Web Standard mencakup beberapa hal berikut:
</p>
<section>
<h3>HTML5</h3>
<p>
HTML5 adalah versi terbaru dari spesifikasi HTML yang yang dikembangkan oleh W3C. Sebenarnya ada dua versi spesifikasi, satu dikembangkan oleh WHATWG dan satunya lagi oleh W3C.
</p>
</section>
<section>
<h3>CSS 3</h3>
<p>
CSS3 atau CSS Level 3 adalah versi terbaru dari Cascading Style Sheets yang digunakan untuk menggambarkan presentasi sebuah halaman web atau memberi style tampilan web.
</p>
</section>
<!-- <aside> untuk <article> element -->
<aside>
<h3>Istilah Kata:</h3>
<dl>
<dt>W3C</dt>
<dd>World Wide Web Consortium. Organisasi dunia yang mengelola dan membakukan web standard.</dd>
</dl>
<dl>
<dt>Device</dt>
<dd>Alat. Alat yang dimaksud adalah semua teknologi yang digunakan untuk mengakses internet/web.</dd>
</dl>
</aside>
<!-- <section> untuk <article> element -->
<section>
<h3>Komentar</h3>
<p>Berkomentarlah dengan bijak!</p>
<!-- article> pada <section> element - komentar user menggunakan <article> -->
<article>
<!-- article header -->
<header>
<h4>Halwa Fadhilah</h4>
<p><em><time datetime="2015-03-07T16:00">07 Maret 2015, pkl. 16:00</time></em></p>
</header>
<p>Terima Kasih. Web standar memang penting, supaya bisa dinikmati semua orang, bahkan yang cacat sekalipun. Sebagai tambahan, W3C bisa dikunjungi di w3.org</p>
<!-- article footer -->
<footer>
<p><a href="#" rel="nofollow">Halwa Blog</a></p>
</footer>
</article>
<!-- <article> pada <section> element - komentar user menggunakan <article> -->
<article>
<header>
<h4>Rodi4h Design</h4>
<p><em><time datetime="2015-03-07T20:00">07 Maret 2015, pkl. 20:00</time></em></p>
</header>
<p>W3C terbuka untuk siapapun diseluruh penjuru dunia. Kita bisa bergabung dan berbagi bersama.</p>
<footer>
<p><a href="#" rel="nofollow">Rodiah Blog</a></p>
</footer>
</article>
</section>
</article>
</main>
<!-- <aside> pada <body> element -->
<aside id="sidebar" role="complementary">
<h3>Arsip</h3>
<ul>
<li><a href="#">Maret 2015</a></li>
<li><a href="#">Februari 2015</a></li>
<li><a href="#">Januari 2015</a></li>
<li><a href="#">Desember 2014</a></li>
<li><a href="#">November 2014</a></li>
</ul>
</aside>
<!-- <footer> pada <body> element -->
<footer id="footer" role="contentinfo">
<p>© 2017 Fadlullah Fadul. All Rights Reserved.</p>
<ul>
<li><a href="https://www.apacara.com">Home</a></li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/copyright.html">Copyright</a></li>
<li><a href="/p/privacy.html">Privacy</a></li>
</ul>
</footer>
</body>
</html>
SHARE