materi

Struktur Dokumen HTML, Elemen Semantik, dan Teks

Anatomi Dokumen HTML5, Tipografi Teks, dan Elemen Semantik Modern

Materi ini membahas standar penyusunan struktur dokumen web sesuai spesifikasi W3C menggunakan HTML5 murni, dengan penekanan pada penggunaan tag semantik untuk meningkatkan aksesibilitas (web accessibility) dan optimasi mesin pencari (Search Engine Optimization / SEO).

1. Anatomi Kerangka Dokumen HTML5

html 
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Struktur Semantik HTML5</title>
</head>
<body>
    <!-- Konten halaman yang dirender browser -->
</body>
</html>

2. Keunggulan Elemen Semantik vs Elemen Generik

Penggunaan elemen generik tanpa makna struktural seperti <div> dan <span> untuk keseluruhan tata letak merupakan bad practice. HTML5 memperkenalkan elemen semantik yang memberikan arti eksplisit bagi browser dan pembaca layar (screen readers):

  • <header>: Membungkus identitas situs, judul halaman, atau logo institusi.
  • <nav>: Mengelompokkan tautan menu navigasi utama situs web.
  • <main>: Menampung konten primer unik dari dokumen yang sedang dibuka.
  • <article>: Bagian konten mandiri yang dapat didistribusikan secara terpisah (seperti postingan artikel blog).
  • <section>: Pengelompokan bab tematik dari suatu topik pembahasan.
  • <aside>: Konten pelengkap yang secara tidak langsung berkaitan dengan isi utama (seperti sidebar atau widget).
  • <footer>: Informasi penutup seperti hak cipta (copyright), tautan kontak, dan disclaimer legalitas.

3. Format Tipografi dan Hyperlink

  • Hierarki judul bertingkat dari <h1> hingga <h6> untuk menjaga outline dokumen.
  • Penggunaan tautan anchor (<a>) dengan konfigurasi atribut target (_blank) serta pengamanan rel (noopener noreferrer) saat menautkan ke sumber eksternal.

Attachments

Back to Academics