Daftar Tag HTML Lengkap dan Fungsinya

Tag HTML adalah elemen dasar yang digunakan untuk membuat struktur dan konten website. Memahami daftar tag HTML lengkap dan fungsinya sangat penting bagi setiap web developer.

Daftar isi

Tag Text Formatting
Tag List
Tag Table
Tag HTML5 Semantic
Tabel Referensi Lengkap
Kesimpulan

Baca juga: Panduan Standar Penulisan HTML (Best Practice HTML5)

Apa itu Tag HTML?

Tag HTML adalah kode yang ditulis di antara tanda kurung sudut < dan >. Sebagian besar tag HTML dan fungsinya memiliki pasangan opening dan closing tag:

<tagname>Konten di sini</tagname>Code language: HTML, XML (xml)

Jenis-jenis Tag:

Paired Tags – Memiliki opening dan closing tag
Self-closing Tags – Tidak memerlukan closing tag
Semantic Tags – Tag HTML5 dengan makna jelas

Tag Text Formatting

Fungsi tag HTML untuk formatting teks:

Bold dan Italic

`<strong>` – Bold Semantic

Fungsi: Teks tebal dengan emphasis penting

<p>Ini <strong>sangat penting</strong>!</p>Code language: HTML, XML (xml)

`<b>` – Bold Visual

Fungsi: Teks tebal tanpa emphasis khusus

<p>Ini <b>teks tebal</b></p>Code language: HTML, XML (xml)

`<em>` – Italic Semantic

Fungsi: Teks miring dengan emphasis

<p>Ini <em>perlu diperhatikan</em></p>Code language: HTML, XML (xml)

`<i>` – Italic Visual

Fungsi: Teks miring visual

<p>Ini <i>teks miring</i></p>Code language: HTML, XML (xml)

Text Decoration

`<u>` – Underline

Fungsi: Teks bergaris bawah

<p>Ini <u>teks underline</u></p>Code language: HTML, XML (xml)

`<mark>` – Highlight

Fungsi: Teks dengan background highlight

<p>Ini <mark>teks highlight</mark></p>Code language: HTML, XML (xml)

`<del>` – Deleted Text

Fungsi: Teks yang dihapus (strikethrough)

<p>Harga: <del>Rp 150.000</del> Rp 100.000</p>Code language: HTML, XML (xml)

`<ins>` – Inserted Text

Fungsi: Teks yang ditambahkan

<p>Total: <ins>Rp 100.000</ins></p>Code language: HTML, XML (xml)

Special Text

`<sub>` – Subscript

Fungsi: Teks subscript (di bawah)

<p>H<sub>2</sub>O</p>Code language: HTML, XML (xml)

`<sup>` – Superscript

Fungsi: Teks superscript (di atas)

<p>E = mc<sup>2</sup></p>Code language: HTML, XML (xml)

`<small>` – Small Text

Fungsi: Teks lebih kecil

<p>Harga <small>(belum termasuk pajak)</small></p>Code language: HTML, XML (xml)

`<code>` – Code

Fungsi: Menampilkan kode inline

<p>Gunakan tag <code>&lt;div&gt;</code></p>Code language: HTML, XML (xml)

`<pre>` – Preformatted

Fungsi: Teks dengan format asli (spasi dipertahankan)

<pre>
function hello() {
    console.log("Hello");
}
</pre>Code language: JavaScript (javascript)

`<blockquote>` – Block Quote

Fungsi: Kutipan blok

<blockquote>
    <p>Ini adalah kutipan panjang.</p>
</blockquote>Code language: HTML, XML (xml)

`<q>` – Inline Quote

Fungsi: Kutipan inline

<p>Kata pepatah, <q>Belajar adalah investasi</q>.</p>Code language: HTML, XML (xml)

`<abbr>` – Abbreviation

Fungsi: Singkatan atau akronim

<p><abbr title="HyperText Markup Language">HTML</abbr></p>Code language: HTML, XML (xml)

Tag HTML5 lengkap untuk membuat list:

`<ul>` – Unordered List

Fungsi: List tanpa nomor (bullet points)

<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
</ul>Code language: HTML, XML (xml)

`<ol>` – Ordered List

Fungsi: List dengan nomor urut

<ol>
    <li>Langkah 1</li>
    <li>Langkah 2</li>
    <li>Langkah 3</li>
</ol>Code language: HTML, XML (xml)

Atribut:

type – Jenis nomor (1, A, a, I, i)
start – Nomor awal
reversed – Urutan terbalik

`<li>` – List Item

Fungsi: Item dalam list

`<dl>` – Description List

Fungsi: List deskripsi (term dan definisi)

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>Code language: HTML, XML (xml)

`<dt>` – Description Term

Fungsi: Term/istilah

`<dd>` – Description Definition

Fungsi: Definisi term

Tag Table

Tag HTML dan fungsinya untuk tabel:

Basic Table

`<table>` – Table

Fungsi: Membuat tabel

`<tr>` – Table Row

Fungsi: Baris tabel

`<th>` – Table Header

Fungsi: Cell header (tebal, center)

`<td>` – Table Data

Fungsi: Cell data

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>23</td>
    </tr>
</table>Code language: HTML, XML (xml)

Advanced Table

`<thead>` – Table Head

Fungsi: Mengelompokkan header

`<tbody>` – Table Body

Fungsi: Mengelompokkan body

`<tfoot>` – Table Footer

Fungsi: Mengelompokkan footer

`<caption>` – Table Caption

Fungsi: Judul tabel

<table>
    <caption>Daftar Siswa</caption>
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Nilai</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Ahmad</td>
            <td>85</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Rata-rata</td>
            <td>85</td>
        </tr>
    </tfoot>
