Kursus IT Dasar HTML 016_Elemen semantik
Elemen semantik
HTML5 memperkenalkan banyak elemen semantik yang tujuannya adalah untuk meningkatkan semantik struktur dokumen, membuat dokumen lebih mudah dibaca, dipelihara, dan lebih ramah untuk mesin pencari dan pengembang.
Struktur halaman biasanya mencakup: header, footer, judul, navigasi, konten, sidebar, dll.
Menggunakan elemen <div> untuk merancang tata letak halaman:
[!Ringkasan]
- Tidak menguntungkan bagi pengembang dalam menulis kode. Ketika Anda menghadapi layar penuh dengan elemen
<div>, sulit untuk membedakan dengan cepat apa yang mereka maksudkan.- Tidak menguntungkan untuk optimasi mesin pencari (SEO). Browser hanya tahu bahwa Anda menggunakan elemen
<div>, tetapi elemen div itu sendiri tidak memiliki arti, itu hanya sebuah wadah.
Menggunakan elemen semantik untuk merancang tata letak halaman:
Menggunakan <header> <nav> <main> <aside> <footer> untuk mewakili area yang berbeda di halaman memberikan halaman semantik dan struktur yang baik, memungkinkan pengembang dan browser untuk dengan cepat memahami konten halaman web.
| Elemen | Fungsi |
|---|---|
<header> | Digunakan untuk mendefinisikan area header halaman, biasanya termasuk logo situs web, navigasi utama, tautan global, dan kolom pencarian. |
<nav> | Digunakan untuk mendefinisikan area tautan navigasi halaman. |
<main> | Digunakan untuk mendefinisikan konten utama atau fungsi utama halaman. Konten ini harus unik di halaman. |
<aside> | Digunakan untuk mendefinisikan konten sidebar halaman. Konten ini terkait dengan konten utama, tetapi opsional. |
<footer> | Digunakan untuk mendefinisikan area footer halaman, biasanya termasuk informasi hak cipta, informasi kontak, dan informasi terkait lainnya. |
<article> | Digunakan untuk mendefinisikan artikel, dokumen, halaman, aplikasi, atau area konten independen lainnya. |
<section> | Digunakan untuk mendefinisikan bagian independen umum di halaman web, umumnya akan berisi judul atau paragraf, blok. |
<figure> | Digunakan untuk mendefinisikan gambar, grafik, foto, dll. yang independen. |
<figcaption> | Digunakan untuk menyediakan judul atau deskripsi untuk elemen <figure>. |
Contoh:
<!DOCTYPE html><html lang="en"><head> <title>Halaman web saya</title></head><body> <header> <h1>Halaman web saya</h1> </header>
<nav> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Tentang saya</a></li> <li><a href="#">Hubungi saya</a></li> </ul> </nav>
<main> <article> <h2>Perkenalan saya</h2> <p>Nama saya XXX, ini adalah contoh elemen semantik.</p> </article> </main>
<aside> <h2>Tautan terkait</h2> <ul> <li><a href="#">Blog saya</a></li> <li><a href="#">Halaman GitHub saya</a></li> </ul> </aside>
<footer> <p>Copyright 2023 XXX</p> </footer></body></html>Efek:
Contoh ini berisi halaman web yang menggunakan elemen semantik HTML5 untuk mendeskripsikan makna konten halaman web.
- Elemen
<header>mendefinisikan area header halaman, termasuk logo situs web dan navigasi utama. - Elemen
<nav>mendefinisikan area tautan navigasi halaman. - Elemen
<main>mendefinisikan konten utama halaman, termasuk artikel perkenalan saya. - Elemen
<aside>mendefinisikan konten sidebar halaman, termasuk tautan terkait. - Elemen
<footer>mendefinisikan area footer halaman, termasuk informasi hak cipta.
[!Ringkasan]
- Mesin pencari dapat lebih memahami konten halaman web dan meningkatkan peringkat halaman web dalam hasil pencarian.
- Dapat membantu penyandang disabilitas untuk lebih mudah memahami konten halaman web dan meningkatkan aksesibilitas halaman web.
- Dapat membantu pengembang untuk lebih mengorganisir struktur halaman web dan meningkatkan kemudahan pemeliharaan halaman web.
Tautan: 观鸟网 (roy-tian.github.io)