Tag HTML dalah dasar utama yang harus kalian kuasai sebelum melangkah ke CSS dan JavaScript, karena seluruh struktur halaman web dibangun dari kumpulan tag ini.
Halo teman-teman, sering kali ketika belajar membuat website di kodelyly.com kalian mendengar kata “tag HTML” tetapi masih bingung sebenarnya ada berapa banyak tag, apa saja fungsinya, dan kapan setiap tag sebaiknya digunakan.
Tag HTML: Fungsi Dan Contoh Lengkapnya
Pada artikel ini kodelyly.com akan membahas Tag HTML: Fungsi dan Contoh Lengkapnya, mulai dari pengertian dasar sampai rangkuman hampir semua tag HTML5 yang umum digunakan beserta penjelasan singkatnya agar kalian bisa menjadikannya sebagai referensi cepat.
Secara sederhana, tag HTML adalah penanda (markup) yang memberi tahu browser jenis dan makna sebuah konten. Misalnya <p> untuk paragraf, <h1> untuk judul utama, <a> untuk link, hingga <img> untuk menampilkan gambar. Tag-tag ini digabungkan menjadi struktur dokumen HTML yang rapi dan mudah dibaca.
Contoh Struktur Dasar Tag HTML
Berikut contoh struktur dasar halaman HTML yang menggunakan beberapa tag penting.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar Tag HTML di kodelyly.com</title>
</head>
<body>
<header>
<h1>Belajar Tag HTML</h1>
<nav>
<a href="#pengertian">Pengertian</a> |
<a href="#tabel-tag">Daftar Tag</a>
</nav>
</header>
<main>
<section id="pengertian">
<h2>Apa itu Tag HTML?</h2>
<p>Tag HTML adalah elemen penyusun halaman web.</p>
</section>
</main>
<footer>
<p>© 2025 kodelyly.com</p>
</footer>
</body>
</html>
Kalian bisa melihat kombinasi tag struktur (<html>, <head>, <body>), layout (<header>, <main>, <section>, <footer>), dan konten (<h1>, <h2>, <p>, <a>).
Daftar Hampir Semua Tag HTML5 Dan Fungsinya
Bagian ini berisi daftar hampir semua tag HTML5 yang umum dipakai (tanpa tag usang/obsolete yang jarang digunakan). Gunakan tabel ini sebagai “cheat sheet” saat ngoding.
| Tag | Kategori | Fungsi Utama |
|---|---|---|
<!DOCTYPE> | Dokumen | Mendefinisikan tipe dokumen HTML |
<html> | Struktur | Elemen root yang membungkus seluruh isi halaman |
<head> | Struktur | Berisi informasi metadata, judul, link CSS, script, dsb |
<title> | Metadata | Menentukan judul halaman di tab browser |
<meta> | Metadata | Menyimpan meta informasi (charset, viewport, deskripsi SEO) |
<link> | Metadata | Menghubungkan dokumen dengan resource eksternal (CSS, icon) |
<style> | Presentasi | Menulis CSS langsung di dalam dokumen HTML |
<script> | Interaktif | Menyisipkan atau memanggil kode JavaScript |
<body> | Struktur | Berisi semua konten yang tampil di layar |
<header> | Layout | Bagian kepala halaman atau section (judul, logo, menu) |
<main> | Layout | Konten utama yang unik untuk halaman tersebut |
<footer> | Layout | Bagian kaki halaman (copyright, link penting) |
<nav> | Layout | Sekumpulan link navigasi utama |
<section> | Layout | Mengelompokkan bagian konten bertema tertentu |
<article> | Layout | Konten mandiri seperti artikel, postingan blog |
<aside> | Layout | Konten sampingan seperti sidebar, catatan tambahan |
<h1>–<h6> | Teks | Judul dan subjudul dengan tingkat hierarki berbeda |
<p> | Teks | Menampilkan paragraf teks |
<br> | Teks | Membuat baris baru (line break) |
<hr> | Teks | Menampilkan garis pemisah horizontal |
<span> | Inline | Pembungkus kecil untuk styling teks inline |
<div> | Block | Pembungkus blok umum untuk layout dan grouping |
<strong> | Teks | Menandai teks penting (biasanya bold, penting secara makna) |
<b> | Teks | Menebalkan teks tanpa memberi makna penting |
<em> | Teks | Menandai penekanan teks (biasanya miring, penting secara makna) |
<i> | Teks | Memiringkan teks tanpa penekanan makna khusus |
<u> | Teks | Menggarisbawahi teks |
<small> | Teks | Menampilkan teks lebih kecil, sering untuk catatan |
<mark> | Teks | Menyorot teks seperti stabilo |
<sup> | Teks | Teks superscript (atas), misalnya pangkat |
<sub> | Teks | Teks subscript (bawah), misalnya rumus kimia |
<blockquote> | Teks | Kutipan panjang dari sumber lain |
<q> | Teks | Kutipan pendek dalam satu baris |
<code> | Teks | Menampilkan potongan kode dalam format monospace |
<pre> | Teks | Menampilkan teks apa adanya termasuk spasi dan baris baru |
<kbd> | Teks | Menunjukkan input dari keyboard |
<samp> | Teks | Menunjukkan output contoh dari program |
<var> | Teks | Mewakili variabel dalam konteks pemrograman atau matematika |
<abbr> | Teks | Menandai singkatan (bisa diberi kepanjangan dengan atribut title) |
<cite> | Teks | Menandai judul karya (buku, film, dsb) |
<dfn> | Teks | Menandai istilah yang sedang didefinisikan |
<time> | Teks | Menandai tanggal/waktu yang bisa dibaca mesin |
<address> | Teks | Informasi kontak atau alamat |
<a> | Link | Membuat hyperlink ke URL lain atau anchor di halaman |
<img> | Media | Menampilkan gambar |
<figure> | Media | Mengelompokkan gambar/ilustrasi dengan keterangan |
<figcaption> | Media | Keterangan (caption) untuk <figure> |
<audio> | Media | Menyematkan audio di halaman |
<video> | Media | Menyematkan video di halaman |
<source> | Media | Menentukan sumber media alternatif untuk <audio>/<video> |
<track> | Media | Menyediakan teks tambahan (subtitle, caption) untuk video |
<canvas> | Media | Area gambar untuk menggambar via JavaScript |
<svg> | Media | Menyematkan grafik vektor SVG |
<map> | Media | Mendefinisikan image map (area klik pada gambar) |
<area> | Media | Area klik dalam image map |
<table> | Tabel | Membuat tabel data |
<caption> | Tabel | Judul/keterangan untuk tabel |
<thead> | Tabel | Bagian kepala tabel (judul kolom) |
<tbody> | Tabel | Bagian isi utama tabel |
<tfoot> | Tabel | Bagian kaki tabel (ringkasan, total) |
<tr> | Tabel | Baris pada tabel |
<th> | Tabel | Sel judul (table header) |
<td> | Tabel | Sel data pada tabel |
<colgroup> | Tabel | Mengelompokkan kolom untuk styling |
<col> | Tabel | Mewakili kolom tunggal dalam tabel |
<ul> | List | Daftar tidak berurutan (bullet) |
<ol> | List | Daftar berurutan (angka, huruf) |
<li> | List | Item dalam <ul> atau <ol> |
<dl> | List | Description list (daftar istilah dan definisi) |
<dt> | List | Istilah yang dijelaskan dalam description list |
<dd> | List | Definisi dari istilah dalam description list |
<form> | Form | Membuat form input untuk mengirim data |
<label> | Form | Label teks untuk elemen input |
<input> | Form | Elemen input serbaguna (teks, password, checkbox, dsb) |
<textarea> | Form | Input teks multi-baris |
<button> | Form | Tombol yang bisa diklik |
<select> | Form | Dropdown pilihan |
<option> | Form | Opsi di dalam <select> |
<optgroup> | Form | Mengelompokkan beberapa <option> |
<fieldset> | Form | Mengelompokkan elemen form terkait |
<legend> | Form | Judul untuk <fieldset> |
<datalist> | Form | Menyediakan daftar saran untuk <input> |
<output> | Form | Menampilkan hasil perhitungan dari form |
<progress> | Form | Menampilkan progress bar |
<meter> | Form | Menampilkan nilai dalam rentang tertentu (misalnya level baterai) |
<details> | Interaktif | Menampilkan konten yang bisa dibuka/tutup |
<summary> | Interaktif | Judul ringkas untuk elemen <details> |
<dialog> | Interaktif | Kotak dialog/modal |
<template> | Struktur | Menyimpan potongan HTML untuk digunakan via JavaScript |
<slot> | Web Component | Titik tempat konten disisipkan dalam web component |
<bdi> | Teks | Mengisolasi arah teks untuk bahasa yang berbedabeda |
<bdo> | Teks | Memaksa arah tampilan teks (LTR/RTL) |
<noscript> | Interaktif | Konten alternatif jika JavaScript tidak aktif |
<embed> | Media | Menyematkan konten eksternal (Flash, plugin lama, dll) |
<object> | Media | Menyematkan objek multimedia atau aplikasi |
Dengan daftar ini kalian sudah mencakup hampir semua tag yang aktif digunakan di HTML5 modern.
Tips Menggunakan Tag HTML Dengan Benar
- Gunakan tag sesuai semantiknya, misalnya
<header>untuk bagian kepala halaman,<nav>untuk menu,<main>untuk konten utama. - Gunakan hanya satu
<h1>per halaman, lalu susun heading berikutnya dengan urutan<h2>,<h3>, dan seterusnya. - Pastikan struktur selalu rapi: setiap tag pembuka memiliki tag penutup yang sesuai (kecuali void element seperti
<br>,<img>,<input>). - Manfaatkan tag semantik agar SEO kodelyly.com menjadi lebih baik dan aksesibilitas untuk pembaca maupun screen reader meningkat.
Kesimpulan
Tag HTML: Fungsi dan Contoh Lengkapnya sangat penting karena setiap halaman web tersusun dari kombinasi tag yang saling bekerja sama untuk membangun struktur, tampilan, dan makna konten. Dengan memahami daftar hampir semua tag HTML5 di atas beserta fungsinya, kalian bisa menulis kode yang lebih rapi, semantik, mudah dipelihara, dan ramah mesin pencari.
Sekian artikel dari kodelyly.com, semoga tabel referensi tag HTML ini membantu kalian saat belajar maupun ketika mengerjakan proyek web nyata.