Mencoba Elemen Semantik

ELEMEN SEMANTIK PADA HTML

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. 1

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 bandingkan dengan kode ini:

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

Ini tentunya akan lebih muda dibaca.

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

Membuat Layout dengan Elemen Semantik

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

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

Contoh:

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

<head>
  <meta charset="UTF-8">
  <title>Contoh 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; 2023 by Petani Kode
  </footer>

</body>

</html>

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 semantuk sama saja seperti memberikan style pada elemen lainnya. Tinggal membuat atribut style, lalu mengisinya dengan kode style CSS.

Contoh:

<!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; 2023 by Petani Kode
  </footer>

</body>

</html>

Hasilnya: