HTML: Pengertian, Cara Kerja, dan Tag yang Paling Penting
HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membangun struktur halaman web. HTML berfungsi sebagai kerangka utama yang menentukan posisi teks, gambar, video, formulir, dan elemen lainnya agar dapat ditampilkan oleh browser.
HTML bukan bahasa pemrograman karena tidak memiliki logika atau perhitungan, melainkan bahasa penanda yang memberi arti dan struktur pada konten. Tanpa HTML, halaman web tidak memiliki bentuk maupun susunan yang jelas.
Cara Kerja HTML
HTML bekerja dengan cara dibaca dan diproses oleh browser. Browser akan menerjemahkan setiap tag HTML menjadi elemen visual berdasarkan standar web. Prosesnya dimulai dari pembacaan dokumen HTML, pembuatan struktur DOM (Document Object Model), lalu menampilkan konten ke layar pengguna.
Struktur Dasar Dokumen HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman</title>
</head>
<body>
Konten ditampilkan di sini
</body>
</html>
Struktur ini wajib ada agar browser dapat mengenali dokumen sebagai HTML5 dan menampilkan halaman dengan benar.
Tag HTML yang Paling Berperan Penting
1. Tag Struktur Utama
Tag <html>, <head>, dan <body> adalah fondasi
utama HTML. Tanpa tag ini, dokumen HTML tidak akan valid.
2. Tag Semantic
Tag semantic seperti <header>, <main>, <section>,
<article>, dan <footer> memberikan makna pada struktur halaman.
Tag ini sangat penting untuk SEO dan aksesibilitas.
3. Tag Konten
Tag seperti <h1> - <h6>, <p>, <a>, dan <img>
digunakan untuk menampilkan isi utama halaman web.
4. Tag Formulir
Form adalah cara HTML berinteraksi dengan pengguna.
Tag pentingnya meliputi <form>, <input>, <textarea>,
<select>, dan <button>.
Untuk detail fungsi atribut seperti type, name, dan required. silakan baca
Dokumentasi Atribut HTML Lengkap Dan
Panduan atribut HTML dari MDN
5. Tag Non-Semantic
Tag <div> dan <span> digunakan sebagai wadah
untuk styling dan layout, meskipun tidak memiliki makna khusus.
Dokumentasi Lengkap Tag HTML
Tabel berikut berisi daftar lengkap tag HTML, tipe, fungsi utama, dan penjelasan detail penggunaannya.
Tabel Dokumentasi Tag HTML
| Tag | Tipe | Fungsi Utama | Keterangan |
|---|---|---|---|
<!DOCTYPE> |
Deklarasi | Menentukan tipe dokumen | Memberi tahu browser bahwa dokumen menggunakan standar HTML tertentu (umumnya HTML5). Harus ditulis di baris paling atas agar browser tidak masuk ke quirks mode. |
<a> |
Inline | Membuat hyperlink | Digunakan untuk menautkan halaman lain, file, email, atau anchor dalam halaman yang sama menggunakan atribut href. |
<abbr> |
Inline | Singkatan atau akronim | Menampilkan singkatan dengan penjelasan lengkap menggunakan atribut title, membantu aksesibilitas dan SEO. |
<acronym> |
Inline (deprecated) | Akronim | Sudah tidak direkomendasikan di HTML5. Digantikan oleh <abbr>. |
<address> |
Block | Informasi kontak | Biasanya berisi alamat, email, atau identitas penulis/pemilik konten. Bukan untuk alamat fisik semata. |
<applet> |
Block (deprecated) | Menjalankan Java Applet | Tidak lagi didukung browser modern. Digantikan oleh <object> atau <embed>. |
<area> |
Inline | Area klik pada image map | Digunakan bersama <map> untuk menentukan area interaktif pada gambar. |
<article> |
Semantic Block | Konten mandiri | Mewakili konten independen seperti artikel blog, berita, atau posting forum yang dapat berdiri sendiri. |
<aside> |
Semantic Block | Konten sampingan | Digunakan untuk sidebar, catatan tambahan, iklan, atau konten yang berhubungan tapi tidak utama. |
<audio> |
Media | Memutar audio | Mendukung file suara seperti MP3, OGG, dan WAV tanpa plugin tambahan. |
<b> |
Inline | Teks tebal | Hanya memberi efek visual tebal tanpa makna semantik penting. |
<base> |
Metadata | URL dasar dokumen | Menentukan URL dasar untuk semua link relatif dalam dokumen. |
<basefont> |
Deprecated | Font dasar | Tidak lagi digunakan. Digantikan sepenuhnya oleh CSS. |
<bdi> |
Inline | Isolasi teks dua arah | Mencegah teks dengan arah berbeda (RTL/LTR) merusak struktur tampilan. |
<bdo> |
Inline | Override arah teks | Memaksa arah teks kiri-kanan atau kanan-kiri menggunakan atribut dir. |
<big> |
Inline (deprecated) | Memperbesar teks | Tidak disarankan, gunakan CSS. |
<blockquote> |
Block | Kutipan panjang | Digunakan untuk kutipan dari sumber lain, biasanya ditampilkan dengan indentasi. |
<body> |
Struktur | Isi utama halaman | Menampung semua konten yang ditampilkan ke pengguna. |
<br> |
Inline | Garis baru | Membuat pindah baris tanpa membuat paragraf baru. |
<button> |
Form | Tombol interaksi | Dapat digunakan untuk submit form atau menjalankan JavaScript. |
<canvas> |
Graphics | Area gambar berbasis script | Menyediakan area untuk menggambar grafik, animasi, atau game menggunakan JavaScript (Canvas API). Tidak memiliki konten visual tanpa script. |
<caption> |
Table | Judul tabel | Memberi keterangan atau judul pada tabel. Biasanya muncul di atas tabel dan membantu aksesibilitas. |
<center> |
Block (deprecated) | Memusatkan konten | Sudah tidak direkomendasikan. Digantikan oleh CSS seperti text-align:center. |
<cite> |
Inline | Sumber kutipan | Menandai judul karya atau sumber referensi seperti buku, artikel, atau jurnal. |
<code> |
Inline | Menampilkan kode | Digunakan untuk menampilkan potongan kode program dengan gaya monospace. |
<col> |
Table | Properti kolom | Digunakan dalam <colgroup> untuk mengatur gaya kolom tabel tanpa menyentuh sel. |
<colgroup> |
Table | Kelompok kolom | Mengelompokkan kolom tabel agar mudah diberi styling atau lebar tertentu. |
<data> |
Inline | Data bernilai mesin | Menghubungkan teks yang ditampilkan dengan nilai data yang dapat diproses mesin. |
<datalist> |
Form | Daftar saran input | Menyediakan pilihan otomatis untuk elemen <input> tanpa membatasi input manual. |
<dd> |
List | Deskripsi istilah | Berisi penjelasan dari istilah yang didefinisikan oleh <dt>. |
<del> |
Inline | Teks dihapus | Menandai teks yang sudah tidak berlaku, biasanya ditampilkan dengan coretan. |
<details> |
Interactive | Konten tersembunyi | Menyediakan konten yang bisa dibuka/tutup oleh pengguna, sering dipasangkan dengan <summary>. |
<dfn> |
Inline | Definisi istilah | Menandai istilah yang sedang didefinisikan dalam konteks teks. |
<dialog> |
Interactive | Dialog atau modal | Digunakan untuk membuat dialog popup atau modal native HTML. |
<dir> |
List (deprecated) | Daftar direktori | Tidak lagi digunakan. Digantikan oleh <ul>. |
<div> |
Block | Wadah generik | Digunakan untuk mengelompokkan elemen tanpa makna semantik khusus. |
<dl> |
List | Daftar definisi | Menampung pasangan istilah (<dt>) dan deskripsi (<dd>). |
<dt> |
List | Istilah definisi | Menampilkan istilah utama dalam daftar definisi. |
<em> |
Inline | Penekanan teks | Memberi penekanan semantik, biasanya ditampilkan miring. |
<embed> |
Media | Menyematkan konten | Menyisipkan konten eksternal seperti PDF atau media lainnya. |
<fieldset> |
Form | Kelompok form | Mengelompokkan elemen form yang saling berhubungan. |
<figcaption> |
Semantic | Keterangan gambar | Memberi caption pada elemen <figure>. |
<figure> |
Semantic Block | Konten ilustratif | Digunakan untuk gambar, diagram, atau ilustrasi yang dapat berdiri sendiri. |
<font> |
Deprecated | Pengaturan font | Tidak digunakan lagi, digantikan sepenuhnya oleh CSS. |
<footer> |
Semantic Block | Bagian bawah konten | Berisi informasi penutup seperti copyright, link tambahan, atau metadata. |
<form> |
Form | Formulir input | Menampung elemen input untuk dikirim ke server. |
<frame> |
Deprecated | Frame halaman | Tidak lagi didukung. Digantikan oleh <iframe>. |
<frameset> |
Deprecated | Set frame | Sudah usang dan tidak didukung HTML5. |
<h1> – <h6> |
Heading | Judul dan subjudul | Digunakan untuk struktur judul dari tingkat paling penting (h1) hingga paling rendah (h6). Membantu SEO, aksesibilitas, dan hierarki konten. |
<head> |
Metadata | Informasi dokumen | Berisi metadata seperti judul halaman, charset, link CSS, dan script. Tidak ditampilkan langsung ke pengguna. |
<header> |
Semantic Block | Bagian pembuka | Mewakili bagian awal konten atau halaman, biasanya berisi judul, logo, atau navigasi. |
<hgroup> |
Semantic (limited) | Kelompok heading | Digunakan untuk mengelompokkan judul dan subjudul. Dukungan terbatas dan jarang digunakan. |
<hr> |
Block | Pemisah konten | Mewakili perubahan topik atau pemisah tematik antar bagian konten. |
<html> |
Struktur | Root dokumen | Elemen utama yang membungkus seluruh struktur HTML. |
<i> |
Inline | Teks miring | Memberi gaya miring tanpa makna semantik khusus. |
<iframe> |
Embedded | Menyematkan halaman lain | Menampilkan dokumen HTML lain di dalam halaman, seperti video atau peta. |
<img> |
Media | Menampilkan gambar | Menampilkan gambar statis. Wajib menggunakan atribut alt untuk aksesibilitas. |
<input> |
Form | Input data | Elemen utama form untuk menerima berbagai jenis input seperti teks, password, email, checkbox, dll. |
<ins> |
Inline | Teks ditambahkan | Menandai teks yang baru ditambahkan, biasanya digarisbawahi. |
<kbd> |
Inline | Input keyboard | Menampilkan representasi input keyboard dari pengguna. |
<label> |
Form | Label input | Menghubungkan teks label dengan elemen input untuk meningkatkan usability. |
<legend> |
Form | Judul fieldset | Memberi judul atau keterangan pada kelompok form (<fieldset>). |
<li> |
List | Item daftar | Mewakili satu item dalam daftar terurut (<ol>) atau tidak terurut (<ul>). |
<link> |
Metadata | Menghubungkan resource | Umumnya digunakan untuk menghubungkan file CSS atau ikon. |
<main> |
Semantic Block | Konten utama | Menandai konten utama halaman. Hanya boleh ada satu <main> per halaman. |
<map> |
Media | Peta gambar | Mendefinisikan peta area klik pada gambar bersama <area>. |
<mark> |
Inline | Menyorot teks | Menandai teks penting atau hasil pencarian. |
<menu> |
List | Menu perintah | Digunakan untuk daftar perintah atau menu konteks. |
<meta> |
Metadata | Informasi meta | Menyediakan metadata seperti charset, viewport, deskripsi halaman. |
<meter> |
Form / Data | Pengukuran nilai | Menampilkan nilai dalam rentang tertentu, seperti penggunaan disk. |
<nav> |
Semantic Block | Navigasi | Berisi kumpulan link navigasi utama. |
<noframes> |
Deprecated | Fallback frame | Tidak lagi digunakan karena frame sudah ditinggalkan. |
<noscript> |
Fallback | Konten tanpa JavaScript | Ditampilkan jika JavaScript dinonaktifkan atau tidak didukung. |
<object> |
Embedded | Menyematkan objek eksternal | Digunakan untuk menyisipkan berbagai jenis konten eksternal seperti PDF, SVG, atau multimedia. Lebih fleksibel dibanding <embed>. |
<ol> |
List | Daftar terurut | Membuat daftar bernomor atau berurutan, cocok untuk langkah-langkah atau instruksi. |
<optgroup> |
Form | Kelompok opsi | Mengelompokkan beberapa <option> dalam elemen <select> agar lebih terstruktur. |
<option> |
Form | Pilihan input | Mewakili satu pilihan dalam dropdown <select> atau <datalist>. |
<output> |
Form | Hasil perhitungan | Menampilkan hasil kalkulasi atau output dari input pengguna secara dinamis. |
<p> |
Block | Paragraf | Elemen utama untuk teks paragraf. Secara default memiliki margin atas dan bawah. |
<param> |
Embedded | Parameter objek | Digunakan dalam <object> untuk mengatur parameter tambahan. |
<picture> |
Media | Gambar responsif | Memungkinkan penggunaan beberapa sumber gambar berdasarkan ukuran layar atau resolusi. |
<pre> |
Block | Teks praformat | Menampilkan teks apa adanya termasuk spasi dan baris baru, cocok untuk kode. |
<progress> |
Form / UI | Status progres | Menampilkan indikator proses yang sedang berlangsung. |
<q> |
Inline | Kutipan pendek | Digunakan untuk kutipan singkat dalam satu baris, biasanya otomatis diberi tanda kutip. |
<rp> |
Ruby | Tanda fallback | Digunakan sebagai fallback untuk anotasi ruby pada browser lama. |
<rt> |
Ruby | Penjelasan teks ruby | Menampilkan teks kecil di atas/bawah karakter utama, umum pada bahasa Asia Timur. |
<ruby> |
Ruby | Anotasi karakter | Digunakan untuk menampilkan pelafalan atau arti karakter tertentu. |
<s> |
Inline | Teks tidak berlaku | Menandai teks yang sudah tidak relevan lagi, ditampilkan dengan coretan. |
<samp> |
Inline | Contoh output | Menampilkan contoh output dari program atau sistem. |
<script> |
Script | Menjalankan JavaScript | Menyisipkan atau memuat kode JavaScript untuk interaktivitas halaman. |
<search> |
Semantic (non-standar) | Area pencarian | Bukan bagian resmi HTML5, jarang didukung. Gunakan <form> + <input>. |
<section> |
Semantic Block | Bagian konten | Mengelompokkan konten berdasarkan tema tertentu dalam halaman. |
<select> |
Form | Pilihan dropdown | Menyediakan menu pilihan dropdown bagi pengguna. |
<small> |
Inline | Teks kecil | Menampilkan catatan kecil seperti disclaimer atau copyright. |
<source> |
Media | Sumber media | Digunakan dalam <audio>, <video>, atau <picture>. |
<span> |
Inline | Wadah inline | Digunakan untuk styling atau manipulasi teks kecil tanpa makna semantik. |
<strike> |
Inline (deprecated) | Teks dicoret | Sudah tidak direkomendasikan. Gunakan <s> atau <del>. |
<strong> |
Inline | Penekanan kuat | Memberi penekanan semantik penting, biasanya ditampilkan tebal. |
<style> |
Style | CSS internal | Menyisipkan aturan CSS langsung di dalam dokumen HTML. |
<sub> |
Inline | Teks subskrip | Menampilkan teks kecil di bawah garis teks utama. |
<summary> |
Interactive | Judul details | Elemen ringkasan yang dapat diklik untuk membuka <details>. |
<sup> |
Inline | Teks superskrip | Menampilkan teks kecil di atas garis teks utama. |
<svg> |
Graphics | Grafik vektor | Menyediakan grafik vektor yang tajam dan dapat diskalakan. |
<table> |
Table | Membuat tabel | Elemen utama untuk menampilkan data berbentuk baris dan kolom. Biasanya dikombinasikan dengan <thead>, <tbody>, dan <tfoot>. |
<tbody> |
Table | Isi tabel | Mengelompokkan baris data utama dalam tabel, membantu struktur dan styling. |
<td> |
Table | Sel data | Mewakili satu sel data dalam baris tabel (<tr>). |
<template> |
Script | Template tersembunyi | Menyimpan potongan HTML yang tidak dirender sampai diaktifkan dengan JavaScript. |
<textarea> |
Form | Input teks panjang | Digunakan untuk memasukkan teks multi-baris seperti komentar atau pesan. |
<tfoot> |
Table | Footer tabel | Berisi ringkasan atau total data di bagian bawah tabel. |
<th> |
Table | Header sel | Menandai sel judul kolom atau baris, biasanya ditampilkan tebal dan rata tengah. |
<thead> |
Table | Header tabel | Mengelompokkan baris judul tabel agar mudah dikenali browser dan screen reader. |
<time> |
Inline | Representasi waktu | Menandai tanggal atau waktu dalam format yang dapat dibaca mesin menggunakan atribut datetime. |
<title> |
Metadata | Judul halaman | Menentukan judul dokumen yang tampil di tab browser dan hasil pencarian. |
<tr> |
Table | Baris tabel | Mewakili satu baris dalam struktur tabel. |
<track> |
Media | Teks track video | Menyediakan subtitle, caption, atau deskripsi untuk elemen <video>. |
<tt> |
Inline (deprecated) | Teks monospace | Sudah tidak digunakan, digantikan oleh <code> atau CSS. |
<u> |
Inline | Garis bawah teks | Menandai teks non-artikulatoris seperti kesalahan ejaan atau istilah asing. |
<ul> |
List | Daftar tidak terurut | Membuat daftar dengan bullet tanpa urutan tertentu. |
<var> |
Inline | Variabel | Menandai nama variabel dalam konteks matematika atau pemrograman. |
<video> |
Media | Memutar video | Menampilkan video tanpa plugin tambahan, mendukung berbagai format. |
<wbr> |
Inline | Pemutus kata | Menentukan titik pemisah kata jika perlu dipatahkan saat responsif. |