Tag Struktur Dasar
| Tag | Fungsi | Contoh |
|---|---|---|
<!DOCTYPE html> | Menentukan tipe dokumen HTML | <!DOCTYPE html> |
<html> | Tag utama dokumen HTML | <html lang="id"> |
<head> | Metadata dan link eksternal | <head><title>Judul</title></head> |
<title> | Judul halaman di tab browser | <title>Profil Kang</title> |
<body> | Konten utama halaman | <body>...konten...</body> |
📝 Tag Format Teks
| Tag | Fungsi | Contoh |
|---|---|---|
<h1>–<h6> | Heading dari besar ke kecil | <h1>Judul Utama</h1> |
<p> | Paragraf | <p>Ini paragraf.</p> |
<br> | Baris baru | Baris pertama<br>Baris kedua |
<b> | Teks tebal | <b>teks penting</b> |
<i> | Teks miring | <i>catatan</i> |
<u> | Garis bawah | <u>penekanan</u> |
<pre> | Teks dengan format asli | <pre> teks spasi</pre> |
<hr> | Garis horizontal | <hr> |
<strong> | Teks penting (SEO & aksesibilitas) | <strong>Wajib dibaca</strong> |
<em> | Penekanan emosional | <em>perlu diperhatikan</em> |
<mark> | Sorotan teks | <mark>highlight</mark> |
🖼️ Tag Media
| Tag | Fungsi | Contoh |
|---|---|---|
<img> | Menampilkan gambar | <img src="foto.jpg" alt="Foto"> |
<video> | Menampilkan video | <video controls><source src="vid.mp4"></video> |
<audio> | Menampilkan audio | <audio controls><source src="lagu.mp3"></audio> |
<source> | Sumber media alternatif | <source src="file.webm" type="video/webm"> |
<figure> | Gambar dengan caption | <figure><img><figcaption>Deskripsi</figcaption></figure> |
<figcaption> | Keterangan gambar | <figcaption>Ini gambar saya</figcaption> |
🔗 Tag Navigasi dan Link
| Tag | Fungsi | Contoh |
|---|---|---|
<a> | Hyperlink | <a href="https://example.com">Klik</a> |
<nav> | Navigasi | <nav><ul><li>...</li></ul></nav> |
<ul> | List tak berurutan | <ul><li>Item</li></ul> |
<ol> | List berurutan | <ol><li>Item</li></ol> |
<li> | Item dalam list | <li>Data</li> |
🧩 Tag Formulir
| Tag | Fungsi | Contoh |
|---|---|---|
<form> | Membuat form | <form action="/submit">...</form> |
<input> | Input data | <input type="text"> |
<textarea> | Kotak teks panjang | <textarea></textarea> |
<button> | Tombol | <button>Kirim</button> |
<select> | Dropdown | <select><option>1</option></select> |
<option> | Pilihan dropdown | <option value="A">A</option> |
<label> | Label input | <label for="nama">Nama:</label> |
<fieldset> | Kelompokkan input | <fieldset>...</fieldset> |
<legend> | Judul fieldset | <legend>Data Pribadi</legend> |
🧮 Tag Tabel
| Tag | Fungsi | Contoh |
|---|---|---|
<table> | Tabel data | <table><tr><td>...</td></tr></table> |
<tr> | Baris tabel | <tr><td>...</td></tr> |
<td> | Sel data | <td>Isi</td> |
<th> | Header kolom | <th>Judul</th> |
<caption> | Judul tabel | <caption>Data Siswa</caption> |
<thead> | Bagian atas tabel | <thead><tr>...</tr></thead> |
<tbody> | Isi tabel | <tbody><tr>...</tr></tbody> |
<tfoot> | Bagian bawah tabel | <tfoot><tr>...</tr></tfoot> |
🧠 Tag Semantik HTML5
| Tag | Fungsi | Contoh |
|---|---|---|
<main> | Konten utama | <main>...</main> |
<section> | Bagian konten | <section>...</section> |
<article> | Artikel mandiri | <article>...</article> |
<aside> | Sidebar | <aside>...</aside> |
<header> | Bagian atas | <header>...</header> |
<footer> | Bagian bawah | <footer>...</footer> |
<time> | Tanggal/waktu | <time datetime="2025-08-06">6 Agustus 2025</time> |
🧪 Tag Interaktif & Script
| Tag | Fungsi | Contoh |
|---|---|---|
<script> | Menyisipkan JavaScript | <script>alert("Halo Kang!")</script> |
<noscript> | Alternatif jika JS tidak aktif | <noscript>JS tidak aktif</noscript> |
<canvas> | Gambar dinamis | <canvas id="myCanvas"></canvas> |
<iframe> | Menyisipkan halaman lain | <iframe src="page.html"></iframe> |
<embed> | Menyisipkan media eksternal | <embed src="file.pdf"> |