Belajar HTML #12: Mengenal Elemen Semantik pada HTML

Mas Iwan

Updated: 05 Dec, 2023 • 16328 • min read

Table of Contents

Sejauh ini kita sudah mengenal beberapa tag dasar di HTML, seperti elemen paragraf, heading, list, tabel, link, dan form.

Lalu pertanyaannya:

Bagaimana cara menata elemen-elemen ini agar terlihat bagus?

Jawabannya:

Kita butuh sebuah layout.

Nah, di HTML terdapat beberapa elemen yang khusus untuk melakukan ini. Yakni elemen semantik seperti <header>, <aside>, <footer>, <article>, dll.

Elemen semantik sebenarnya tidak hanya digunakan untuk membuat layout saja. Ia juga digunakan untuk membuat elemen lain.

Untuk lebih jelasnya, mari kita pelajari lebih detail.

Daftar isi

Apa itu Elemen Semantik?

Jadi gini..

Di awal-awal hadirnya HTML dulu, elemen semantik belum ada.

Orang-orang membuat layout dengan menggunakan tag yang salah.

Ada yang membuatnya dengan tag <tabel> dan ada juga dengan tag <div>.

Ini sebenarnya tidak sepenuhnya salah, karena membuat layout dengan kedua tag itu benar-benar bisa.

Tapi..

Ini bukanlah cara yang baik dan akan membuat kode HTML kita sulit terbaca.

Karena itu.. hadirlah elemen semantik sebagai solusi.

Elemen semantik mulai ditambahkan pada HTML 5.

Elemen semantik adalah elemen-elemen yang menyatakan makna atau tujuan dari elemen itu sendiri.

Misalnya tag <footer>, tag ini digunakan untuk membuat elemen footer atau bagian kaki dari web.

Jangan gunakan tag ini di bagian paling atas, karena maknanya sudah jelas untuk footer.

Jadi tidak akan ada lagi yang namanya penyalahgunaan tag. Karena setiap tag sudah punya tujuan masing-masing.

Berikut ini daftar elemen-elemen semantik:

<article> — untuk membuat elemen artikel;
<aside> — untuk membuat elemen bagian samping;
<details> — untuk membuat elemen datail atau spoiler;
<figcaption> — untuk membuat teks caption pada figure;
<figure> — untuk membuat figur atau gambar pada artikel;
<footer> — untuk membuat elemen bagian kaki dari web;
<header> — untuk mebuat kepala kop dari web;
<main> — untuk membuat elemen utama;
<mark> — untuk menandai teks;
<nav> — untuk membuat navigasi;
<section> — untuk membuat bagian artikel;
<summary> — untuk membuat ringkasan artikel atau isi spoiler;
<time> — untuk membuat elemen yang menyatakan waktu;
dan masih banyak lagi.

Mengapa Harus Pakai Elemen Semantik?

Salah satu keuntungan menggunakan elemen semantik adalah dokumen HTML kita akan mudah dibaca, baik itu oleh manusia maupun mesin.

Coba perhatikan kode berikut:


<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

Ini adalah contoh layout yang dibuat dengan tag <div>. Tag ini memang bagus untuk membungkus elemen HTML.

Kamu mungkin akan mudah paham dengan membaca nama-nama class yang diberikan pada elemen <div>.

Ada <div> yang bertugas untuk membuat elemen header, article, footer, dan sebagainya.

Sekilas, tidak ada masalah dengan ini..

Tapi nanti kalau elemen <div> nya sudah banyak, kita akan kesulitan membacanya.

Sekarang coba kita bandingkan dengan kode ini


<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

Ini tentunya akan lebih mudah dibaca.

Oh iya, elemen semantik juga bagus untuk SEO. Jadi kalau mau website mu disukai mesin pencari, sebaiknya gunakanlah elemen ini.

Membuat Layout dengan Elemen Semantik

Nah, sekarang mari kita belajar membuat layout dengan elemen semantik.

Buatlah file baru dengan nama layout.html, kemudian isi dengan kode berikut:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contoh Layout dengan Elemen Semantik</title>
</head>

