Menulis kode dengan semantik HTML adalah praktik yang penting dalam membangun situs web yang dapat diakses dengan baik. Dengan menggunakan elemen HTML yang sesuai dengan arti dan tujuan mereka, kita dapat meningkatkan aksesibilitas situs web dan memudahkan mesin pencari serta pembaca layar untuk memahami struktur dan konten halaman. Berikut adalah contoh penulisan kode dengan semantik HTML untuk sebuah artikel:
<!DOCTYPE html>
<html>
<head>
<title>Judul Artikel Kreatif</title>
</head>
<body>
<header>
<h1>Judul Artikel Kreatif</h1>
<p>Penulis: John Doe</p>
</header>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<article>
<h2>Pengantar</h2>
<p>Ini adalah pengantar artikel kreatif yang menarik.</p>
<h2>Bagian Pertama</h2>
<p>Isi bagian pertama artikel.</p>
<h2>Bagian Kedua</h2>
<p>Isi bagian kedua artikel.</p>
<h2>Kesimpulan</h2>
<p>Ini adalah kesimpulan dari artikel kreatif.</p>
</article>
<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>Hak Cipta © 2023 Nama Situs. All rights reserved.</p>
</footer>
</body>
</html>Dalam contoh di atas, kode HTML ditulis dengan semantik yang sesuai untuk setiap elemen. Beberapa elemen yang digunakan antara lain:
<header>: Digunakan untuk bagian kepala artikel yang berisi judul dan informasi penulis.<nav>: Digunakan untuk elemen navigasi yang berisi daftar tautan menu.<article>: Digunakan untuk mengelompokkan konten artikel yang terkait.<h1>,<h2>,<h3>: Digunakan untuk memberikan hierarki pada judul-judul dalam artikel.<p>: Digunakan untuk paragraf teks dalam artikel.<aside>: Digunakan untuk menyertakan konten terkait artikel, seperti daftar artikel terkait.<footer>: Digunakan untuk bagian bawah halaman yang berisi informasi hak cipta dan atribusi.
Dengan menggunakan elemen HTML yang semantik, kita dapat meningkatkan pemahaman struktur dan konten halaman oleh pembaca dan mesin pencari. Hal ini membantu dalam meningkatkan aksesibilitas situs web dan memberikan pengalaman yang lebih baik kepada pengguna.
