Membuat Layout HTML dengan Semantic Element

Pada bahasan sebelumnya kita telah mengenal beberapa element HTML seperti heading, paragraph, list, link, table, dan form. Selain itu ditinjau dari cara browser menampilkan halaman web terdapat element block dan inline. Pertanyaan sederhana bagaimana cara kita menyusun element-element tersebut biar kelihat rapi dan mudah dibaca?

Jawabannya adalah pengaturan tata letak atau layout. Pada bab sebelumnya kita menggunakan element div dan span untuk menterjemahkan setiap element yang terdapat pada halaman HTML. Tag <div> dan <span> ini tidak memiliki makna kecuali kita tambahkan atribut class dan id pada kedua tag tersebut. Misalnya untuk header kita gunakan element <div class=”header”> atau <div id=”header”>, bagian konten/artikel kita definisikan dengan <div class=”article”>, begitu juga dengan footer kita gunakan <div class=”footer>.

Pada HTML5 terdapat pembaharuan tag berkaitan dengan fungsionalitas layout HTML yang dikenal dengan istilah semantic element. Pada semantic element, setiap layout menggunakan tag sesuai dengan fungsi masing-masing. Sebagai contoh untuk header kita gunakan tag <header> … </header>, artikel kita gunakan tag <article> … </article>, dan footer menggunakan tag <footer> … </footer>.

Jika diperhatikan, antara element semantic dengan div dan span sama-sama bisa digunakan untuk membuat layout HTML. Hanya saja pada element semantic web browser lebih mudah mendefinisikan apa yang terdapat pada element tersebut, beda halnya dengan penggunakan tag <div> dan <span> dalam membentuk layout, karena kedua tag ini tidak mendefinisikan isi element dengan jelas bagi browser.

Berikut beberapa element semantic yang dapat digunakan untuk mendefinisikan struktur atau layout halaman web:

No.	Tag Semantik	Deskripsi
1	<article>	Mendefinisikan element artikel web
2	<aside>	Mendefinisikan element di samping konten utama
3	<details>	Mendefinisikan element detail atau spoiler
4	<figcaption>	Mendefinisikan text caption pada figure
5	<figure>	Mendefinisikan figur atau gambar pada artikel
6	<footer>	Mendefinisikan element footer web
7	<header>	Mendefinisikan element header web
8	<main>	Mendefinisikan element utama web
9	<mark>	Mendefinisikan teks yang ditandai
10	<nav>	Mendefinisikan element navbar atau navigasi
11	<section>	Mendefinisikan bagian halaman web
12	<summary>	Mendefinisikan ringkasan artikel web
13	<time>	Mendefinisikan element waktu

Layout HTML menggunakan element semantik dapat dilihat pada gambar berikut ini.

Semantic Element

Beberapa contoh penggunaan element semantik dapat disimak pada pembahasan di bawah ini:

Element Header

Element header biasanya digunakan untuk menempatkan informasi judul maupun tagline website menggunakan tag heading. Selain judul dan tagline, pada header juga dapat disematkan logo atau icon website. Element header juga dapat ditambahkan pada element article pada suatu artikel web untuk menandai judul artikel. Tag yang digunakan untuk membuat element header adalah <header> ... </header>. Contoh penggunaan element header:

<header>
	<h1>Belajar HTML</h1>
	<p>Belajar HTML untuk Pemula</p>
</header>

Element Nav

Element nav biasanya ditempatkan setelah element header dan berfungsi untuk mendefinisikan link navigasi pada sebuah website. Selain itu, element navigasi juga dapat ditempatkan dalam artikel maupun sidebar. Tidak semua navigasi harus menggunakan element ini, misalnya daftar link navigasi yang terdapat pada footer. Tag yang digunakan untuk mendefinisikan element nav adalah <nav> ... </nav>. Element nav dapat dibuat dalam bentuk element inline maupun block. Penggunaan element nav dalam bentuk inline dapat menggunakan tag <a> seperti contoh berikut:

<nav>
	<a href="#">HTML</a> |
	<a href="#">CSS</a> |
	<a href="#">Javascript</a> |
	<a href="#">PHP</a> |
	<a href="#">SQL</a>
</nav>

Untuk element nav dalam bentuk list (block element), gunakan tag <ul> dan tambahkan atribut role="navigation" (optional) pada tag <nav> seperti contoh berikut:

<nav role="navigation">
	<ul>
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">Javascript</a></li>
		<li><a href="#">PHP</a></li>
		<li><a href="#">SQL</a></li>
	</ul>
</nav>

Element Footer

