HTML Tags dan Attributes: Panduan Lengkap Elemen Dasar HTML

HTML tags adalah blok bangunan dasar setiap halaman web. Memahami tag-tag ini dan cara kerjanya adalah langkah pertama menuju web development yang sesungguhnya.

Jenis-Jenis HTML Tags

HTML memiliki dua jenis tag:

1. Paired Tags (Non-empty Tags)

Tag yang memiliki tag pembuka dan penutup, berisi konten di antaranya:

1
<p>Ini adalah paragraf</p>
2
<h1>Ini adalah heading</h1>
3
<title>Judul Halaman</title>

2. Empty Tags (Unpaired Tags)

Tag yang hanya memiliki tag pembuka, tidak berisi konten:

1
<br/>          <!-- Line break -->
2
<img src="foto.jpg"/>   <!-- Gambar -->
3
<input type="text"/>    <!-- Input field -->
4
<hr/>          <!-- Horizontal rule -->
5
<meta charset="UTF-8"/>

HTML Attributes

Attributes memberikan informasi tambahan atau fungsionalitas pada HTML elements. Ditulis di dalam tag pembuka:

1
<!-- Syntax -->
2
<tag attribute="nilai">konten</tag>
3

4
<!-- Contoh -->
5
<img src="gambar.jpg" width="300" height="200" alt="Deskripsi gambar"/>
6
<input type="text" name="username" placeholder="Masukkan username"/>
7
<a href="https://google.com" target="_blank">Google</a>

Aturan Attributes:

Ditulis di dalam tag pembuka
Format: nama="nilai" (nilai dalam tanda kutip)
Multiple attributes dipisahkan spasi
Nilai boleh pakai single quotes atau double quotes

Heading Tags

Heading digunakan untuk judul dan subjudul halaman. Ada 6 level heading — h1 paling besar, h6 paling kecil:

1
<!doctype html>
2
<html>
3
<head>
4
  <title>Contoh Heading</title>
5
</head>
6
<body>
7
  <h1>Heading Level 1 — Judul Utama</h1>
8
  <h2>Heading Level 2 — Sub Judul</h2>
9
  <h3>Heading Level 3</h3>
10
  <h4>Heading Level 4</h4>
11
  <h5>Heading Level 5</h5>
12
  <h6>Heading Level 6 — Terkecil</h6>
13
</body>
14
</html>

SEO Tip: Search engine menggunakan heading untuk memahami struktur halaman. Gunakan satu <h1> per halaman sebagai judul utama.

Paragraf dan Text Tags

1
<!-- Paragraf -->
2
<p>Ini paragraf pertama. Browser otomatis menambahkan spasi antar paragraf.</p>
3
<p>Ini paragraf kedua.</p>
4

5
<!-- Abbreviation -->
6
<p>Bahasa <abbr title="HyperText Markup Language">HTML</abbr> digunakan untuk membuat web.</p>
7

8
<!-- Marquee (scrolling text) -->
9
<marquee width="50%" direction="left">Teks berjalan ke kiri</marquee>
10
<marquee direction="up" height="100px">Teks berjalan ke atas</marquee>
11

12
<!-- Line break -->
13
<p>Baris pertama<br/>Baris kedua dalam paragraf yang sama</p>
14

15
<!-- Horizontal rule -->
16
<hr/>
17

18
<!-- Bold, italic, underline -->
19
<b>Teks tebal</b>
20
<i>Teks miring</i>
21
<u>Teks bergaris bawah</u>
22
<strong>Teks penting (bold + semantic)</strong>
23
<em>Teks ditekankan (italic + semantic)</em>

Anchor Tag — Hyperlink

Tag <a> digunakan untuk membuat hyperlink ke halaman lain, file, atau lokasi dalam halaman:

1
<!-- Link ke website lain -->
2
<a href="https://www.google.com">Google</a>
3
<a href="https://www.gmail.com">Gmail</a>
4

5
<!-- Buka di tab baru -->
6
<a href="https://www.youtube.com" target="_blank">YouTube</a>
7

8
<!-- Link ke halaman lokal -->
9
<a href="about.html">Tentang Kami</a>
10

11
<!-- Link ke bagian dalam halaman (anchor) -->
12
<a href="#section1">Pergi ke Section 1</a>
13
<h2 id="section1">Section 1</h2>
14

15
<!-- Link email -->
16
<a href="mailto:info@example.com">Kirim Email</a>
17

18
<!-- Link telepon -->
19
<a href="tel:+628123456789">Hubungi Kami</a>

Image Tag

Tag <img> digunakan untuk menampilkan gambar:

1
<!-- Gambar dasar -->
2
<img src="foto.jpg"/>
3

4
<!-- Dengan atribut lengkap -->
5
<img src="animal.jpg"
6
     height="180"
7
     width="300"
8
     alt="Foto seekor rusa"/>
9

10
<!-- Gambar dari URL eksternal -->
11
<img src="https://example.com/gambar.jpg" alt="Gambar online"/>

Atribut <img> penting:

