Referensi Tag HTML
Jelajahi semua tag HTML5 dengan deskripsi dan contoh penggunaan.
93 tag
| Tag | Deskripsi | Contoh |
|---|---|---|
<!DOCTYPE> | Defines the document type | <!DOCTYPE html> |
<html> | Root element of an HTML page | <html lang="en"> |
<head> | Container for metadata | <head>...</head> |
<title> | Defines the document title shown in browser tab | <title>Page Title</title> |
<body> | Contains the visible page content | <body>...</body> |
<meta> | Defines metadata about the document | <meta charset="UTF-8"> |
<link> | Links to external resources (CSS, icons) | <link rel="stylesheet" href="style.css"> |
<script> | Embeds or references JavaScript | <script src="app.js"></script> |
<style> | Embeds CSS styles | <style>body { margin: 0; }</style> |
<base> | Base URL for all relative URLs in the page | <base href="https://example.com/"> |
<h1>–<h6> | Heading levels 1 through 6 | <h1>Page Title</h1> |
<p> | Paragraph | <p>Paragraph text.</p> |
<br> | Line break | Line one<br>Line two |
<hr> | Thematic break (horizontal rule) | <hr> |
<pre> | Preformatted text (preserves whitespace) | <pre> code here </pre> |
<blockquote> | Long block quotation from another source | <blockquote cite="url">Quote</blockquote> |
<q> | Short inline quotation | <q>Short quote</q> |
<abbr> | Abbreviation or acronym | <abbr title="World Health Organization">WHO</abbr> |
<address> | Contact information for the article or page | <address>Email: contact@example.com</address> |
<cite> | Title of a cited creative work | <cite>Hamlet</cite> |
<code> | Inline code fragment | <code>console.log()</code> |
<dfn> | Term being defined | <dfn>HTML</dfn> is a markup language. |
<kbd> | Keyboard input | Press <kbd>Ctrl+C</kbd> |
<samp> | Sample output from a program | <samp>Error 404</samp> |
<var> | Variable in math or programming | <var>x</var> = 5 |
<sub> | Subscript text | H<sub>2</sub>O |
<sup> | Superscript text | E = mc<sup>2</sup> |
<mark> | Highlighted/marked text | <mark>important</mark> |
<del> | Deleted text | <del>old text</del> |
<ins> | Inserted text | <ins>new text</ins> |
<small> | Small print or side comments | <small>Terms apply</small> |
<strong> | Strong importance (bold) | <strong>Important</strong> |
<em> | Emphasized text (italic) | <em>emphasis</em> |
<b> | Bold text (stylistic, no extra importance) | <b>bold</b> |
<i> | Italic text (stylistic, or technical terms) | <i>italic</i> |
<u> | Underlined text | <u>underline</u> |
<s> | Strikethrough text (no longer accurate) | <s>old price</s> |
<span> | Generic inline container for styling | <span class="highlight">text</span> |
<ul> | Unordered list | <ul><li>Item</li></ul> |
<ol> | Ordered (numbered) list | <ol><li>Step 1</li></ol> |
<li> | List item (in ul or ol) | <li>List item</li> |
<dl> | Description list | <dl><dt>Term</dt><dd>Definition</dd></dl> |
<dt> | Term in a description list | <dt>HTML</dt> |
<dd> | Description in a description list | <dd>HyperText Markup Language</dd> |
<a> | Hyperlink | <a href="https://example.com">Link</a> |
<nav> | Navigation links section | <nav>...</nav> |
<header> | Introductory content or navigation | <header><h1>Site Title</h1></header> |
<footer> | Footer for a section or page | <footer>© 2025</footer> |
<main> | Main content of the document | <main>...</main> |
<article> | Self-contained composition (blog post, news) | <article>...</article> |
<section> | Thematic grouping of content | <section>...</section> |
<aside> | Content tangentially related to main content | <aside>Sidebar</aside> |
<div> | Generic block-level container | <div class="card">...</div> |
<details> | Disclosure widget (expandable) | <details><summary>More</summary>...</details> |
<summary> | Summary/caption for a details element | <summary>Show more</summary> |
<dialog> | Dialog box or window | <dialog open>Content</dialog> |
<img> | Embeds an image | <img src="photo.jpg" alt="Description"> |
<audio> | Embeds audio content | <audio src="sound.mp3" controls></audio> |
<video> | Embeds video content | <video src="movie.mp4" controls></video> |
<source> | Media source for audio/video/picture | <source src="video.webm" type="video/webm"> |
<track> | Text tracks for video/audio (subtitles) | <track kind="subtitles" src="sub.vtt"> |
<picture> | Container for multiple image sources | <picture><source srcset="img.webp"><img src="img.jpg"></picture> |
<figure> | Self-contained content with optional caption | <figure><img src="img.jpg"><figcaption>Caption</figcaption></figure> |
<figcaption> | Caption for a figure element | <figcaption>Image caption</figcaption> |
<canvas> | Drawing surface for JavaScript graphics | <canvas id="myCanvas" width="200" height="100"></canvas> |
<svg> | Inline SVG vector graphics | <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg> |
<iframe> | Embeds another HTML page | <iframe src="https://example.com"></iframe> |
<embed> | Embeds external content (plugin) | <embed src="file.pdf" type="application/pdf"> |
<object> | Embeds external resource (object) | <object data="file.pdf" type="application/pdf"></object> |
<table> | Table | <table><tr><td>Cell</td></tr></table> |
<thead> | Header rows of a table | <thead><tr><th>Col</th></tr></thead> |
<tbody> | Body rows of a table | <tbody>...</tbody> |
<tfoot> | Footer rows of a table | <tfoot>...</tfoot> |
<tr> | Table row | <tr><td>Cell 1</td><td>Cell 2</td></tr> |
<th> | Header cell | <th scope="col">Name</th> |
<td> | Data cell | <td>Content</td> |
<caption> | Table caption | <caption>Sales Data 2025</caption> |
<colgroup> | Group of table columns | <colgroup><col span="2"></colgroup> |
<col> | Table column properties | <col style="width: 50%"> |
<form> | HTML form for user input | <form action="/submit" method="POST">...</form> |
<input> | Input control (text, checkbox, radio, etc.) | <input type="text" name="username"> |
<textarea> | Multi-line text input | <textarea rows="4" name="message"></textarea> |
<button> | Clickable button | <button type="submit">Submit</button> |
<select> | Drop-down selection list | <select><option>Option 1</option></select> |
<option> | Option in a select element | <option value="1">Option 1</option> |
<optgroup> | Group of related options in select | <optgroup label="Group"><option>...</option></optgroup> |
<label> | Label for a form element | <label for="email">Email:</label> |
<fieldset> | Group of related form elements | <fieldset><legend>Personal</legend>...</fieldset> |
<legend> | Caption for a fieldset | <legend>Personal Info</legend> |
<datalist> | List of predefined options for an input | <datalist id="browsers"><option value="Chrome"></datalist> |
<output> | Result of a calculation | <output name="result">0</output> |
<progress> | Progress indicator | <progress value="70" max="100">70%</progress> |
<meter> | Scalar measurement within a range | <meter value="0.7" min="0" max="1">70%</meter> |
Tentang alat ini
Referensi Tag HTML adalah alat pencarian komprehensif yang mencantumkan semua tag HTML5 standar yang diorganisir berdasarkan kategori.
Setiap entri mencakup tujuan tag, deskripsi singkat, dan contoh penggunaan praktis untuk mempercepat pengembangan dan pembelajaran.
Cara penggunaan
- Ketik nama tag di kotak pencarian atau pilih filter kategori.
- Klik nama tag untuk menyalinnya ke clipboard.
- Baca kolom Deskripsi untuk memahami tujuan tag.
- Periksa kolom Contoh untuk cuplikan kode cepat.
Kasus penggunaan
Gunakan saat tidak ingat tag tertentu, saat menjelajahi elemen HTML5, atau sebagai panduan cepat untuk pemula HTML.
Pertanyaan umum
- Apakah semua tag HTML5 disertakan? — Ya, semua tag utama yang didefinisikan dalam spesifikasi W3C HTML5 tercakup.
- Bagaimana cara menyalin nama tag? — Klik nama tag di tabel dan akan langsung disalin ke clipboard.
- Bagaimana cara menggunakan filter kategori? — Klik salah satu tombol kategori di atas untuk hanya menampilkan tag dalam kategori tersebut.