Belajar HTML Lengkap — Dasar, Semantik, Form, Aksesibilitas & SEO
Panduan praktis HTML5: struktur dokumen, tag semantik, form, multimedia, aksesibilitas (a11y), responsive layout, dan SEO on-page.
1. Pengantar & Sejarah HTML
HTML (HyperText Markup Language) dibuat oleh Tim Berners-Lee (awal 1990-an) untuk membuat dokumen yang saling terkait (web). HTML adalah bahasa markup — bukan bahasa pemrograman — yang menjelaskan struktur & konten halaman web.
2. Struktur Dokumen HTML5
Dokumen HTML memiliki struktur dasar: <!doctype html>, <html>, <head>, dan <body>.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten di sini -->
</body>
</html>Selalu sertakan lang attribute untuk aksesibilitas & SEO.
4. Teks, Heading & Lists
Gunakan heading berurutan (h1.. h6) untuk struktur; jangan melewati level. Gunakan ul / ol untuk list.
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<p>Paragraf penjelasan...</p>
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>5. Link, Gambar & Multimedia
Gunakan atribut alt pada <img>. Untuk video/audio gunakan elemen HTML5.
<a href="https://example.com" target="_blank" rel="noopener">Kunjungi contoh</a>
<img src="cover.jpg" alt="Cover artikel" width="800" height="450">
<video controls>
<source src="video.mp4" type="video/mp4">
Browser Anda tidak mendukung video.
</video>loading="lazy" pada gambar meningkatkan performa.6. Form & Input
Buat form yang ramah akses dengan label, fieldset, dan error message yang jelas.
<form action="/submit" method="post">
<label for="name">Nama</label>
<input id="name" name="name" type="text" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Kirim</button>
</form>aria-invalid, aria-describedby).7. Layout Responsif & Grid
Gunakan CSS Grid / Flexbox. Jangan pakai tabel untuk layout.
/* contoh sederhana grid */
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 16px;
}
@media (max-width: 768px) {
.container { grid-template-columns: 1fr; }
}<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">8. Aksesibilitas (a11y)
Beberapa prinsip penting:
- Gunakan teks alternatif (
alt) untuk gambar. - Pastikan tab order logis & keyboard accessible.
- Gunakan semantic HTML; hindari
divtanpa alasan. - Periksa kontras warna & sertakan skip-link.
<a class="skip-link" href="#main">Lewati ke konten utama</a>
<main id="main">...</main>9. SEO On-Page & Metadata
Beberapa elemen SEO penting:
- Title <title> yang deskriptif dan mengandung kata kunci.
- Meta description ringkas & relevan.
- Gunakan heading secara hirarkis (H1 tunggal, H2/H3 untuk subseksi).
- Gunakan structured data (JSON-LD) untuk artikel, FAQ, dsb.
- Optimalkan kecepatan (minify, compress, lazy load gambar).
<meta name="description" content="Panduan belajar HTML ...">
<link rel="canonical" href="https://example.com/post-html">10. Best Practice & Performance
- Gunakan semantic HTML.
- Hindari inline styles berlebih — pakai CSS terpisah.
- Gunakan responsive images (<picture>, srcset) untuk performa.
- Minimalisir blocking scripts; letakkan JS di akhir atau gunakan
defer. - Validasi markup dengan W3C validator.
11. Contoh Proyek Mini
Beberapa proyek untuk latihan:
- Halaman profil responsif (HTML + CSS Grid).
- Form kontak dengan validasi front-end & server-side.
- Halaman artikel bersemantik dengan sidebar dan komentar.
<!-- contoh layout artikel sederhana -->
<article>
<header>
<h1>Judul Artikel</h1>
<time datetime="2025-09-24">24 Sep 2025</time>
</header>
<section><p>Paragraf pertama...</p></section>
<footer>Penulis: Nama</footer>
</article>12. Sumber & Lanjutan
- MDN Web Docs — HTML
- W3C HTML & Accessibility Guidelines
- Google Web Fundamentals — Performance & SEO
Catatan: ganti placeholder https://YOUR-BLOG-URL/... dengan URL dan aset gambar Anda (OG image). Untuk versi PDF: gunakan Print → Save as PDF dari browser.
No comments:
Post a Comment