Element footer mendefinisikan bagian footer sebuah website. Pada element footer biasa berisi informasi hak cipta, profil, kontak, peta situs, situs relevan, atau dapat juga link yang mengarah ke bagian atas (header) web. Element footer juga dapat ditambahkan pada element article pada suatu artikel web. Tag yang digunakan untuk membuat element ini adalah <footer> ... </footer>. Contoh penggunaan element footer untuk informasi hak cipta:

<footer>
	Copyright &copy; 2021 - Abugaza_
</footer>

Element Article

Fungsi element article adalah untuk menempatkan konten mandiri seperti artikel, postingan blog, forum, komentar blog, atau widget interaktif. Setiap konten yang terdapat pada element ini dapat berdiri sendiri dan tidak terikat dengan konten lain. Satu element article mewakili satu jenis konten dengan tema atau judul yang sama. Element article dapat juga disisipkan pada element article lain yang masih berkaitan. Contoh penggunaan element article dengan satu buah judul artikel dan komentar:

<header>
	<h1>Belajar HTML</h1>
	<nav>
		<a href="#">Home</a> |
		<a href="#">About</a> |
		<a href="#">Concact</a> |
		<a href="#">Blog</a>
	</nav>
</header>
<section>
	<article>
		<header>
			<h2>Judul Artikel</h2>
			<p>Diterbitkan oleh <a href="#">Rino Safrizal</a> pada tanggal <time datetime="2021-12-12">12 Desember 2021</time></p>
		</header>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum vitae, aut odio dicta ullam nemo officiis dolore repellat hic quibusdam?</p>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi earum, enim quo. Quasi, recusandae, accusantium!</p>
		<section>
			<h2>Komentar Terkait:</h2>
			<article>
				<header>
					<h3>Visitor 1</h3>
					<p>Pada tanggal <time datetime="2021-12-12T12:00">12 Desember 2021, pukul 12:00</time></p>
				</header>
				<p>Komentar pembaca di sini..</p>
				<footer>
					<p></p>
				</footer>
			</article>
			<article>
				<header>
					<h3>Visitor 2</h3>
					<p>Pada tanggal <time datetime="2021-12-12T14:00">12 Desember 2021, pukul 14:00</time></p>
				</header>
				<p>Komentar pembaca di sini..</p>
				<footer>
					<p></p>
				</footer>
			</article>
		</section>
	</article>
</section>
<footer>
	<p>Copyright &copy; 2021 - Abugaza</p>
</footer>

Element Section

Fungsi dari element section adalah mengelompokkan konten secara tematik pada halaman web sesuai dengan judul atau tema masing-masing. Element section harus ditambahkan tag heading untuk menandai judul setiap section.

Untuk membuat element section kita gunakan tag <section> ... </section>. Dalam penggunaanya, element section bisa berada di dalam maupun di luar element article. Selain itu, element section tidak diperuntukkan sebagai container atau pembungkus element-element lain. JIka kita ingin menerapkan fungsi container pada suatu element, sebaiknya gunakan tag <div>. Contoh penggunaan element section:

<article>
	<header>
		<h2>Judul Artikel</h2>
		<p>Diterbitkan oleh <a href="#">Rino Safrizal</a> pada tanggal <time datetime="2021-12-12">12 Desember 2021</time></p>
	</header>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto tempore aspernatur repellat dignissimos, illo quo est ab ratione aperiam blanditiis, at ipsam ipsum, nihil, vel! Qui, tempora cum nesciunt quaerat!</p>
	<section>
		<h3>Subjudul 1</h3>
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Laudantium unde ipsum molestiae deleniti iusto eos id vel voluptates, exercitationem autem!</p>
	</section>
	<section>
		<h3>Subjudul 2</h3>
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque magnam harum iusto quo quae obcaecati suscipit id modi fugiat, vitae! Doloribus, distinctio! Numquam voluptatibus, error!</p>
	</section>
	<section>
		<h3>Komentar Terkait:</h3>
	</section>
</article>

Element Aside

Element aside merupakan element yang berada di samping (bersebelahan) dengan element konten website. Element aside bisa saja berupa informasi tambahan terkait dengan artikel yang ditampilkan seperti referensi, kutipan, kata kunci, dan konten terkait atau dapat juga berupa element terpisah dari artikel seperti sidebar yang terletak di samping kiri dan/ atau kanan kolom artikel. Jika berupa sidebar maka dapat ditambahkan element lain yang tidak berhubungan langsung seperti artikel populer, artikel terbaru, komentar terbaru, atau dapat juga berupa iklan. Untuk membuat element ini dapat menggunakan tag <aside> ... </aside>. Contoh penggunaan element aside berupa kutipan:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Belajar HTML</title>
	<style type="text/css">
		aside {
			width: 25%;
			padding: 5px;
			float: right;
			font-style: italic;
			background-color: whitesmoke;
			margin-left: 5px;
		}
	</style>
