Belajar HTML#12 – Elemen Semantik pada HTML

Elemen semantik ini baru mulai ditambahkan pada HTML 5, yang biasanya digunakan untuk membuat layout ataupun untuk membuat elemen lain.

Elemen semantik pada HTML adalah tag-tag ataupun elemen pada HTML yang mempunyai makna dan tujuan berdsarkan elemen itu sendiri. Misalnya tag <header>, tag ini digunakan untuk bagian atas dari web. Jangan gunakan tag ini di bagian paling bawah, karena setiap tag sudah punya tujuan masing-masing.

Kenapa harus menggunakan Elemen Semantik ?

Untuk menjawab pertanyaan itu, saya akan memberikan contoh Tag yang biasanya digunakan untuk membungkus elemen HTML, yaitu tag <div>. Tag ini sering digunakan seperti di bagian header yang berisi menu navigasi,footer dan menu utama.

Contoh non semantic menggunakan tag div:

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

Pada contoh diatas, dapat kita pahami bahwa atribut id mempunyai ‘makna‘ berdasarkan tag-tag tersebut, Namun, untuk tag <div> itu sendiri tidak memiliki makna apapun (non semantic tag). Jadi kita sulit menentukan apakah tag ini untuk bagian header, atau isi dari web. Apalagi kalau elemen <div> ini sudah banyak, maka kita akan kesulitan membacanya. Anda bisa melihat perbandingannya dengan contoh dibawah ini.

Contoh Elemen semantic tanpa tag div:

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

Berdasarkan contoh diatas, maka elemen semantik pada HTML akan lebih memudahkan dalam menulis maupun membaca kode programnya. Misalnya, kita dapat menulis tag <header> secara langsung dari pada menulisnya dengan tag div seperti ini :

<div id=”header”>

Maka dari itu, pada HTML5 memperkenalkan tag-tag baru untuk mengatasi hal tersebut. Jadi, dokumen HTML kita akan lebih menarik dan mudah dibaca oleh manusia maupun mesin sehingga bagus untuk SEO.

Berikut ini merupakan daftar elemen-elemen semantik:

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

Membuat Layout dengan Elemen Semantik HTML

Jika mengingat pembahasan sebelumnya, kita sudah belajar beberapa elemen di HTML seperti paragraf, heading, list, tabel, link, dan form. Nah, untuk merapikan elemen-elemen tersebut kita dapat menggunakan Elemen semantik ini dengan fungsinya sebagai layout. Adapun contoh dalam membuat layout dengan elemen semantik pada HTML adalah sebagai berikut .

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Layout dengan Elemen Semantik di HTML</title>
</head>
<body>
  <header>
    <h1>Elemen Semantik di HTML</h1>
  </header>
  <nav>
    <a href="#">Beranda</a> |
    <a href="#">About Us</a> |
    <a href="#">Contact Form</a>
  </nav>
  <article>
    <h1>Apa itu Elemen semantik ?</h1>
    <p>
      Elemen semantik adalah tag-tag HTML yang mempunyai makna dan tujuan beradasarkan elemen itu sendiri.<br>
      Misalnya tag header, tag ini digunakan untuk bagian atas dari web. Jangan gunakan tag ini di bagian paling<br>
      bawah, karena setiap tag sudah punya tujuan masing-masing. Elemen semantik ini baru mulai ditambahkan<br>
      pada HTML 5, yang biasanya digunakan untuk membuat layout ataupun untuk membuat elemen lain.
    </p>
  </article>
  <br>
  <footer>
    Copyright &copy; 2022 by Praktek Otodidak
  </footer>
</body>
</html>

2. Setelah itu, buka dengan web browser untuk menampilkan hasilnya.

Elemen Semantik HTML

Hasil yang ditampilkan dari contoh tersebut akan terlihat biasa saja, karena semantic pada HTML5 sebagian besar tidak mempunyai style bawaan. Pada dasarnya HTML sendiri dirancang untuk struktur halaman. Jika anda ingin mengubah tampilan halaman web, yaitu dengan menggunakan style CSS.

Style CSS untuk Elemen Semantik HTML

