HTML adalah dasar dari setiap halaman website. Tanpa HTML, konten seperti teks, gambar, dan tautan tidak bisa disusun dengan rapi di browser.
HTML memberikan struktur yang membuat semua elemen di website kamu tampil dengan baik.
Artikel ini akan membahas secara singkat apa itu HTML, bagaimana cara kerjanya, dan komponen penting yang perlu kamu ketahui.
Apa Itu HTML?
HTML (Hypertext Markup Language) adalah bahasa yang digunakan untuk memberi tahu browser bagaimana menampilkan berbagai elemen di halaman web.
Setiap halaman web yang kamu buka di browser seperti Google Chrome, Firefox, atau Safari, sebenarnya adalah hasil dari interpretasi HTML yang ada di dalamnya.
HTML mendefinisikan berbagai elemen halaman web seperti teks, gambar, video, dan bentuk interaksi lainnya.
HTML menggunakan tanda khusus yang disebut tag untuk mengidentifikasi dan mendefinisikan elemen-elemen tersebut.
Tag HTML ini biasanya dibuka dengan tanda kurung sudut (<>) dan ditutup dengan tanda kurung sudut terbalik (</>).
Misalnya, tag <p> digunakan untuk mendefinisikan sebuah paragraf, sementara tag <a> digunakan untuk membuat tautan atau hyperlink.
Fungsi HTML
HTML memiliki beberapa fungsi utama dalam pembangunan website. Berikut di antaranya:
- Menyusun dan mengorganisasi elemen dalam halaman web: HTML menentukan bagaimana konten ditampilkan, seperti teks, gambar, tautan, dan video. Tanpa HTML, konten di website tidak dapat disusun dengan rapi.
- Membuat hubungan antar elemen: HTML memungkinkan pembuatan tautan (hyperlink) antar halaman menggunakan tag
<a>, yang memudahkan navigasi antar halaman di dalam website, meningkatkan pengalaman pengguna (user experience). - Mendukung aksesibilitas: HTML menyediakan atribut seperti alt pada tag
<img>, yang memberi deskripsi gambar untuk pembaca layar, memudahkan akses bagi pengguna dengan gangguan penglihatan. - Menjamin aksesibilitas untuk semua orang: Dengan elemen-elemen dan atribut yang ada, HTML membantu memastikan bahwa website bisa diakses oleh semua orang, termasuk mereka yang membutuhkan bantuan teknologi asistif.
Bagaimana Web Browser Membaca HTML?
Web browser membaca HTML dengan cara yang sistematis. Nah, berikut adalah proses bagaimana browser membaca dan merender halaman HTML:
- Parsing: Ketika browser memuat halaman web, pertama-tama ia akan mem-parsing (menganalisis) kode HTML yang ada. Proses parsing ini akan mengubah dokumen HTML menjadi sebuah representasi terstruktur yang dikenal dengan sebutan Document Object Model (DOM).
- DOM Tree: Browser kemudian akan membuat DOM Tree, yaitu struktur hierarki dari elemen-elemen HTML. Setiap elemen HTML diwakili sebagai node dalam pohon ini, lengkap dengan properti dan atributnya. Hubungan antar elemen juga diwakili, seperti elemen induk (parent), elemen anak (child), dan elemen bersaudara (sibling).
- Rendering: Setelah DOM Tree terbentuk, browser akan merender halaman web tersebut dengan menampilkan elemen-elemen HTML sesuai dengan kode yang ada. Proses rendering ini melibatkan penerapan gaya CSS, pengaturan tata letak, serta penghitungan piksel yang akan ditampilkan.
- Event Handling: Selain itu, browser juga menangani interaksi pengguna seperti klik, gerakan mouse, dan input keyboard. JavaScript yang terhubung dengan elemen HTML bertanggung jawab untuk merespon aksi-aksi ini, memberikan pengalaman interaktif pada pengguna.
Tag dan Atribut HTML
Dalam HTML, ada dua komponen utama yang harus kamu pahami: tag dan atribut. Meskipun keduanya bekerja bersama, mereka memiliki peran yang berbeda.
1. Tag HTML
Tag digunakan untuk mendefinisikan elemen dan struktur halaman. Setiap tag membungkus konten dan menunjukkan jenis elemen yang diwakili.
Berikut adalah beberapa tag HTML yang umum digunakan:
<html>: Mendefinisikan akar dari dokumen HTML. Ini adalah elemen yang membungkus seluruh dokumen HTML.<head>: Berisi informasi meta tentang dokumen HTML, seperti judul, gaya CSS, dan skrip JavaScript yang digunakan.<title>: Menentukan judul halaman yang akan ditampilkan di tab browser.<body>: Berisi konten utama dari dokumen HTML, seperti teks, gambar, tautan, dan elemen lainnya.<h1>sampai<h6>: Digunakan untuk membuat judul dengan ukuran yang berbeda. <h1> adalah yang terbesar, sedangkan <h6> adalah yang terkecil.<p>: Mendefinisikan sebuah paragraf teks.<a>: Membuat sebuah tautan atau hyperlink yang mengarah ke halaman lain atau ke bagian lain dalam halaman yang sama.<img>: Menyisipkan gambar ke dalam halaman HTML.<div>: Digunakan untuk membuat sebuah divisi atau pembatas, sering digunakan untuk grup elemen-elemen lain dan penerapan gaya CSS.<span>: Digunakan untuk elemen inline yang memungkinkan kamu menambahkan gaya CSS pada bagian kecil dari teks atau konten.<ul>,<ol>, dan<li>: Digunakan untuk membuat daftar tak berurutan (unordered list), daftar terurut (ordered list), dan item dalam daftar (list item).<table>,<tr>,<td>, dan<th>: Digunakan untuk membuat tabel, baris tabel, sel tabel, dan sel header tabel.<form>: Membuat formulir untuk mengambil input dari pengguna.<input>: Digunakan untuk mendefinisikan elemen input dalam formulir, seperti kolom teks atau checkbox.<button>: Membuat tombol yang dapat diklik di dalam halaman web atau formulir.
2. Atribut HTML
Atribut memberikan informasi tambahan atau mengonfigurasi elemen HTML. Atribut ditempatkan dalam tag pembuka elemen dan digunakan untuk mengubah perilaku atau tampilan elemen tersebut.
Beberapa atribut umum adalah:
href: Digunakan dalam tag <a> untuk menentukan alamat URL tujuan tautan.src: Digunakan dalam tag <img> untuk menentukan sumber gambar.alt: Memberikan deskripsi gambar untuk aksesibilitas.class: Menentukan kelas yang digunakan untuk styling dengan CSS.id: Memberikan identitas unik pada elemen.style: Menentukan gaya elemen secara langsung.
3. Perbedaan Tag dan Atribut HTML
Perbedaan utama antara tag dan atribut adalah tag mendefinisikan elemen dan struktur, sementara atribut memberikan detail tambahan atau pengaturan spesifik.
Misalnya, tag <a> digunakan untuk membuat tautan, sementara atribut href dalam tag tersebut memberikan alamat URL yang dituju.
Begitu juga dengan tag <img>, yang digunakan untuk menampilkan gambar, sementara atribut src menentukan lokasi gambar tersebut.
Contoh Penggunaan HTML dalam Membuat Halaman Web
Untuk memberi gambaran yang lebih jelas, mari kita lihat contoh sederhana pembuatan halaman web menggunakan HTML.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Halaman Web</title>
</head>
<body>
<h1>Selamat Datang di Halaman Web Kami!</h1>
<p>Ini adalah contoh halaman web sederhana yang menggunakan HTML.</p>
<img src="gambar.jpg" alt="Gambar Contoh">
<p>Untuk informasi lebih lanjut, kunjungi <a href="https://www.example.com">tautan ini</a>.</p>
</body>
</html>Pada contoh di atas, kamu bisa melihat bagaimana HTML digunakan untuk membuat struktur halaman web. Tag <h1> digunakan untuk membuat judul utama, tag <p> untuk paragraf, tag <img> untuk gambar, dan tag <a> untuk membuat tautan.
Kesimpulan
HTML (Hypertext Markup Language) adalah bahasa dasar yang digunakan untuk membangun struktur halaman website.
Dengan menggunakan tag dan atribut, HTML memungkinkan pengorganisasian elemen seperti teks, gambar, video, dan tautan, serta mengatur bagaimana konten ditampilkan di browser.
HTML sangat penting untuk memastikan bahwa halaman website kamu tampil dengan rapi dan dapat diakses dengan baik oleh pengguna.
Jika kamu sedang merencanakan untuk membuat website dan bingung memilih layanan hosting yang tepat, kamu bisa mengeksplorasi berbagai pilihan yang tersedia, dengan membaca review layanan hosting berikut ini.