</table>Code language: HTML, XML (xml)

Atribut:

colspan – Gabung kolom
rowspan – Gabung baris

Tag HTML5 Semantic

Tag HTML5 lengkap yang semantic:

`<header>` – Header

Fungsi: Header section

<header>
    <h1>Logo Website</h1>
    <nav><!-- Navigation --></nav>
</header>Code language: HTML, XML (xml)

`<nav>` – Navigation

Fungsi: Navigation menu

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>Code language: HTML, XML (xml)

`<main>` – Main

Fungsi: Konten utama (hanya 1x per halaman)

<main>
    <article><!-- Main content --></article>
</main>Code language: HTML, XML (xml)

`<article>` – Article

Fungsi: Konten independen (blog, berita)

<article>
    <h2>Judul Artikel</h2>
    <p>Konten artikel...</p>
</article>Code language: HTML, XML (xml)

`<section>` – Section

Fungsi: Section konten dengan heading

<section>
    <h2>Tentang Kami</h2>
    <p>Informasi...</p>
</section>Code language: HTML, XML (xml)

`<aside>` – Aside

Fungsi: Konten sampingan (sidebar)

<aside>
    <h3>Artikel Terkait</h3>
    <ul>
        <li><a href="#">Artikel 1</a></li>
    </ul>
</aside>Code language: HTML, XML (xml)

`<footer>` – Footer

Fungsi: Footer section

<footer>
    <p>&copy; 2024 Website</p>
</footer>Code language: HTML, XML (xml)

`<details>` – Details

Fungsi: Konten expand/collapse

<details>
    <summary>Klik untuk detail</summary>
    <p>Konten detail...</p>
</details>Code language: HTML, XML (xml)

`<summary>` – Summary

Fungsi: Judul untuk details

`<time>` – Time

Fungsi: Tanggal/waktu

<time datetime="2024-01-15">15 Januari 2024</time>Code language: HTML, XML (xml)

`<address>` – Address

Fungsi: Informasi kontak

<address>
    Email: <a href="mailto:info@example.com">info@example.com</a>
</address>Code language: HTML, XML (xml)

Tabel Referensi Lengkap

Kategori Tag HTML

Kategori	Tag Utama	Fungsi
Document	`<!DOCTYPE>`, `<html>`, `<head>`, `<body>`	Struktur dasar
Metadata	`<meta>`, `<title>`, `<link>`, `<style>`	Informasi dokumen
Text	`<p>`, `<h1>-<h6>`, `<strong>`, `<em>`	Format teks
List	`<ul>`, `<ol>`, `<li>`, `<dl>`	Daftar
Link/Media	`<a>`, `<img>`, `<audio>`, `<video>`	Link dan media
Table	`<table>`, `<tr>`, `<th>`, `<td>`	Tabel
Form	`<form>`, `<input>`, `<select>`, `<button>`	Form input
Semantic	`<header>`, `<nav>`, `<main>`, `<footer>`	Struktur semantic

Tag Berdasarkan Prioritas

Tag Wajib (Must Know):

<!DOCTYPE html>, <html>, <head>, <body>, <title>
<h1>-<h6>, <p>, <div>, <span>
<a>, <img>
<ul>, <ol>, <li>

Tag Penting (Should Know):

<meta>, <link>, <style>, <script>
<strong>, <em>, <br>, <hr>
<table>, <tr>, <th>, <td>
<form>, <input>, <button>, <label>

Tag HTML5 Semantic (Good to Know):

<header>, <nav>, <main>, <article>
<section>, <aside>, <footer>
<figure>, <figcaption>, <time>

Kesimpulan

Memahami daftar tag HTML lengkap dan fungsinya adalah fondasi penting dalam web development. Dengan menguasai tag HTML dan fungsinya, Anda dapat:

Membuat Struktur Website – Menggunakan tag dasar HTML dengan benar
Format Konten – Menggunakan tag text formatting untuk readability
Semantic Markup – Menggunakan tag HTML5 semantic untuk SEO
Form Interaktif – Membuat form input yang user-friendly
Media Rich – Menampilkan gambar, audio, dan video

Tips Belajar Tag HTML:

Mulai dari tag dasar HTML (<html>, <head>, <body>)
Praktik dengan tag HTML penting (heading, paragraf, link, gambar)
Pelajari tag HTML5 lengkap untuk semantic markup
Gunakan semua tag HTML dan kegunaannya sesuai kebutuhan
Validasi kode dengan W3C Validator

Dengan memahami fungsi tag HTML secara lengkap, Anda siap membuat website yang terstruktur, semantic, dan SEO-friendly!

Daftar Tag HTML Lengkap dan Fungsinya

Daftar isi

Apa itu Tag HTML?

Jenis-jenis Tag:

Tag Text Formatting

Bold dan Italic

<strong> – Bold Semantic

<b> – Bold Visual

<em> – Italic Semantic

<i> – Italic Visual

Text Decoration

<u> – Underline

<mark> – Highlight

<del> – Deleted Text

<ins> – Inserted Text

Special Text

<sub> – Subscript

<sup> – Superscript

<small> – Small Text

<code> – Code

<pre> – Preformatted

<blockquote> – Block Quote

<q> – Inline Quote

<abbr> – Abbreviation

Tag List

<ul> – Unordered List

<ol> – Ordered List

<li> – List Item

<dl> – Description List

<dt> – Description Term

<dd> – Description Definition

Tag Table

Basic Table

<table> – Table

<tr> – Table Row

<th> – Table Header

<td> – Table Data

Advanced Table

<thead> – Table Head

<tbody> – Table Body

<tfoot> – Table Footer

<caption> – Table Caption