semantic tag
ketika kita ingin memisahkan beberapa section dengan div, kita seperti mengatakan kalau ini sudah aku groupkan tapi tidak isinya tergantung apa yang ada didalamnya. artinya <div></div> ini tidak mendeskripsikan sudah digroupkan ke bagian apa.
bagus dan gak bagus.
bagus karena kita bisa bebas mengatur style dan class nya. tidak bagus karena kita tidak bisa tau bagian apa yang sudah di groupkan, termasuk di dalam mesin pencari, tidak begitu paham bagian apa yang sudah di groupkan.
untuk itu, ada tag yang lebih spesifik untuk menggantikan tag div, yaitu tag section, article, aside, nav, dan footer.
header
tag <header></header> ini biasanya digunakan untuk mengelompokkan konten yang berada di bagian atas, seperti logo, navigasi, atau judul.
<header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<div>
<img src="https://google.com/source-ke-gambar.png" alt="gambar utama" />
</div>
<article>
<h1>judul utama</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum fuga harum
neque nostrum officiis sit. Consectetur dolore ipsa iusto quis voluptatem.
Accusamus ad aliquam doloremque dolores minima nisi praesentium veniam?
</p>
</article>
</header>section
tag <section></section> ini biasanya digunakan untuk mengelompokkan konten yang saling berhubungan, biasanya di dalam section ini terdapat heading atau subheading.
<section>
<h1>Ini judul</h1>
<p>Ini paragraf</p>
</section>
<section>
<h2>ini sub judul</h2>
<p>ini paragraf sub judul</p>
</section>
<section>
<h2>bagian gambar</h2>
<img src="https://google.com/sumber-gambar.png" alt="gambar aja" />
</section>article
tag <article></article> ini biasanya digunakan untuk mengelompokkan konten yang bisa berdiri sendiri, seperti postingan blog, artikel, atau komentar.
<section>
<article>
<h2>bagian gambar</h2>
<img src="https://google.com/sumber-gambar.png" alt="gambar aja" />
</article>
<article>
<h2>ini sub judul</h2>
<p>ini paragraf sub judul</p>
</article>
</section>aside
tag <aside></aside> ini biasanya digunakan untuk mengelompokkan konten yang berhubungan dengan konten utama, seperti sidebar, iklan, atau catatan kaki.
<section>
<article>
<h2>bagian gambar</h2>
<img src="https://google.com/sumber-gambar.png" alt="gambar aja" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci
dolore eaque eveniet exercitationem illum itaque, iure libero magni
necessitatibus odio porro quo, quos repellat ullam? Autem consequuntur
quam voluptates.
</p>
</article>
<aside>
<h2>ini sub judul</h2>
<p>ini paragraf sub judul</p>
</aside>
</section>biasanya kita akan mengatur bagian aside untuk dapat berada di sebelah kiri atau kanan konten utama menggunakan CSS. tau menu samping? itu dia.
nav
tag <nav></nav> ini biasanya digunakan untuk mengelompokkan konten navigasi, seperti menu, link, atau tombol.
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>footer
tag <footer></footer> ini biasanya digunakan untuk mengelompokkan konten penutup, seperti hak cipta, kontak, atau link terkait.
<footer>
<p>© 2021 Qodr, Inc.</p>
<p>
<a href="#home">Home</a> | <a href="#about">About</a> |{" "}
<a href="#contact">Contact</a>
</p>
</footer>biasanya footer akan berada di paling bawah
contoh final
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<div>
<img src="https://google.com/source-ke-gambar.png" alt="gambar utama" />
</div>
<article>
<h1>judul utama</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
distinctio eveniet incidunt nemo nihil nobis non provident recusandae,
vel voluptatibus!
</p>
</article>
</header>
<section>
<article>
<img src="https://google.com/source-ke-gambar.png" alt="gambar utama" />
<h3>judul per article</h3>
<p>Lorem ipsum dolor sit amet.</p>
</article>
<article>
<img src="https://google.com/source-ke-gambar.png" alt="gambar utama" />
<h3>judul per article</h3>
<p>Lorem ipsum dolor sit amet.</p>
</article>
<article>
<img src="https://google.com/source-ke-gambar.png" alt="gambar utama" />
<h3>judul per article</h3>
<p>Lorem ipsum dolor sit amet.</p>
</article>
<article>
<img src="https://google.com/source-ke-gambar.png" alt="gambar utama" />
<h3>judul per article</h3>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</section>
<footer>
<p>© 2021 Qodr, Inc.</p>
<p>
<a href="#home">Home</a> | <a href="#about">About</a> |{" "}
<a href="#contact">Contact</a>
</p>
</footer>
</body>
</html>