Di era digital seperti sekarang, website menjadi salah satu media utama untuk menyampaikan informasi, membangun bisnis, hingga membuat aplikasi berbasis web. Di balik tampilan sebuah website yang rapi dan interaktif, terdapat teknologi dasar yang berperan penting, yaitu HTML.
Bagi pemula yang baru belajar web development, memahami HTML adalah langkah awal yang wajib dilakukan. Dengan mempelajari HTML, kamu akan memahami bagaimana struktur halaman web dibuat, bagaimana elemen ditampilkan di browser, dan bagaimana konten dapat disusun dengan lebih teratur.
Artikel ini akan membahas pengertian HTML, cara kerjanya, struktur dasar dokumen, serta tag-tag HTML yang paling sering digunakan dalam pembuatan website.
HTML: Pengertian, Cara Kerja, dan Tag yang Paling Penting
HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun struktur halaman web. Bisa dibilang, HTML merupakan fondasi utama sebuah website karena mengatur bagaimana teks, gambar, video, tombol, hingga formulir ditampilkan di browser.
Meski sering digunakan dalam proses pembuatan website, HTML sebenarnya bukan termasuk bahasa pemrograman. HTML tidak memiliki logika seperti perulangan atau perhitungan, melainkan berfungsi sebagai bahasa penanda yang memberi struktur dan arti pada setiap konten di dalam halaman web. Tanpa HTML, tampilan website akan terlihat berantakan dan tidak memiliki susunan yang jelas.
Cara Kerja HTML
HTML bekerja dengan cara dibaca dan diproses oleh browser seperti Google Chrome, Mozilla Firefox, atau Microsoft Edge. Setiap tag HTML yang ditulis akan diterjemahkan oleh browser menjadi elemen visual, misalnya heading, paragraf, gambar, maupun tabel.
Prosesnya dimulai saat browser membaca file HTML, kemudian membangun struktur halaman yang disebut DOM (Document Object Model). Setelah struktur terbentuk, browser akan menampilkan isi halaman ke layar sehingga pengguna bisa melihat dan berinteraksi dengan website tersebut.
Struktur Dasar Dokumen HTML
Sebelum membuat halaman web, kita perlu memahami struktur dasar dokumen HTML. Struktur ini berfungsi sebagai kerangka utama agar browser dapat membaca dan menampilkan halaman dengan benar. Hampir semua website menggunakan susunan dasar HTML yang serupa.
Berikut contoh struktur dasar HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman</title>
</head>
<body>
Konten ditampilkan di sini
</body>
</html>
Penjelasan Struktur HTML
Setiap bagian pada dokumen HTML memiliki fungsi masing-masing. Berikut penjelasannya:
-
<!DOCTYPE html>
Digunakan untuk memberi tahu browser bahwa dokumen menggunakan standar HTML5. Tag ini biasanya selalu ditulis di bagian paling atas dokumen. -
<html>
Merupakan elemen utama yang membungkus seluruh isi halaman HTML. Atributlang="id"menandakan bahwa bahasa utama halaman menggunakan Bahasa Indonesia. -
<head>
Bagian ini berisi informasi tentang halaman yang tidak langsung tampil di browser, seperti judul halaman, metadata, file CSS, maupun pengaturan lainnya. -
<meta charset="UTF-8">
Berfungsi untuk menentukan encoding karakter agar teks dapat ditampilkan dengan benar, termasuk huruf dan simbol khusus. -
<title>
Digunakan untuk menentukan judul halaman yang muncul pada tab browser. -
<body>
Bagian utama yang berisi seluruh konten yang akan ditampilkan kepada pengguna, seperti teks, gambar, tombol, tabel, dan lainnya.
Dengan memahami struktur dasar ini, kamu akan lebih mudah mempelajari tag HTML lainnya dan mulai membangun halaman web yang rapi serta terstruktur.
Struktur ini wajib ada agar browser dapat mengenali dokumen sebagai HTML5 dan menampilkan halaman dengan benar.
Tag HTML yang Paling Penting untuk Dipelajari
Saat belajar HTML, ada beberapa tag yang wajib dipahami karena sering digunakan dalam pembuatan website. Tag-tag ini membantu membangun struktur halaman, menampilkan konten, hingga membuat interaksi dengan pengguna.
1. Tag Struktur Dasar HTML
Tag struktur adalah fondasi utama dalam setiap dokumen HTML. Tanpa tag ini, browser tidak dapat membaca halaman web dengan benar.
<html>→ membungkus seluruh isi halaman<head>→ berisi informasi halaman dan metadata<body>→ tempat seluruh konten website ditampilkan
Ketiga tag tersebut selalu digunakan dalam hampir semua halaman website.
2. Tag Semantic HTML
Semantic HTML adalah tag yang memiliki arti atau fungsi yang jelas. Tag semantic membantu mesin pencari memahami struktur halaman dan membuat website lebih ramah SEO serta aksesibilitas.
<header>→ bagian kepala halaman<main>→ isi utama halaman<section>→ membagi halaman menjadi beberapa bagian<article>→ konten mandiri seperti artikel atau berita<footer>→ bagian penutup halaman
Penggunaan semantic HTML juga membantu struktur website menjadi lebih rapi dan mudah dipahami developer lain.
3. Tag Konten HTML
Tag konten digunakan untuk menampilkan isi utama halaman website, seperti teks, gambar, dan tautan.
<h1> - <h6>→ membuat judul dan subjudul<p>→ membuat paragraf<a>→ membuat link atau tautan<img>→ menampilkan gambar
Tag-tag ini termasuk elemen HTML yang paling sering digunakan dalam pembuatan website modern.
4. Tag Form HTML
Form HTML digunakan untuk menerima input dari pengguna, misalnya pada halaman login, formulir kontak, atau pencarian.
<form>→ wadah utama formulir<input>→ kolom input data<textarea>→ input teks panjang<select>→ membuat pilihan dropdown<button>→ tombol aksi
Untuk memahami atribut penting seperti
type, name, dan
required, silakan baca:
5. Tag Non-Semantic HTML
Tag non-semantic tidak memiliki arti khusus terhadap isi halaman, tetapi sangat sering digunakan untuk kebutuhan layout dan styling.
<div>→ wadah blok untuk layout<span>→ wadah teks dalam satu baris
Walaupun sederhana, kedua tag ini sangat penting dalam penggunaan CSS dan JavaScript.
Daftar Lengkap Tag HTML dan Penjelasannya
Setelah memahami struktur dasar HTML, sekarang saatnya mengenal berbagai tag HTML yang sering digunakan dalam pembuatan website. Pada tabel berikut, kamu bisa melihat fungsi dan penggunaan masing-masing tag HTML.
Tabel Tag HTML
| Tag | Tipe | Fungsi Utama | Penjelasan |
|---|---|---|---|
<!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. |
Ringkasan
Pada artikel ini kamu sudah mempelajari berbagai tag HTML yang sering digunakan dalam pembuatan website, mulai dari tag struktur dasar, tag semantic, tag konten, hingga tag formulir dan non-semantic.
Setiap tag memiliki fungsi yang berbeda, namun semuanya bekerja bersama untuk membentuk halaman web yang utuh, rapi, dan mudah dibaca oleh browser maupun mesin pencari.
Kesimpulan
HTML memiliki banyak tag yang digunakan sesuai kebutuhan dalam membangun sebuah website.
Dengan memahami tag-tag penting seperti <html>, <body>,
<p>, hingga <form>, kamu sudah memiliki dasar yang kuat
untuk mulai membuat halaman web sendiri.
Langkah selanjutnya adalah terus berlatih dan mencoba langsung menulis kode HTML agar lebih cepat paham dan terbiasa dengan strukturnya.