Untuk memberikan style pada elemen semantik sebenarnya sama saja seperti elemen HTML lainnya. Kita hanya membuat atribut style, Setelah itu baru mengisinya dengan kode style CSS.

Sekarang ubah contoh diatas tadi menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Layout dengan Elemen Semantik di HTML</title>
</head>
<body style="background-color: rgb(197, 197, 140);">
  <header>
    <h1>Elemen Semantik di HTML</h1>
  </header>
  <nav>
    <a href="#" style="color:red">Beranda</a> |
    <a href="#" style="color:blue">About Us</a> |
    <a href="#" style="color:green">Contact Form</a>
</nav>
  <article style="background-color: rgb(223, 213, 213);">
    <h1 style="background-color: yellow;">Apa itu Elemen semantik ?</h1>
    <p>
      Elemen semantik adalah tag-tag HTML yang mempunyai makna dan tujuan beradasarkan elemen itu sendiri.<br>
      Misalnya tag header, tag ini digunakan untuk bagian atas dari web. Jangan gunakan tag ini di bagian paling<br>
      bawah, karena setiap tag sudah punya tujuan masing-masing. Elemen semantik ini baru mulai ditambahkan<br>
      pada HTML 5, yang biasanya digunakan untuk membuat layout ataupun untuk membuat elemen lain.
    </p>
  </article>
  <br>
  <footer>
    Copyright &copy; 2022 by <a href="#" style="color:red">Praktek Otodidak</a>
  </footer>
</body>
</html>

Maka hasilnya:

Elemen Semantik HTML

Membuat elemen tertentu

Selain untuk membuat layout, elemen semantik pada HTML juga bisa digunakan untuk membuat elemen tertentu.

Contoh :

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

<head>
  <meta charset="UTF-8">
  <title>Contoh Elemen Semantik</title>
</head>
<body>
  <article>
    <h1 style="color:red"> WEBINAR </h1>
    <p>
        Di webinar praktekotodidak.com kali ini akan membahas mengenai Pembuatan Web Sederhana dengan HTML, 
        CSS dan Javascript
    </p>
    <p>
        Agenda ini dilaksanakan pada tanggal <time datetime="2022-07-07"> 07 July 2022</time> 
        dari pukul <time>20:00</time> sampai pukul <time>22:00</time> WIB.
    </p>
    <h2> Fasilitas </h2>
    <p>
        Adapun fasilitas yang bisa anda dapatkan adalah sebagai berikut :
    </p>
    <details style="background-color: rgb(197, 202, 134);">
      <summary>Fasilitas : </summary>
      <ol> 
        <li>E-Certificate</li>
        <li>E-Module</li>
        <li>Free book untuk 15 Pendaftar pertama</li>
        <li>Live coding</li>
        </ol>
    </details>
    <h2> Pendaftaran </h2>
    <p>
        Tempat Pendaftaran kunjungi Link :<a href= "https://praktekotodidak.com">Praktek Otodidak</a>
    </p>
    <details style="background-color: rgb(197, 202, 134);">
        <summary> More Information : </summary>
        <ul type="circle">
            <li>IRPAH : 08152-XXX-XXXX</li>
            <li><a href="https://www.facebook.com/praktekotodidakfanspage">Facebook</a></li>
            <li><a href=" https://twitter.com/praktekotodiak">Twitter</a></li>
        </ul>
    </details>
</article>
<br>
<br>
<footer>
    Copyright &copy; 2022 by <a href="#" style="color:red">Praktek Otodidak</a>
  </footer>
</body>
</html>

Hasilnya :

Keterangan :

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

  • Tag <detail> akan berisi semua detail konten
  • tag <summary> akan menjadi tombol yang bisa diklik untuk menampikan detail isinya.

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

Atribut datetime berfungsi untuk memberikan nilai tanggal dan waktu yang nantinya akan dibaca oleh program.

Begitulah pembahasan mengenai elemen semantik HTML. Baca juga artikel selanjutnya yaitu : Belajar HTML#13 – Menambahkan Audio pada HTML

Tinggalkan Balasan

Scroll to Top