Cara Penulisan HTML
Struktur Dasar Dokumen HTML
Setiap halaman HTML dimulai dengan kerangka yang sama. Anggap ini seperti template minimal yang harus selalu kamu tulis.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman</title>
</head>
<body>
<!-- Semua konten yang tampil di browser ditaruh di sini -->
</body>
</html>
<!DOCTYPE html>: deklarasi tipe dokumen, memberi tahu browser bahwa ini HTML5.<html>: elemen akar, membungkus seluruh halaman.<head>: berisi informasi meta, judul, tautan ke CSS/JS.<body>: tempat semua konten visual: teks, gambar, video, dll.
lang="id" pada <html> memberi tahu mesin pencari bahwa halaman ini menggunakan bahasa Indonesia. Selalu sertakan untuk aksesibilitas dan SEO.Tag, Elemen, dan Atribut
Tag dan Elemen
HTML bekerja dengan tag yang ditulis dalam kurung sudut. Kebanyakan tag berpasangan: tag pembuka <nama> dan tag penutup </nama>. Antara keduanya adalah konten. Gabungan tag pembuka, konten, dan tag penutup disebut elemen.
<p>Ini adalah paragraf.</p>
Ada juga tag yang tidak perlu penutup (self-closing), misalnya <br> untuk baris baru, <img> untuk gambar.
Atribut
Atribut memberikan informasi tambahan pada elemen. Ditulis di dalam tag pembuka, terdiri dari nama dan nilai (diapit tanda petik).
<a href="https://example.com" target="_blank">Kunjungi Situs</a>
href="https://example.com"menentukan tujuan tautan.target="_blank"membuka tautan di tab baru.
Heading: Menandai Judul
HTML menyediakan enam level heading, dari <h1> (paling penting) hingga <h6> (paling rendah). Gunakan secara hierarkis—jangan lompat dari <h1> langsung ke <h4>.
<h1>Judul Utama Halaman</h1>
<h2>Bab atau Bagian Besar</h2>
<h3>Sub-bagian</h3>
<h4>Detail di bawahnya</h4>
<h5>Judul kecil</h5>
<h6>Paling kecil</h6>
<h1> per halaman, karena menandakan topik utama.Paragraf dan Teks
Paragraf dibuat dengan <p>. Untuk teks yang perlu penekanan, gunakan <strong> (tebal, penting) atau <em> (miring, penekanan).
<p>Ini paragraf biasa. <strong>Ini penting dan tebal.</strong> <em>Ini miring.</em></p>
<p>Baris baru dibuat dengan <br> tag br.</p>
Link (Tautan)
Link adalah jantung web. Gunakan tag <a> dengan atribut href.
<a href="https://google.com">Google</a><br>
<a href="/tentang.html">Tentang Kami (link internal)</a><br>
<a href="#bagian-bawah">Lompat ke bagian bawah (anchor)</a>
Gambar
Gambar menggunakan tag <img>. Atribut src menentukan sumber gambar, alt memberikan deskripsi untuk aksesibilitas (dibaca screen reader, tampil jika gambar gagal dimuat).
<img src="https://placekitten.com/300/200" alt="Kucing lucu" width="300" height="200">
Daftar
Ada dua jenis daftar: tidak berurutan (<ul> dengan bullet) dan berurutan (<ol> dengan angka). Setiap item ditulis dengan <li>.
<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
<ol>
<li>Bangun tidur</li>
<li>Sarapan</li>
<li>Belajar HTML</li>
</ol>
Komentar
Komentar tidak akan tampil di browser, berguna untuk catatan atau menonaktifkan sementara kode.
<!-- Ini komentar, tidak terlihat di halaman -->
<p>Ini terlihat.</p>
<!-- <p>Ini disembunyikan sementara</p> -->
Latihan Singkat
Coba buat file HTML dengan struktur berikut:
- Judul halaman: "Profil Saya"
- Heading 1: nama kamu
- Paragraf berisi deskripsi singkat
- Daftar hobi (gunakan
<ul>) - Link ke media sosial favorit
- Gambar profil (bisa dari placeholder)
Dokumentasi paling lengkap dan terpercaya untuk semua tag HTML.
Selanjutnya kita akan bahas elemen semantik, tabel, dan cara menyematkan video. Tapi pastikan dulu kamu sudah mencoba menulis kode di atas. Ada yang mau ditanyakan?