Membuat Struktur Halaman Web dengan Menggunakan Elemen Semantik HTML #9

HTML memiliki beberapa elemen semantik yang dapat kita gunakan untuk membuat struktur halaman web yang baik dan mudah dipahami oleh mesin pencari. Elemen-elemen semantik ini memiliki makna tersendiri dan membantu mesin pencari untuk menentukan bagian mana dari halaman web yang merupakan bagian penting dan bagian mana yang tidak penting.

Berikut adalah beberapa elemen semantik HTML yang sering digunakan:

Header (<header>) - Elemen ini digunakan untuk membuat bagian header dari halaman web, biasanya berisi informasi seperti logo, judul halaman, dan navigasi.
Main (<main>) - Elemen ini digunakan untuk membuat bagian utama dari halaman web, biasanya berisi konten utama seperti artikel, produk, atau halaman lainnya.
Footer (<footer>) - Elemen ini digunakan untuk membuat bagian footer dari halaman web, biasanya berisi informasi seperti kontak, tautan, dan hak cipta.
Article (<article>) - Elemen ini digunakan untuk membuat sebuah bagian konten independen yang bisa dipisahkan dari halaman lainnya, seperti posting blog atau berita.
Section (<section>) - Elemen ini digunakan untuk membuat bagian yang berisi konten yang berhubungan, seperti bagian tentang, bagian produk, atau bagian lainnya.

Untuk menggunakan elemen-elemen semantik ini, kita tinggal membungkus konten kita dengan elemen yang sesuai. Berikut adalah contoh bagaimana membuat struktur halaman web dengan menggunakan elemen-elemen semantik:

<header>
<h1>Judul Halaman</h1>
<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</nav>
</header>

<main>
<article>
    <h2>Judul Artikel</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius sem eget iaculis rutrum. Morbi id efficitur libero.</p>
</article>
</main>