Tutorial HTML 13 : Belajar Elemen Semantik

Tutorial HTML 13 : Belajar Elemen Semantik

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

Lalu, muncul pertanyaan:

Bagaimana cara menata elemen-elemen ini agar terlihat menarik?

Jawabannya adalah:

Kita memerlukan sebuah layout.

Di HTML, terdapat beberapa elemen yang dirancang khusus untuk tujuan ini. Elemen-elemen tersebut adalah elemen semantik seperti <header>, <aside>, <footer>, <article>, dan lain-lain.

Elemen semantik tidak hanya digunakan untuk menciptakan layout. Mereka juga berfungsi untuk menstrukturkan konten dengan cara yang lebih bermakna dan mudah dipahami, baik oleh pengguna maupun mesin pencari.

Untuk lebih memahami penggunaannya, mari kita pelajari lebih detail.

Apa itu Elemen Semantik?

Pada awal kemunculan HTML, konsep elemen semantik belum ada. Dalam upaya untuk membuat layout halaman web, para pengembang sering menggunakan tag yang tidak semestinya.

Misalnya, banyak yang menggunakan tag `<table>` atau `<div>` untuk mengatur tata letak halaman. Meskipun kedua tag tersebut memang memungkinkan untuk membuat layout yang diinginkan, pendekatan ini tidak ideal. Mengapa? Karena penggunaan yang tidak semestinya ini membuat kode HTML menjadi sulit dibaca dan dipahami, baik oleh manusia maupun oleh mesin pencari.

Sebagai solusi atas masalah ini, elemen semantik diperkenalkan pada HTML5.

 

Pengertian Elemen Semantik

Elemen semantik adalah elemen-elemen HTML yang dirancang untuk menyatakan makna atau tujuan dari elemen itu sendiri. Misalnya, tag `<footer>` digunakan untuk membuat elemen footer atau bagian bawah dari sebuah halaman web. Dengan adanya elemen semantik, kita tidak akan lagi salah dalam menggunakan tag, karena setiap tag sudah memiliki tujuan yang jelas dan spesifik.

Menggunakan tag semantik membantu meningkatkan keterbacaan dan aksesibilitas kode HTML. Misalnya, ketika mesin pencari atau pembaca layar menemukan tag `<footer>`, mereka segera memahami bahwa elemen ini adalah bagian bawah dari halaman web, tanpa perlu menafsirkan struktur atau konten lebih dalam.

 

Manfaat Elemen Semantik

1. Keterbacaan Kode: Dengan elemen semantik, kode HTML menjadi lebih mudah dibaca dan dipahami oleh pengembang. Ini penting saat bekerja dalam tim atau saat pengembang lain harus membaca kode kita di masa mendatang.
2. SEO: Mesin pencari seperti Google menggunakan elemen semantik untuk lebih memahami konten dan struktur halaman web. Ini dapat membantu meningkatkan peringkat halaman dalam hasil pencarian.
3. Aksesibilitas: Elemen semantik membantu alat bantu seperti pembaca layar untuk memahami dan menyajikan konten web dengan lebih baik kepada pengguna yang memiliki keterbatasan visual.
4. Pengembangan Berkelanjutan: Dengan struktur kode yang lebih jelas dan terorganisir, pengembangan dan pemeliharaan website menjadi lebih mudah dan efisien.

 

 Daftar Elemen Semantik

Berikut ini adalah beberapa elemen semantik yang tersedia di HTML5, beserta kegunaannya:

• `<article>` — Digunakan untuk membuat elemen artikel, cocok untuk konten mandiri yang bisa dibagikan atau dipublikasikan secara terpisah.
• `<aside>` — Digunakan untuk membuat elemen bagian samping, seperti sidebar atau informasi tambahan yang terkait dengan konten utama.
• `<details>` — Digunakan untuk membuat elemen yang bisa diperluas untuk menampilkan detail tambahan, sering digunakan untuk konten spoiler atau informasi tambahan.
• `<figcaption>` — Digunakan untuk membuat teks keterangan pada gambar yang ditempatkan dalam elemen `<figure>`.
• `<figure>` — Digunakan untuk mengelompokkan konten ilustratif, seperti gambar, diagram, atau cuplikan kode.
• `<footer>` — Digunakan untuk membuat elemen bagian bawah dari web, biasanya berisi informasi seperti hak cipta, tautan penting, atau informasi kontak.
• `<header>` — Digunakan untuk membuat elemen kepala halaman, sering kali berisi judul, logo, dan navigasi utama.
• `<main>` — Digunakan untuk menentukan konten utama dari dokumen HTML, yang harus unik dan tidak boleh berisi elemen navigasi atau konten berulang.
• `<mark>` — Digunakan untuk menandai teks yang dianggap penting atau relevan dalam konteks tertentu.
• `<nav>` — Digunakan untuk membuat elemen navigasi, berisi tautan-tautan penting yang membantu pengguna menavigasi situs web.
• `<section>` — Digunakan untuk membuat bagian dalam artikel atau halaman, seperti bab dalam sebuah buku, yang berisi konten yang terkait secara tematis.
• `<summary>` — Digunakan sebagai judul yang dapat diklik untuk menampilkan atau menyembunyikan konten yang ada di dalam elemen `<details>`.
• `<time>` — Digunakan untuk menunjukkan waktu atau tanggal tertentu.

 

