Skip to main content

A.6. Semantic HTML

A.6.1. Apa Itu Semantic HTML?​

Semantic dalam HTML adalah elemen-elemen yang memberikan makna atu konteks spesifik bagi konten di dalam sebuah halaman website atau dokumen HTML.

Contohnya, Ketika ada sebuah elemen pada halaman website yang dibungkus dengan tag nav, Maka bermakna bahwasannya elemen tersebut merupakan sebuah navigasi.

A.6.2. Manfaat Semantic HTML​

Nah tapi apasih manfaat Semantic HTML?🤔

jadi ada beberapa manfaat ni temen-temen ketika kita menuliskan kode HTML kita dengan Semantic. Nah ini beberapa contoh manfaatnya:

  • SEO (Search Engine Optimization): Mesin pencari dapat dengan mudah memahami konten dan struktur website dengan baik, Sehingga dapat meningkatkan peringkat halaman dalam hasil pencarian.
  • Pemeliharaan Kode (Code Maintenance): Kode jadi lebih mudah di baca oleh pengembang lain, Yang memudahkan proses pemeliharaan dan pengembangan lebih lanjut.
  • Kerapihan Kode: Kode menjadi lebih rapih dan lebih terstruktur.

Masih ada banyak manfaat lain ketika kita menerapkan Semantic HTML dalam membuat kerangka sebuah halama website dengan menggunakan HTML, untuk lebih lengkapnya temen-temen bisa lakukan eksplorasi lebih lanjut ya~

A.6.3. Studi Kasus​

Pada chapter ini kita akan membuat sebuah kerangka website untuk blog pribadi, tentunya kita akan coba untuk menuliskan kodenya dengan Semantic ya😁.

Pertama, temen-temen perlu memulai dengan struktur dasar HTML. Di sini, kita akan menggunakan elemen-elemen seperti <html>, <head>, dan <body> untuk memulai.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Blog</title>
  </head>
  <body></body>
</html>

Selanjutnya, tambahkan elemen <header> yang akan berfungsi sebagai bagian atas halaman atau header dari website. Di sini, temen-temen bisa menyertakan logo, judul situs, dan navigasi utama.

<header>
  <h1>Judul Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

Bagian utama dari konten website biasanya ditempatkan dalam elemen <main>. Di dalamnya, temen-temen bisa menggunakan <article> untuk membungkus setiap bagian konten atau artikel yang temen-temen tulis.

<main>
  <article>
    <h2>Judul Artikel Pertama</h2>
    <p>Ini adalah paragraf pertama dari artikel.</p>
  </article>

  <article>
    <h2>Judul Artikel Kedua</h2>
    <p>Ini adalah paragraf pertama dari artikel kedua.</p>
  </article>
</main>

Jika temen-temen ingin menambahkan sidebar, gunakan elemen <aside>. Sidebar ini bisa berisi informasi tambahan seperti iklan, tautan ke artikel terkait, atau widget media sosial.

<aside>
  <h3>Artikel Terkait</h3>
  <ul>
    <li><a href="#">Artikel 1</a></li>
    <li><a href="#">Artikel 2</a></li>
    <li><a href="#">Artikel 3</a></li>
  </ul>
</aside>

Terakhir, tambahkan elemen <footer> untuk menyertakan informasi penutup seperti hak cipta, tautan kebijakan privasi, atau informasi kontak.

<footer>
  <p>&copy; 2024 Judul Website. Semua Hak Cipta Dilindungi.</p>
</footer>

Setelah semua elemen ditambahkan, hasil akhirnya akan terlihat seperti ini:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Blog</title>
  </head>

  <body>
    <header>
      <h1>Judul Website</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Judul Artikel Pertama</h2>
        <p>Ini adalah paragraf pertama dari artikel.</p>
      </article>
      <article>
        <h2>Judul Artikel Kedua</h2>
        <p>Ini adalah paragraf pertama dari artikel kedua.</p>
      </article>
    </main>

    <aside>
      <h3>Artikel Terkait</h3>
      <ul>
        <li><a href="#">Artikel 1</a></li>
        <li><a href="#">Artikel 2</a></li>
        <li><a href="#">Artikel 3</a></li>
      </ul>
    </aside>

    <footer>
      <p>&copy; 2024 Myblog. Semua Hak Cipta Dilindungi.</p>
    </footer>
  </body>
</html>

Sekarang, coba temen-temen buka di web browser masing-masing dan lihat hasilnya maka akan tampil seperti ini:

Output

Nah, sekarang temen-temen sudah berhasil membuat kerangka blog sederhana. Yeay!🙌

Jadi sederhananya menurut penulis, Semantic HTML adalah konsep dimana kita menuliskan tag HTML sesuai dengan representasinya atau peruntukanya. Koreksi jika salah ya, hehe:D

Hmm tapi website kita masih terlihat kurang cantik ya?🤔.

Sebelumnya saya ucapkan selamat buat temen-temen karena sudah menyelesaikan chapter A. HTML 🙌✨. Tapi website yang kita buat masih terlihat sangat sederhana sekali ya? nah, selanjutnya kita akan belajar mengenai cara membuat website yang kita buat menjadi lebih cantik dengan menggunakan CSS.

Apa itu CSS? Mengapa kita harus menggunakan CSS? wah pasti penasaran kan kan?. Yuk kita bahas di chapter selanjutnya yaitu B. CSS. Let's go temen-temen!

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/a-html/chapter-A.6-semantic-html