Sudahkah kamu kenal HTML, teman-teman? Jika belum, jangan khawatir, saya akan membantu kamu memahaminya. Saat ini, saya akan memperkenalkan materi yang sangat penting dalam HTML5, yaitu Semantic HTML Tag atau Struktur Halaman Web. Sebelum kita mulai, mari kita bahas terlebih dahulu apa itu HTML5 agar kamu lebih memahami materi yang akan kita pelajari nanti. Dengan menggunakan Semantic HTML Tag, kamu dapat memperbaiki tampilan website kamu sehingga lebih menarik dan mudah dipahami oleh pengunjung. Selain itu, menggunakan tag HTML5 yang tepat juga dapat membantu kamu dalam SEO, sehingga website kamu lebih mudah ditemukan di mesin pencari. Jadi, jangan lewatkan materi yang akan sangat bermanfaat ini!
Apa itu HTML5?
Halo, sudahkah kalian mengenal HTML, teman-teman? Bagi yang belum, jangan khawatir, saya akan memberikan gambaran singkat tentang apa itu HTML. Sekarang, saya akan mengajarkan kalian materi penting dalam HTML5, yaitu Belajar Structur Halaman Web dengan Semantic HTML Tag. Tapi sebelum kita terjun ke dalamnya, ada baiknya kita mengenal lebih dalam apa itu HTML5.
HTML5 sendiri adalah revisi kelima dari bahasa markup standar, HTML. HTML memungkinkan kita untuk membangun halaman website dengan tampilan yang menarik dan interaktif. Tahun 1990 menjadi awal mula kemunculan HTML, dan sejak itu terus mengalami penyempurnaan seperti HTML2 pada tahun 1995, HTML3 pada tahun 1997, HTML4 pada tahun 2000, dan HTML5 pada tahun 2009 hingga saat ini.
Setelah sedikit berkenalan dengan HTML5, mari kita masuk ke inti materi dengan Belajar Structur Halaman Web menggunakan Semantic HTML Tag. Dengan menggunakan tag HTML5 yang tepat, kamu dapat membuat tampilan website kamu lebih menarik, mudah dipahami, dan tentunya SEO friendly agar lebih mudah ditemukan di mesin pencari
Struktur Web Menggunakan Generic Element Div
Sebelum adanya semantic, para web developer masih meraba-raba penggunaan tag untuk membuat struktur web yang lengkap. Banyak dari mereka yang menggunakan generic element <div> dengan atribut class atau id untuk mengelompokkan elemen HTML seperti header, navigasi, dan artikel. Hasilnya, struktur website terlihat acak-acakan dan jauh dari kesan profesional.
Namun, kini dengan kehadiran Semantic, semuanya berubah. HTML5 dilengkapi dengan Semantic HTML Tag yang memungkinkan para web developer untuk menentukan struktur website dengan lebih baik dan jelas. Tidak lagi menggunakan <div> yang membuat kode terlihat tidak bermakna.
Mari kita lihat contoh sederhana sebuah website sebelum penggunaan Semantic. Tag <div> dengan atribut class atau id digunakan untuk mengelompokkan setiap elemen HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sebelum Mengenal HTML5</title>
</head>
<body>
<div id="header">
<h1>Ga Kenal HTML5</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tentang Kami</a></li>
</ul>
</div>
<div id="content">
<div id="article_1">
<div id="header_article_1">
<h1>Belajar Pemrograman di IDCSharp</h1>
</div>
<p>Belajar HTML</p>
</div>
<div id="article_2">
<div id="header_article_2">
<h1>Belajar CSS</h1>
</div>
<p>Belajar CSS</p>
</div>
</div>
<div id="sidebar">
<h1>Artikel Terbaru</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="footer">
<p>Footer - Copyright idcsharp.com</p>
</div>
</body>
</html>Struktur Web Menggunakan Semantic HTML
Setelah mempelajari HTML5, para web developer tidak lagi menggunakan generic element <div> secara sembarangan. Mereka kini menggunakan elemen Semantic HTML yang lebih tepat dan bermakna untuk memisahkan dan mengelompokkan elemen HTML pada struktur website.
Elemen-elemen baru seperti <header>, <nav>, <main>, <section>, <article>, <aside>, dan <footer> menjadi elemen yang sering digunakan untuk membangun struktur website dengan HTML5. Dengan menggunakan elemen-elemen ini, struktur website menjadi lebih jelas dan mudah dipahami oleh mesin pencari.
Berikut adalah contoh ilustrasi dan kode sederhana sebuah website setelah penggunaan Semantic HTML pada HTML5. Dapat kamu lihat betapa jelasnya struktur website dengan penggunaan elemen-elemen Semantic HTML. Terlihat lebih profesional dan SEO-friendly, bukan?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Setelah Mengenal HTML5</title>
</head>
<body>
<header>
<h1>Kenal HTML5</h1>
<img src="logo_website.jpg" />
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tentang Kami</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>HTML</h1>
</header>
<p><p>Belajar HTML</p>
</article>
<article>
<header>
<h1>Belajar CSS</h1>
</header>
<p><p>Belajar CSS.</p>
</article>
</section>
<aside>
<h1>Artikel Terbaru</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
<footer>
<p>Footer - Copyright idcsharp.com</p>
</footer>
</body>
</html>Kesimpulan
Semua orang tahu bahwa elemen HTML memainkan peran penting dalam membangun struktur sebuah website. Tapi tahukah kamu bahwa Semantic HTML dapat membuat websitemu lebih jelas dan lebih bermakna? Dengan Semantic HTML, kamu bisa dengan mudah memisahkan dan mengelompokkan elemen website dengan cara yang lebih logis dan terstruktur.
Dulu, para web developer biasanya menggunakan tag <div> sebagai solusi sederhana untuk mengelompokkan elemen website mereka. Namun, sejak diperkenalkannya Semantic HTML, sekarang kamu bisa menggunakan elemen-elemen baru seperti <header>, <nav>, <main>, <section>, <article>, <aside>, dan <footer> untuk memperjelas struktur websitemu.
Jadi, jika kamu ingin membangun website yang lebih modern dan SEO-friendly, gunakanlah Semantic HTML untuk membuat struktur websitemu lebih mudah dipahami dan bermakna bagi pengunjung dan mesin pencari.
){kind=link}