</head>
<body>
	<h2>Element Aside</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, ab eos vitae tempore sed provident quo autem quaerat recusandae expedita, incidunt tenetur ipsam explicabo aspernatur fugiat possimus fuga ratione sapiente, beatae, accusantium tempora modi eligendi? Porro dolores, quam, velit exercitationem laboriosam quibusdam provident tenetur accusantium dicta illum eveniet assumenda iure.</p>
	<aside>
		<blockquote>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam, inventore?</blockquote>
	</aside>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, ex nemo soluta ad sit autem doloremque quia voluptatibus incidunt quasi quam error cupiditate exercitationem. Fuga beatae quas ratione, dolorem, soluta a deleniti ad nisi odio, repellendus assumenda facere id? Aspernatur.</p>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim cumque debitis sapiente. Dolor repudiandae voluptas architecto, deleniti quia iste voluptatem aspernatur dolore cupiditate sit quae ipsam velit odit laborum provident accusantium doloremque harum recusandae hic!</p>
</body>
</html>

Contoh penggunaan element aside sebagai sidebar:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Belajar HTML</title>
	<style type="text/css">
		body {
			width: 900px;
			margin: auto;
		}
		article {
			width: 600px;
			padding: 10px;
			float: left;
		}
		aside {
			width: 260px;
			padding: 10px;
			float: left;
		}
	</style>
</head>
<body>
	<article>
		<header>
			<h2>Element Aside</h2>
			<p>Diterbitkan oleh <a href="#">Rino Safrizal</a> pada tanggal <time datetime="2021-12-12">12 Desember 2021</time></p>
		</header>
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, ab eos vitae tempore sed provident quo autem quaerat recusandae expedita, incidunt tenetur ipsam explicabo aspernatur fugiat possimus fuga ratione sapiente, beatae, accusantium tempora modi eligendi? Porro dolores, quam, velit exercitationem laboriosam quibusdam provident tenetur accusantium dicta illum eveniet assumenda iure.</p>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, ex nemo soluta ad sit autem doloremque quia voluptatibus incidunt quasi quam error cupiditate exercitationem. Fuga beatae quas ratione, dolorem, soluta a deleniti ad nisi odio, repellendus assumenda facere id? Aspernatur.</p>
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim cumque debitis sapiente. Dolor repudiandae voluptas architecto, deleniti quia iste voluptatem aspernatur dolore cupiditate sit quae ipsam velit odit laborum provident accusantium doloremque harum recusandae hic!</p>
	</article>
	<aside>
		<h2>Artikel Terbaru</h2>
		<ul>
			<li><a href="#">Artikel 1</li>
			<li><a href="#">Artikel 2</li>
			<li><a href="#">Artikel 3</li>
			<li><a href="#">Artikel 4</li>
			<li><a href="#">Artikel 5</li>	
		</ul>
	</aside>
</body>
</html>

Element Figure

Element figure berfungsi mendefisikan sebuah gambar, ilustrasi, diagram, skema, video, kode, dan lain-lain, sebagai informasi tambahan dalam sebuah artikel atau konten. Tag yang digunakan untuk membuat element figure adalah <figure> ... </figure>. Element ini selalu diikuti dengan text caption atau keterangan figure dengan menambahkan tag <figcaption> ... </figcaption>. Contoh penggunaan element figure:

<h2>Mekanisme Asidifikasi Samudera</h2>
<p>Proses asidifikasi samudra, secara sederhana adalah karbon dioksida dari pembakaran bahan bakar fosil yang terakumulasi dalam atmosfer, menyebabkan pemanasan global, berpengaruh terhadap samudra atau lautan kita. karbon dioksida diserap oleh laut dan bereaksi dengan air laut membentuk asam karbonat H2CO3 dan meningkatkan keasamam (H+) air laut. Lebih jelasnya perhatikan gambar berikut ini:</p>
<figure>
	<img src="https://i1.wp.com/3.bp.blogspot.com/-7qtPShtmN7U/Taq8omC8NKI/AAAAAAAABDE/zJaVK59jhYI/s320/oceanacidification_1.png?resize=320%2C219&ssl=1" alt="Mekanisme asidifikasi samudra" width="300px" height="200px">
	<figcaption>Gambar 1. Mekanisme Asidifikasi Samudera</figcaption>
</figure>
<p>Sumber: University of Maryland</p>