Apa fungsi dari semantic pada Web Development
Apakah kamu sudah mengenal HTML5 dan struktur web-nya? Jika belum, jangan khawatir karena kita telah membahasnya dalam artikel Belajar Structur HTML5 sebelumnya. Namun, tahukah kamu bahwa terdapat perbedaan mencolok pada struktur web ketika menggunakan pendekatan Semantic HTML?
Materi kali ini akan membahas tentang Fungsi Semantic dalam HTML dan bagaimana tag-tag baru dapat membedakan struktur web sebelum dan sesudah menggunakan Semantic HTML. Dengan menggunakan tag-tag seperti <header>, <nav>, <main>, <section>, <article>, <aside>, dan <footer>, kita bisa dengan mudah membuat struktur web yang lebih terstruktur dan bermakna.
Jangan remehkan kekuatan Semantic HTML dalam membuat website yang SEO-friendly dan modern. Dengan memanfaatkan elemen-elemen Semantic HTML, website kamu akan lebih mudah dimengerti dan diakses oleh mesin pencari dan pengunjung. Jadi, ayo belajar bersama-sama!
Macam-macam Tag Semantic pada HTML5
Apakah kamu pernah memperhatikan perbedaan tag-tag pada elemen web? Jika belum, mari kita lihat gambar di atas. Terlihat jelas bahwa Semantic HTML memiliki tag yang lebih kaya dan beragam, seperti <header>, <nav>, <main>, <section>, <article>, <aside>, dan <footer>. Masing-masing tag tersebut memiliki fungsi khusus untuk memudahkan pengelompokan elemen web secara lebih jelas dan terstruktur.
Misalnya, tag <header> digunakan untuk menandai area kepala atau bagian atas dari halaman web, sedangkan tag <nav> digunakan untuk menunjukkan area navigasi utama. Tag <section> digunakan untuk membagi halaman web menjadi beberapa bagian, sementara tag <article> digunakan untuk menunjukkan konten utama dari sebuah halaman. Sedangkan tag <aside> digunakan untuk menunjukkan konten yang terkait dengan konten utama, dan tag <footer> digunakan untuk menunjukkan bagian bawah atau penutup halaman web.
Header
Apakah kamu ingin membuat website yang lebih menarik dan terstruktur? Salah satu caranya adalah dengan menggunakan tag Semantic HTML seperti <header>. Tag ini sangat berguna untuk mengelompokkan bagian-bagian tertentu pada halaman web, termasuk header yang berisi judul dan logo website kamu.
Contohnya, jika kamu ingin membuat sebuah halaman web dengan header yang menarik dan mudah dipahami, kamu bisa menggunakan tag <header> sebagai wadah untuk menempatkan elemen-elemen header tersebut. Berikut adalah contoh sederhana penggunaan tag <header>:
<header>
<h1>Ini Judul Website</h1>
<img src="logo.png" alt="Logo Website">
</header>Dengan menggunakan tag <header>, kamu dapat memisahkan bagian header dari konten utama pada halaman web, sehingga website kamu menjadi lebih terstruktur dan mudah dimengerti oleh mesin pencari dan pengunjung
<body>
<header>
<h1>IDCSharp.com</h1>
<p>Mari kita mulai belajar bahasa HTML bersama untuk mengembangkan kemampuan membuat website</p>
<nav>
<ul>
<li><a href="#html">Geografis</a></li>
<li><a href="#css">CSS</a></li>
</ul>
</nav>
</header>
</body>Main
Apakah kamu tahu bahwa tag Semantic HTML seperti <main> dapat membantu memudahkan pembacaan dan memahami struktur website kamu? Tag ini sangat berguna untuk mengelompokkan konten utama atau inti dari sebuah halaman web.
Jika kamu ingin membuat sebuah halaman web yang mudah dipahami dan menarik, kamu bisa memanfaatkan tag <main> sebagai wadah untuk menempatkan elemen-elemen utama pada halaman web kamu. Selain itu, tag <main> dapat digabungkan dengan tag-tag lain seperti <section>, <article>, dan lain sebagainya untuk membangun struktur website yang lebih terstruktur.
Berikut adalah contoh sederhana penggunaan tag <main> pada HTML5:
<main>
<section>
<h2>Ini adalah judul section 1</h2>
<p>Ini adalah konten section 1</p>
</section>
<section>
<h2>Ini adalah judul section 2</h2>
<p>Ini adalah konten section 2</p>
</section>
</main>Dengan menggunakan tag <main>, kamu dapat memisahkan konten utama dari konten lain pada halaman web.
Nav
Jika kamu ingin membuat website yang mudah dinavigasikan oleh pengunjung, kamu bisa memanfaatkan tag Semantic HTML seperti <nav>. Tag ini digunakan untuk mengelompokkan sebuah navigasi penting, seperti navigasi utama pada sebuah website. Dengan menggunakan tag <nav>, kamu dapat memisahkan bagian navigasi dari konten lain pada halaman web.
Sebaiknya kamu gunakan tag <nav> untuk menu utama penting seperti pada bagian <header>, karena navigasi ini biasanya menjadi salah satu elemen yang paling penting dalam sebuah website.
Berikut adalah contoh sederhana penggunaan tag <nav> pada HTML5:
Dalam contoh di atas, tag <nav> digunakan untuk membungkus menu navigasi utama pada bagian <header> website.
<header>
<nav>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
</header>Dengan memanfaatkan tag Semantic HTML seperti <nav>, website kamu akan terlihat lebih terstruktur.
Article
Jika kamu ingin membuat website yang kaya akan konten, tag <article> bisa menjadi solusinya. Tag ini digunakan untuk membungkus konten web yang merupakan bagian dari sebuah artikel. Mulai dari artikel blog, komentar, forum post, dan lain-lain.
Dengan menggunakan tag <article>, kamu dapat memisahkan artikel dari konten lain pada halaman web. Hal ini akan membuat website kamu terlihat lebih terstruktur dan mudah dimengerti oleh mesin pencari dan pengunjung.
Pada umumnya, tag <article> ditempatkan di dalam tag <main> atau <section>. Ini karena konten artikel biasanya merupakan bagian dari inti halaman web.
Berikut adalah contoh sederhana penggunaan tag <article> pada HTML5:
<main>
<section>
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel...</p>
</article>
</section>
</main>Dalam contoh di atas, tag <article> digunakan untuk membungkus konten artikel pada bagian <section> yang berada di dalam tag <main>.
Aside
Mungkin kamu belum terlalu akrab dengan tag <aside>, tapi jangan khawatir, saya akan memberikan penjelasan yang mudah dipahami. Tag <aside> memiliki dua fungsi yang berbeda tergantung pada tempat penggunaannya. Pertama, jika diletakkan di dalam <article>, tag ini dapat digunakan untuk menampilkan konten yang berkaitan dengan artikel tersebut. Kedua, jika diletakkan di luar <article>, tag ini bisa digunakan untuk menampilkan konten yang berkaitan dengan halaman tersebut secara umum. Berikut ini contoh penggunaan tag <aside> yang simpel namun efektif.
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel...</p>
<aside>
<h3>Baca Juga:</h3>
<ul>
<li><a href="#">Artikel Terkait 1</a></li>
<li><a href="#">Artikel Terkait 2</a></li>
<li><a href="#">Artikel Terkait 3</a></li>
</ul>
</aside>
</article><main>
<section>
<h2>Section 1</h2>
<p>Isi section 1...</p>
</section>
<section>
<h2>Section 2</h2>
<p>Isi section 2...</p>
</section>
<aside>
<h3>Iklan:</h3>
<img src="iklan.jpg" alt="Iklan">
</aside>
</main>Dalam contoh pertama, tag <aside> digunakan untuk menampilkan daftar artikel terkait di dalam artikel utama. Sedangkan pada contoh kedua, tag <aside> digunakan untuk menampilkan iklan di samping konten utama halaman.
Section
Tag <section> adalah salah satu elemen HTML5 yang berfungsi untuk mengelompokkan bagian-bagian pada struktur website. Fungsinya mirip seperti sebuah wadah yang dapat digunakan untuk mengumpulkan artikel, galeri, atau bagian-bagian lainnya yang perlu dikelompokkan.
Dengan menggunakan tag <section>, website dapat memiliki struktur yang lebih teratur dan mudah dipahami oleh pengunjung. Berikut adalah contoh sederhana penggunaan tag <section> pada HTML5.
Berikut adalah contoh penggunaan tag <section> untuk mengelompokkan konten pada sebuah halaman web:
<section>
<h2>Artikel Terbaru</h2>
<article>
<h3>Judul Artikel Pertama</h3>
<p>Isi artikel pertama...</p>
</article>
<article>
<h3>Judul Artikel Kedua</h3>
<p>Isi artikel kedua...</p>
</article>
</section>
<section>
<h2>Galeri Foto</h2>
<img src="foto1.jpg" alt="Foto 1">
<img src="foto2.jpg" alt="Foto 2">
<img src="foto3.jpg" alt="Foto 3">
</section>Pada contoh di atas, tag <section> digunakan untuk mengelompokkan konten menjadi dua bagian, yaitu artikel terbaru dan galeri foto. Masing-masing bagian kemudian diisi dengan elemen-elemen HTML yang sesuai, seperti tag <article> untuk artikel dan tag <img> untuk gambar. Dengan menggunakan tag <section>, struktur halaman web dapat lebih jelas dan terorganisir dengan baik.
Footer
Tag <footer> menjadi wadah untuk memasukkan segala hal yang berhubungan dengan bagian bawah dari sebuah halaman web, seperti hak cipta, informasi tentang pengembang web, atau tautan ke halaman sosial media. Selain itu, footer juga bisa digunakan sebagai tempat untuk menyertakan catatan kaki pada artikel atau bagian tertentu dari halaman. Berikut adalah contoh sederhana penggunaan tag <footer> pada HTML.
Berikut contoh penggunaan tag <footer> pada sebuah halaman web:
<footer>
<p>© 2023 - Nama Website</p>
<ul>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kebijakan Privasi</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<div class="social-media">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</footer>Pada contoh di atas, tag <footer> digunakan untuk membungkus konten bagian bawah dari halaman web. Terdapat beberapa konten yang disertakan dalam tag <footer>, seperti hak cipta, daftar link menu, dan tautan ke media sosial. Dengan penggunaan tag <footer>, konten bawah halaman web menjadi lebih terstruktur dan mudah dibaca oleh pengunjung.
Implementasi Semantic pada Pengembangan website
Berikut merupakan implementasi salah satu penggunaan semantic pada pengembangan Website di Project yang nyata :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Welcome to My Homepage</h1>
</header>
<main>
<section>
<h2>Recent Blog Posts</h2>
<article>
<h3><a href="#">10 Tips for Working from Home</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, elit eu sollicitudin ullamcorper, nibh nibh pellentesque magna, eu eleifend felis felis vitae libero.</p>
</article>
<article>
<h3><a href="#">The Benefits of Meditation</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, elit eu sollicitudin ullamcorper, nibh nibh pellentesque magna, eu eleifend felis felis vitae libero.</p>
</article>
</section>
<aside>
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, elit eu sollicitudin ullamcorper, nibh nibh pellentesque magna, eu eleifend felis felis vitae libero.</p>
<h3>Connect with Me</h3>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 My Homepage</p>
</footer>
</body>
</html>Kesimpulan
Masing-masing elemen pada HTML5 mempunyai peranan penting dalam pembuatan halaman web, antara lain:
- <header> untuk memuat bagian header halaman web.
- <main> untuk memuat konten utama atau inti halaman web.
- <nav> untuk mengelompokkan navigasi penting dalam halaman web.
- <article> untuk memuat konten web yang merupakan bagian dari artikel.
- <aside> untuk menandai bagian web yang bukan konten utama.
- <section> untuk mengelompokkan bagian-bagian dari struktur web.
- <footer> untuk memuat bagian bawah website.
Dengan menggunakan elemen-elemen HTML5 secara benar dan konsisten, akan memudahkan pengguna untuk memahami konten dan struktur halaman web yang dibuat. Hal ini dapat membantu dalam meningkatkan user experience dan SEO pada halaman web tersebut.