<body>

  <header>
    <h1>Belajar Elemen Semantik di HTML</h1>
  </header>

  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
  </nav>

  <article>
    <h1>Tutorial Semantik Elemen untuk Pemula</h1>
    <p>Semantik elemen adalah elemen yang memiliki makna dan tujuan.
      Tujuannya agar kode HTML mudah dibaca dan tidak ada penyalahgunaan tag.
      Elemen semantik bagus untuk SEO dan juga dapat meningkatkan accessibility.
    </p>
  </article>

  <footer>
    Copyright &copy; 2021 by Siap Ngoding
  </footer>

</body>

</html>

Setelah itu buka dengan web browser.

Maka hasilnya:

Hasilnya akan terlihat biasa saja dan sama seperti contoh-contoh sebelumnya. Ini karena kita belum memberikan style CSS.

Karena itu, mari kita coba memberikan style CSS untuk elemen semantik.

Style untuk Elemen Semantik

Cara memberikan style untuk elemen semantik sama saja seperti memberikan style pada elemen lainnya. Tinggal membuat atribut style, lalu mengisinya dengan kode style CSS.

Oke, sekarang coba ubah contoh yang tadi menjadi seperti ini:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contoh Layout dengan Elemen Semantik</title>
</head>

<body style="background-color:; silver;">

  <header style="background-color: white;">
    <h1>Belajar Elemen Semantik di HTML</h1>
  </header>

  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
  </nav>

  <article style="background-color: white;">
    <h1>Tutorial Semantik Elemen untuk Pemula</h1>
    <p>Semantik elemen adalah elemen yang memiliki makna dan tujuan.
      Tujuannya agar kode HTML mudah dibaca dan tidak ada penyalahgunaan tag.
      Elemen semantik bagus untuk SEO dan juga dapat meningkatkan accessibility.
    </p>
  </article>

  <footer style="background-color: white;">
    Copyright &copy; 2021 by Siap Ngoding
  </footer>

</body>

</html>

Kita memberikan warna latar untuk elemen body dan juga beberapa elemen semantik.

Maka hasilnya

Mencoba Elemen Semantik Lainnya

Tidak semua elemen semantik bertujuan untuk membuat layout, ada juga beberapa elemen semantik lainnya yang bertujuan untuk membuat elemen tertentu.

Mari kita pelajari elemen semantik lainnya..

Elemen <detail> dan <summary>

Tag <detail> dan <summary> merupakan tag untuk membuat elemen spoiler.

Tag <detail> akan berisi semua detail konten, lalu tag <summary> akan menjadi tombol yang bisa diklik untuk menampilkan detail isinya.

Contoh:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contoh Elemen Semantik</title>
</head>

<body>

  <article>
    <h1>Laptop Terbaik untuk Programmer</h1>

    <details>
      <summary>Lihat Spesifikasi</summary>
      Prosesor: Intel Core i9, RAM 32GB, SSD 1TB, HDD 4TB
    </details>
  </article>

</body>

</html>

Hasilnya:

Elemen <time>

Tag <time> merupakan tag untuk membuat elemen waktu. Elemen waktu biasanya dibutuhkan untuk menampilkan waktu.

Misalnya:

Waktu saat sebuah postingan dibuat, waktu saat sebuah pesan dibaca, waktu keberangkatan, dan lain sebagainya.

Contoh:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contoh Elemen Semantik</title>
</head>

<body>

  <article>
    <h1>Waktu di HTML</h1>

    <p>
      Ditulis pada <time datetime="2021-20-07">20 July 2021</time>
    </p>
    <p>
      Hari ini saya ada acara dari pukul <time>08:00</time> sampai pukul
      <time>10:00</time>
    </p>
  </article>

</body>
</html>

Hasilnya:

Elemen <time> akan ditampilkan apa adanya. Atribut datetime berfungsi untuk memberikan nilai tanggal dan waktu yang nantinya akan dibaca oleh program.

Apa Selanjutnya?

Kita baru saja belajar tentang elemen semantik.

Intinya, kamu harus menggunakan elemen semantik agar kode HTML-nya mudah dibaca.

Nggak pakai elemen semantik, website mu bisa dibilang masih kuno 😄.

Jadi pakailah elemen semantik.

Selanjutnya silahkan pelajari tentang:

Belajar HTML #13: Menambahkan Video pada HTML

📖 lihat juga tutorial lainnya di List Tutorial HTML

Mas Iwan Blog ini dibuat dengan tujuan untuk berbagi kepada semua orang yang membutuhkannya.

SIAP NGODING