Table of contents
Struktur Dasar Kode HTML untuk Pemula - HyperText Markup Language (HTML) merupakan bahasa standar digunakan untuk membuat maupun merancang halaman website. Memahami struktur dasar kode HTML adalah langkah awal sangat penting bagi siapa pun yang ingin belajar pemrograman web. Artikel ini akan membahas elemen-elemen dasar HTML, struktur umum dokumen HTML, serta cara mengimplementasikannya dalam pembuatan halaman web.
Elemen Dasar HTML
Tag HTML
HTML terdiri dari elemen-elemen yang ditulis dengan menggunakan tag. Tag adalah kata kunci dikelilingi oleh tanda kurung sudut (< >). Setiap elemen HTML pasti mempunyai tag pembuka maupun tag penutup. Sebagai contoh:
<p>Ini adalah paragraf.</p>
Tag <p> adalah tag pembuka dan </p> adalah tag penutup. Elemen di antara tag pembuka juga penutup disebut konten elemen.
Atribut HTML
Atribut menyediakan informasi tambahan tentang elemen HTML. Atribut ditulis di dalam tag pembuka biasanya terdiri dari pasangan nama ataupun nilai. Contoh penggunaan atribut adalah sebagai berikut:
<a href="https://www.example.com">Kunjungi Situs</a>
Dalam contoh ini, atribut href digunakan untuk menentukan URL karena dituju oleh tautan.
Struktur Umum Dokumen HTML
Deklarasi Doctype
Setiap dokumen HTML dimulai dengan deklarasi <!DOCTYPE html>, karena memberi tahu browser bahwa dokumen ini menggunakan versi HTML5.
<!DOCTYPE html>
Elemen <html>
Setelah deklarasi doctype, dokumen HTML dimulai dengan elemen <html>, menandai awal juga akhir dokumen HTML.
<html></html>
Elemen <head>
Elemen <head> berisi meta informasi tentang dokumen, seperti judul halaman, tautan ke file CSS, dan metadata lainnya.
<head><title>Judul Halaman</title></head>
Elemen <body>
Elemen <body> berisi konten utama halaman web, seperti teks, gambar, tautan, dan elemen lainnya yang akan ditampilkan di browser.
<body><h1>Selamat Datang di Situs Kami</h1><p>Ini adalah contoh paragraf.</p></body>
Struktur Lengkap Dokumen HTML
Berikut adalah contoh struktur lengkap dokumen HTML yang sederhana:
<!DOCTYPE html><html><head><title>Judul Halaman</title></head><body><h1>Selamat Datang di Situs Kami</h1><p>Ini adalah contoh paragraf.</p><a href="https://www.example.com">Kunjungi Situs</a></body></html>
Baca juga: Schema Markup SEO, Meningkatkan Visibilitas di Mesin Pencari
Elemen Penting Lainnya dalam HTML
Elemen Heading
HTML menyediakan enam tingkat elemen heading, dari <h1> hingga <h6>, digunakan untuk menentukan judul dan subjudul dalam dokumen.
<h1>Heading 1</h1><h2>Heading 2</h2>
Elemen Paragraf
Elemen <p> digunakan untuk mendefinisikan paragraf.
<p>Ini adalah paragraf.</p>
Elemen Tautan
Elemen <a> digunakan untuk membuat tautan. Atribut href menentukan URL tujuan.
<a href="https://www.example.com">Kunjungi Situs</a>
Elemen Gambar
Elemen <img> digunakan untuk menyisipkan gambar ke dalam halaman web. Atribut src menentukan sumber gambar, dan atribut alt menyediakan teks alternatif jika gambar tidak dapat ditampilkan.
<img src="gambar.jpg" alt="Deskripsi Gambar">
Elemen Daftar
HTML memiliki dua jenis daftar: daftar berurutan (<ol>) dan daftar tidak berurutan (<ul>). Setiap item dalam daftar ditandai dengan elemen <li>.
<ul><li>Item pertama</li><li>Item kedua</li></ul>
<ol><li>Item pertama</li><li>Item kedua</li></ol>
Kesimpulan
Memahami struktur dasar kode HTML adalah langkah penting bagi pemula dimana ingin mempelajari pengembangan web. Dengan menguasai elemen-elemen dasar seperti tag, atribut, serta struktur umum dokumen HTML, Anda dapat mulai membuat maupun merancang halaman web sederhana. Selanjutnya, Anda dapat memperdalam pengetahuan dengan mempelajari CSS dan JavaScript guna meningkatkan tampilan juga interaktivitas halaman web. HTML adalah fondasi dari semua halaman web, pemahaman yang kuat tentang dasar-dasarnya akan memberikan landasan kokoh untuk pengembangan web lebih lanjut.
