Semantic
Semantic pada HTML adalah tentang menggunakan elemen HTML dengan tujuan yang
jelas dan deskriptif. Dalam hal ini, elemen HTML digunakan untuk memberi
tahu browser dan pengguna tentang makna dan struktur dari konten halaman
web.
Contoh dari elemen HTML semantik adalah <header>, <footer>,
<nav>, <article>, <section>, <aside>, <main>,
<figure>, <figcaption>, dan banyak lagi. Dengan menggunakan
elemen semantik ini, halaman web dapat menjadi lebih mudah dipahami oleh
mesin pencari, pengguna, dan teknologi bantu.
Dalam pengembangan web modern, penggunaan elemen semantik sangat dianjurkan
untuk memperbaiki aksesibilitas dan optimasi mesin pencari, serta membantu
memisahkan presentasi dari struktur konten.
Semantic HTML 5
Semantic element adalah element yang memiliki arti, sebelum HTML 5
setiap kita ingin membuat layout di HTML, kita biasanya hanya menggunakan
tag div dan span, hal ini kadang tidak memiliki arti.
Di HTML 5, terdapat tag-tag seperti div dan span, namun lebih memiliki arti,
oleh karena itu kita direkomendasikan menggunakan semantic tag agar kode
HTML yang kita buat lebih mudah untuk dibaca dan dimengerti.
Semantic Tag
- Tag article, untuk konten artikel
- Tag aside, untuk bagian disamping konten, misal sidebar
- Tag figure, untuk konten ilustrasi, diagram, foto, dan lain-lain
- Tag figurecaption, untuk keterangan tag figure
- Tag footer, untuk bagian footer dokumen
- Tag header, untuk bagian header dokumen
- Tag main, untuk konten utama dokumen
- Tag mark, untuk bagian yang ditandai atau highlight
- Tag nav, untuk bagian navigasi link
- Tag section, untuk section di dokumen
- Tag details, untuk bagian yang lebih detail yang bisa pengguna lihat
- Tag summary, untuk heading untuk tag details
- Tag time, untuk konten waktu/tanggal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1>Judul Halaman</h1>
</header>
<nav>
<ul>
<li><a href="">Beranda</a></li>
<li><a href="">Artikel</a></li>
<li><a href="">Kontak Kami</a></li>
</ul>
</nav>
<section>
<article>
<h1>Belajar HTML</h1>
<p>Isi Belajar HTML</p>
</article>
<article>
<h1>Belajar CSS</h1>
<p>Isi Belajar CSS</p>
</article>
</section>
<footer>
<p>Powered by Bikin Balik <time datetime="2023">2023</time></p>
</footer>
</body>
</html>