Dengan memahami dan menggunakan elemen-elemen semantik ini, kita dapat menciptakan struktur HTML yang lebih terorganisir dan mudah dipahami. Ini tidak hanya membantu manusia dalam membaca dan memahami kode, tetapi juga mesin pencari dan alat bantu lainnya dalam menafsirkan konten web dengan lebih baik. Penggunaan elemen semantik merupakan praktik terbaik dalam pengembangan web modern yang mendukung pembuatan situs web yang lebih responsif, terstruktur, dan mudah diakses.

 

Baca Juga

• Html Cara Menampilkan Video
• Html Cara Membuat Form

 

Mengapa harus menggunakan elemen semantik ?

Mengapa harus menggunakan elemen semantik? Salah satu keuntungannya adalah kemudahan dalam membaca dokumen HTML, baik oleh manusia maupun mesin.

Mari kita perhatikan contoh kode berikut:

 

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

 

Kode di atas adalah contoh layout yang dibuat menggunakan tag `<div>`. Meskipun tag `<div>` berguna untuk membungkus elemen HTML, namun kita mungkin akan mengalami kesulitan saat mencoba memahami struktur kode tersebut.

Meskipun kita memberikan nama class yang deskriptif pada setiap elemen `<div>`, namun semakin banyaknya elemen `<div>` akan membuat kode semakin sulit dibaca dan dipahami.

Saat kita melihat kode tersebut, kita bisa melihat beberapa elemen seperti header, artikel, dan footer. Namun, semakin banyaknya elemen `<div>`, semakin sulit bagi kita untuk memahami hubungan antar elemen dan struktur keseluruhan dari halaman web tersebut.

Dengan menggunakan elemen semantik, kita dapat membuat kode HTML yang lebih mudah dibaca dan dipahami. Misalnya, dengan menggunakan tag `<header>`, `<article>`, dan `<footer>`, kita langsung tahu fungsi dan tujuan dari setiap bagian halaman web tersebut.

Dengan demikian, penggunaan elemen semantik tidak hanya membantu meningkatkan keterbacaan kode, tetapi juga mempermudah dalam pengembangan, pemeliharaan, dan pemahaman struktur dari sebuah halaman web.

 

Membuat Layout dengan Elemen Semantik

Sekarang, mari kita belajar bagaimana membuat layout menggunakan elemen semantik. Ikuti langkah-langkah berikut untuk membuat file HTML yang terstruktur dengan baik menggunakan elemen semantik.

1. Buat File Baru:

   Buat file baru dengan nama `layout.html`.

 

2. Isi File dengan Kode HTML Berikut:

 

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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>


  <main>
    <article>
      <h2>Tutorial Semantik Elemen untuk Pemula</h2>
      <p>Elemen semantik adalah elemen yang memiliki makna dan tujuan khusus. Penggunaan elemen semantik membuat kode HTML lebih mudah dibaca dan dipahami, serta menghindari penyalahgunaan tag. Selain itu, elemen semantik juga baik untuk SEO dan dapat meningkatkan aksesibilitas.</p>
    </article>

   
    <aside>
      <h3>Informasi Tambahan</h3>
      <p>Gunakan elemen semantik untuk meningkatkan struktur dan keterbacaan kode HTML Anda.</p>
    </aside>
  </main>


  <footer>
    <p>Copyright &copy; 2024 by Petani Kode</p>
  </footer>


</body>
</html>
```

 

3. Penjelasan Kode:

   - DOCTYPE dan Elemen HTML Dasar:

     

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

     Baris ini mendefinisikan dokumen sebagai HTML5 dan menentukan bahasa dokumen sebagai bahasa Inggris.

 

   - Head Section:

     

```html
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Contoh Layout dengan Elemen Semantik</title>
     </head>
     ```

     Bagian ini berisi metadata dokumen seperti pengaturan karakter dan judul halaman.

 

   - Header:

   

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

     Elemen `<header>` digunakan untuk bagian kepala halaman, biasanya berisi judul atau logo.

 

   - Navigasi:

     

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

     Elemen `<nav>` digunakan untuk bagian navigasi, berisi tautan-tautan penting.

 

   - Main Content:

     

```html
     <main>
       <article>
         <h2>Tutorial Semantik Elemen untuk Pemula</h2>
         <p>...</p>
       </article>
   

       <aside>
         <h3>Informasi Tambahan</h3>
         <p>...</p>
       </aside>
     </main>
     ```

     Elemen `<main>` berisi konten utama halaman. Di dalamnya ada `<article>` untuk konten artikel dan `<aside>` untuk informasi tambahan atau sidebar.

 

   - Footer:

     

```html
     <footer>
       <p>Copyright &copy; 2024 by Petani Kode</p>
     </footer>
     ```

     Elemen `<footer>` digunakan untuk bagian bawah halaman, berisi informasi seperti hak cipta.

 

4. Buka File dengan Web Browser:

   Setelah menyimpan file `layout.html`, buka file tersebut dengan web browser untuk melihat hasilnya. Anda akan melihat struktur halaman yang terorganisir dengan baik, berkat penggunaan elemen semantik.

Menggunakan elemen semantik tidak hanya membuat kode lebih mudah dibaca dan dipahami, tetapi juga meningkatkan SEO dan aksesibilitas, yang sangat penting untuk pengembangan web modern.

Published on May 28, 2024
Last updated on June 03, 2026