Berikut adalah contoh struktur **kode HTML5** yang mencakup **semantik** yang baik dan **SEO dasar**, serta penggunaan **tabel**, **media audio**, dan **video**. Kode ini menggabungkan berbagai elemen penting untuk membuat halaman yang responsif, terstruktur dengan baik, dan dioptimalkan untuk mesin pencari.
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Contoh halaman web dengan semantic HTML, tabel, media audio dan video, serta optimasi SEO dasar.">
<meta name="keywords" content="HTML5, SEO, Semantic HTML, Audio, Video, Tabel">
<title>Contoh Halaman Web HTML5 | SEO dan Semantic HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Bagian Header -->
<header>
<h1>Contoh Penggunaan Semantic HTML dan SEO</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
</header>
<!-- Bagian Utama atau Konten -->
<main>
<!-- Tentang Bagian -->
<section id="about">
<h2>Tentang Halaman Ini</h2>
<p>Halaman ini menunjukkan cara mengimplementasikan HTML5 dengan menggunakan elemen-elemen semantik dan optimasi SEO dasar. Kami juga menampilkan penggunaan tabel, media audio, dan video.</p>
</section>
<!-- Bagian Tabel -->
<section id="tabel">
<h2>Contoh Tabel Data Produk</h2>
<table border="1">
<caption>Daftar Produk Elektronik</caption>
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Kategori</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Laptop XYZ</td>
<td>Elektronik</td>
<td>Rp 10.000.000</td>
</tr>
<tr>
<td>2</td>
<td>Smartphone ABC</td>
<td>Elektronik</td>
<td>Rp 7.000.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Produk</td>
<td>2</td>
</tr>
</tfoot>
</table>
</section>
<!-- Bagian Media Audio -->
<section id="audio">
<h2>Contoh Media Audio</h2>
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
Browser Anda tidak mendukung pemutar audio.
</audio>
</section>
<!-- Bagian Media Video -->
<section id="video">
<h2>Contoh Media Video</h2>
<video controls width="600" poster="thumbnail-video.jpg">
<source src="video-file.mp4" type="video/mp4">
Browser Anda tidak mendukung pemutar video.
</video>
</section>
</main>
<!-- Bagian Footer -->
<footer>
<p>© 2024 Contoh Website HTML5. Semua hak dilindungi.</p>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
</footer>
</body>
</html>
### Penjelasan Kode:
1. **Meta Tags untuk SEO**:
- **`<meta name="description">`** memberikan deskripsi halaman yang membantu mesin pencari memahami isi halaman.
- **`<meta name="keywords">`** membantu dengan kata kunci terkait halaman untuk SEO (meskipun penggunaannya tidak lagi sepopuler dulu dalam algoritma mesin pencari modern).
2. **Elemen Semantik**:
- **`<header>`**, **`<nav>`**, **`<section>`**, dan **`<footer>`** digunakan untuk memberikan struktur yang jelas dan logis pada halaman, yang juga meningkatkan aksesibilitas dan SEO.
3. **Heading**:
- **`<h1>`** digunakan sebagai judul utama halaman, dan **`<h2>`** digunakan sebagai subjudul. Struktur heading yang tepat membantu mesin pencari memahami hierarki informasi di halaman.
4. **Tabel**:
- **`<table>`** digunakan untuk menampilkan data dalam format baris dan kolom dengan penggunaan elemen **`<thead>`**, **`<tbody>`**, dan **`<tfoot>`** untuk membuat tabel lebih terstruktur.
- **`<caption>`** memberikan judul untuk tabel, yang juga membantu dalam SEO.
5. **Media Audio**:
- **`<audio>`** digunakan untuk menyisipkan file audio dengan kontrol pemutar.
6. **Media Video**:
- **`<video>`** digunakan untuk menyisipkan video, dengan atribut **`poster`** yang menentukan gambar pratinjau video sebelum diputar.
7. **Footer**:
- Menggunakan **`<footer>`** untuk menempatkan informasi hak cipta dan navigasi tambahan, yang membantu mengakhiri halaman dengan jelas.
Kode ini telah dioptimalkan menggunakan praktik terbaik HTML5 dan prinsip-prinsip dasar SEO untuk memberikan struktur halaman yang baik dan visibilitas yang lebih baik di mesin pencari.
Berikut adalah contoh kode untuk **`styles.css`** yang dapat digunakan bersama dengan **HTML5** pada contoh kode sebelumnya. Kode CSS ini mengatur gaya untuk membuat halaman tampak lebih rapi, responsif, dan mudah dibaca:
Style.css
/* Atur gaya umum untuk seluruh halaman */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
h1, h2 {
color: #2c3e50;
margin-bottom: 15px;
}
/* Gaya untuk link (a) */
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Gaya untuk header */
header {
background-color: #34495e;
color: #fff;
padding: 10px 0;
text-align: center;
}
header h1 {
margin: 0;
}
nav ul {
padding: 0;
list-style: none;
display: flex;
justify-content: center;
margin-top: 10px;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #fff;
font-weight: bold;
}
nav ul li a:hover {
color: #f39c12;
}
/* Gaya untuk konten utama */
main {
padding: 20px;
background-color: #fff;
margin: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {
margin-bottom: 30px;
}
/* Gaya untuk tabel */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
table caption {
font-weight: bold;
margin-bottom: 10px;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #2c3e50;
color: #fff;
}
tfoot td {
font-weight: bold;
background-color: #ecf0f1;
}
/* Gaya untuk audio dan video */
audio, video {
display: block;
margin: 20px 0;
width: 100%;
max-width: 600px;
}
/* Gaya untuk footer */
footer {
background-color: #34495e;
color: #fff;
text-align: center;
padding: 15px 0;
}
footer nav ul {
padding: 0;
list-style: none;
display: flex;
justify-content: center;
}
footer nav ul li {
margin: 0 10px;
}
footer nav ul li a {
color: #fff;
font-weight: bold;
}
footer nav ul li a:hover {
color: #f39c12;
}
/* Media Queries untuk Responsivitas */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
main {
margin: 10px;
padding: 10px;
}
table, audio, video {
width: 100%;
overflow-x: auto;
}
}
### Penjelasan Gaya CSS:
1. **Gaya Umum**:
- **Body**: Menambahkan padding dan margin nol, serta mengatur font, warna, dan latar belakang.
- **Heading** (`h1`, `h2`) diberi warna dan margin untuk membuatnya lebih menonjol.
2. **Gaya untuk Link (`<a>`)**:
- Warna link dibuat biru, dengan efek hover yang menambahkan underline dan perubahan warna saat di-hover.
3. **Gaya Header**:
- Background warna gelap, teks putih, dan menu navigasi diatur secara horizontal dengan flexbox. Link di navigasi diberi warna putih, dan saat di-hover berubah menjadi oranye.
4. **Gaya untuk Main Content**:
- Bagian utama diberikan padding, background putih, dan bayangan untuk menonjolkan konten dari background halaman.
5. **Tabel**:
- Border untuk setiap elemen tabel (table, th, td), dan penggunaan warna berbeda untuk header tabel dan bagian footer. Tabel ditampilkan penuh dalam lebar halaman dengan padding untuk membuat konten lebih mudah dibaca.
6. **Media Audio dan Video**:
- **Audio dan video** diberikan lebar maksimum agar tidak melampaui ukuran konten dan tetap responsif.
7. **Footer**:
- Seperti header, footer diberi latar belakang gelap dan teks putih dengan navigasi terpusat.
8. **Media Queries**:
- Menggunakan media queries untuk membuat layout responsif pada perangkat dengan lebar layar di bawah 768px. Menu navigasi menjadi vertikal, dan elemen seperti tabel, audio, dan video dapat di-scroll jika terlalu lebar untuk layar perangkat kecil.
Dengan kombinasi **HTML5** dan **CSS** di atas, halaman web Anda tidak hanya terlihat lebih profesional tetapi juga lebih mudah digunakan di berbagai perangkat. Halaman juga dioptimalkan untuk mesin pencari dengan struktur semantik dan praktik SEO dasar yang baik.