Atribut	Fungsi
`src`	Path/URL gambar (wajib)
`alt`	Teks alternatif jika gambar gagal load
`width`	Lebar gambar (px atau %)
`height`	Tinggi gambar (px atau %)
`loading`	`lazy` untuk lazy loading

HTML Comments

Komentar tidak ditampilkan di browser — berguna untuk dokumentasi kode:

1
<!DOCTYPE html>
2
<html>
3
<body>
4
  <p>Selamat datang di website saya</p>
5
  <!-- Tag <p> digunakan untuk paragraf -->
6

7
  <!--
8
    Ini komentar multi-baris
9
    Berguna untuk penjelasan panjang
10
    atau menonaktifkan kode sementara
11
  -->
12

13
  <!-- <p>Paragraf ini dinonaktifkan sementara</p> -->
14
</body>
15
</html>

HTML Lists

1. Ordered List — Daftar Bernomor

1
<h3>Langkah Membuat Website:</h3>
2
<ol>
3
  <li>Pelajari HTML</li>
4
  <li>Pelajari CSS</li>
5
  <li>Pelajari JavaScript</li>
6
  <li>Buat proyek pertama</li>
7
</ol>
8

9
<!-- Tipe angka berbeda -->
10
<ol type="I">  <!-- Romawi besar: I, II, III -->
11
<ol type="i">  <!-- Romawi kecil: i, ii, iii -->
12
<ol type="A">  <!-- Huruf besar: A, B, C -->
13
<ol type="a">  <!-- Huruf kecil: a, b, c -->
14

15
<!-- Mulai dari angka tertentu -->
16
<ol type="1" start="4">  <!-- Mulai dari 4, 5, 6... -->

2. Unordered List — Daftar Bullet

1
<h3>Web Technologies:</h3>
2
<ul>
3
  <li>HTML</li>
4
  <li>CSS</li>
5
  <li>JavaScript</li>
6
</ul>
7

8
<!-- Tipe bullet berbeda -->
9
<ul type="square">   <!-- Kotak -->
10
<ul type="disc">     <!-- Lingkaran penuh (default) -->
11
<ul type="circle">   <!-- Lingkaran kosong -->

3. Description List — Daftar Definisi

1
<dl>
2
  <dt>HTML</dt>
3
  <dd>Digunakan untuk membuat struktur halaman web</dd>
4
  <dt>CSS</dt>
5
  <dd>Digunakan untuk menerapkan gaya visual pada halaman web</dd>
6
  <dt>JavaScript</dt>
7
  <dd>Digunakan untuk validasi form dan fungsionalitas dinamis</dd>
8
</dl>

4. Nested List — List Bersarang

1
<ol>
2
  <li>Web Technologies
3
    <ul>
4
      <li>HTML</li>
5
      <li>CSS</li>
6
      <li>JavaScript</li>
7
    </ul>
8
  </li>
9
  <li>Server-Side Technologies
10
    <ul>
11
      <li>PHP</li>
12
      <li>Node.js</li>
13
      <li>Java</li>
14
    </ul>
15
  </li>
16
  <li>Database
17
    <ul>
18
      <li>MySQL</li>
19
      <li>PostgreSQL</li>
20
      <li>MongoDB</li>
21
    </ul>
22
  </li>
23
</ol>

HTML Tables

Tabel digunakan untuk menampilkan data dalam baris dan kolom:

1
<table border="1">
2
  <thead>
3
    <tr>
4
      <th>Nama</th>
5
      <th>Umur</th>
6
      <th>Kota</th>
7
    </tr>
8
  </thead>
9
  <tbody>
10
    <tr>
11
      <td>Budi</td>
12
      <td>25</td>
13
      <td>Jakarta</td>
14
    </tr>
15
    <tr>
16
      <td>Siti</td>
17
      <td>22</td>
18
      <td>Bandung</td>
19
    </tr>
20
  </tbody>
21
</table>

Tag Table penting:

Tag	Fungsi
`<table>`	Container tabel
`<thead>`	Header tabel
`<tbody>`	Body tabel
`<tr>`	Table row (baris)
`<th>`	Table header cell (bold, center)
`<td>`	Table data cell
`colspan`	Gabung beberapa kolom
`rowspan`	Gabung beberapa baris

Kesimpulan

HTML tags adalah fondasi setiap halaman web. Yang paling penting dikuasai:

Heading <h1>-<h6> untuk struktur konten
<p> untuk paragraf, <a> untuk link, <img> untuk gambar
Lists <ol>, <ul>, <dl> untuk daftar
Attributes untuk menambahkan fungsionalitas

Di artikel berikutnya: HTML Forms dan CSS — cara mengumpulkan input user dan mempercantik tampilan halaman.

Referensi: UI Technologies (HTML, CSS & JavaScript) — Srinivas Garapati.

Thanks for reading!

HTML Tags dan Attributes: Panduan Lengkap Elemen Dasar HTML

Mon Jun 29 2026

735 words · 7 minutes

Teknologi HTML HTMLTags WebDevelopment FrontEnd BelajarHTML