Elemen Sematik Pada HTML

Sebelum adanya elemen sematik yang baru pada HTML5 kebanyakan pengembang menggunakan tag <div> untuk membuat struktur HTML. Hal ini membuat kebingungan karena hampir semua struktur HTML menggunakan tag tersebut. Maka sejak HTML5 elemen sematik baru diperkenalkan.

Daftar isi:

Apa itu elemen sematik?

HTML sebagai bahasa markup untuk mendeskripsikan dokumen halaman web dan seiring pertumbuhannya internet, kemudian diadopsi banyak orang yang menjadikan kebutuhan tersebut berubah. Jadi, elemen sematik adalah elemen yang memiliki arti yang bisa dipengerti oleh bahasa mesin dan manusia. Hal ini membuat pengembang terlihat mudah mendefinisikan elemen sematik pada struktur HTML.

Sebelumnya pengembang menggunakan elemen tidak sematik seperti tag <div> dan <span> yang tidak menjelaskan apa arti tag tersebut. Biasanya pengembang akan menggunakan atribut class dan id untuk menggambarkan tujuan mereka. Misalnya, alih-alih menggunakan tag <nav> ini akan ditulis seperti <div class="nav"></div>.

Melihat contoh skrip tidak sematik dan sematik

Saya akan berikan contoh kecil untuk elemen tidak sematik dan sematik, sebagai berikut:

Contoh tidak sematik

<!DOCTYPE html>
<html>
<head>
    <title>Tidak Sematik</title>
</head>
<body>
    <div class="header">
        <!-- elemen lain -->
    </div>
    <div class="nav">
        <!-- elemen lain -->
    </div>
    <div class="main">
        <div class="section">
            <div class="article">
                <h1>Judul 1</h1>
            </div>
            <div class="article">
                <h1>Judul 2</h1>
            </div>
        </div>
        <div class="sidebar">
            <!-- elemen lain -->
        </div>
    </div>
    <div class="footer">
        <!-- elemen lain -->
    </div>
</body>
</html>

Contoh sematik

<!DOCTYPE html>
<html>
<head>
    <title>Sematik</title>
</head>
<body>
    <header>
        <!-- elemen lain -->
    </header>
    <nav>
        <!-- elemen lain -->
    </nav>
    <main>
        <section>
            <article>
                <h1>Judul 1</h1>
            </article>
            <article>
                <h1>Judul 2</h1>
            </article>
        </section>
        <aside>
            <!-- elemen lain -->
        </aside>
    </main>
    <footer>
        <!-- elemen lain -->
    </footer>
</body>
</html>

Kesimpulan: Berdasarkan contoh diatas mungkin Anda akan lebih suka menggunakan elemen sematik ketimbang tidak sematik.

Daftar elemen sematik

Semua elemen sematik baru ini ditambahkan di HTML5. Saya harap Anda bisa menggunakan elemen sematik dan mengerti kapan waktunya menggunakan elemen sematik ini.

  • <article> - untuk membuat konten artikel
  • <aside> - untuk membuat sidebar di samping
  • <details> - untuk membuat elemen detail yang dapat dilihat dan disembunyikan
  • <figcaption> - untuk membuat deskripsi atau caption pada figure
  • <figure> - menentukan konten gambar atau figur pada artikel
  • <footer> - untuk membuat footer untuk dokumen bagian bawah
  • <header> - untuk membuat bagian kepala dari web
  • <main> - menentukan konten utama HTML
  • <mark> - untuk menandai teks
  • <nav> - untuk membuat link navigasi tunggal
  • <section> - untuk membuat sebuah bagian artikel
  • <summary> - menentukan definisi atau paragraf dari sebuah judul dari detail
  • <time> - untuk mendefinisikan waktu atau tanggal

Catatan: Masih banyak elemen sematik yang seharus dipelajari, akan tetapi ini membahas elemen sematik yang baru di HTML5.

Contoh elemen <section> dan <article>

Gunakan tag <article> di dalam tag <section> cara ini cukup banyak digunakan, berikut contohnya:

<section>
    <article>
        <h1>Belajar HTML</h1>
        <p>belajar html mulai saat ini</p>
    </article>
    <article>
        <h1>Belajar HTML</h1>
        <p>belajar html mulai saat ini</p>
    </article>
</section>

Contoh elemen <aside>

Tag <aside> digunakan untuk membuat sidebar baik sebelah kanan atau kiri ini tergantung keinginan Anda pilih yang mana. Berikut contohnya:

<aside>
    <h4>Artikel baru</h4>
    <article>
        <!-- elemen lain -->
    </article>
    <article>
        <!-- elemen lain -->
    </article>
</aside>

Contoh elemen <details> dan <summary>

Elemen ini biasanya digunakan pada bagian frequently asked questions atau pertanyaan yang sering diajukan. Berikut contohnya:

<details>
    <summary>Apa itu elemen sematik?</summary>
    <p>elemen sematik adalah elemen yang memiliki arti yang bisa dipengerti oleh bahasa mesin dan manusia.</p>
</details>

Catatan: Anda bisa menambahkan atribut open pada tag <details> untuk membuka detail setelah memuat halaman.

Contoh elemen <figure> dan <figcaption>

Elemen ini paling banyak digunakan untuk membuat figur dan caption pada gambar yang sering Anda lihat pada situs tertentu. Berikut contohnya:

<figure>
    <img src="#" alt="gambar">
    <figcaption>Ini adalah gambar</figcaption>
</figure>

Contoh elemen <footer>

Tag <footer> biasanya berisi elemen-elemen untuk informasi seputar situs baik dari kontak, hak cipta, atau informasi situs. Berikut contohnya

<footer>
    <p>&copy;2020 Febri Hidayan, hak cipta dilindungi.</p>
</footer>

Contoh elemen <header>

Tag <header> untuk membuat konten pengantar yang berisi satu elemen judul, logo, informasi penulis, atau lainnya. Berikut contohnya:

<header>
    <h1>Febri Hidayan</h1>
    <p>Situs dari Febri Hidayan</p>
</header>

Catatan: Secara pribadi saya tidak pernah menggunakan tag <header> dan sebagai penggantinya saya cukup gunakan tag <nav> untuk navigasi.

Contoh elemen <nav>

Tag <nav> digunakan untuk navigasi pada halaman HTML yang biasanya terdapat logo, nama situs, dan beberapa link navikasi pilihan. Berikut contohnya:

<nav>
    <a href="#">Beranda</a>
    <a href="#">Blog</a>
    <a href="#">Kontak</a>
    <a href="#">Tentang</a>
</nav>

Contoh elemen <main>

Tag <main> sangat penting digunakan untuk meletakan beberapa elemen didalamnya, berikut contohnya:

<main>
    <section>
        <article>
            <!-- elemen lain -->
        </article>
        <article>
            <!-- elemen lain -->
        </article>
    </section>
    <aside>
        <!-- elemen lain -->
    </aside>
</main>

Contoh elemen <mark> dan <time>

Anda bisa menggunakan elemen ini pada tag <p> di dalam sebuah paragraf, berikut contohnya:

<p>
    Belajar <mark>HTML</mark>
    Pukul <time>20.00</time> WIB
</p>

Bonus contoh elemen sematik

Saya contohkan secara lengkap berdasarkan contoh elemen sematik diatas yang dirangkum menjadi satu. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Bonus contoh elemen sematik</title>
</head>
<body>
    <header>
        <h1>Febri Hidayan</h1>
        <p>Situs dari Febri Hidayan</p>
    </header>
    <nav>
        <a href="#">Beranda</a>
        <a href="#">Blog</a>
        <a href="#">Kontak</a>
        <a href="#">Tentang</a>
    </nav>
    <main>
        <section>
            <article>
                <figure>
                    <img src="#" alt="gambar">
                    <figcaption>Ini adalah gambar</figcaption>
                </figure>
                <time datetime="2020-11-04 20:00">Rabu, 04 November 2020</time>
                <h1>Belajar HTML</h1>
                <p>belajar <mark>HTML</mark> mulai saat ini</p>
                <details>
                    <summary>Apa itu elemen sematik?</summary>
                    <p>elemen sematik adalah elemen yang memiliki arti yang bisa dipengerti oleh bahasa mesin dan manusia.</p>
                </details>
            </article>
        </section>
        <aside>
            <h4>Artikel baru</h4>
            <article>
                <h1>Belajar HTML</h1>
                <p>belajar HTML mulai saat ini</p>
            </article>
        </aside>
    </main>
    <footer>
        <p>&copy;2020 Febri Hidayan, hak cipta dilindungi.</p>
    </footer>
</body>
</html>

profil

DITULIS OLEH

Febri Hidayan

Berikan saya sponsor terbaik Anda agar saya tetap semangat menulis artikel yang bermanfaat. Terimakasih 😊