Home / HTML / Panduan Lengkap Belajar Tag Dasar HTML untuk Pemula

Panduan Lengkap Belajar Tag Dasar HTML untuk Pemula

shares

Belajar Tag Dasar HTML


Tag adalah elemen utama dalam HTML yang memberi tahu browser bagaimana menampilkan konten di halaman web. Dalam artikel ini kita akan membahas tag dasar HTML secara lengkap, bagaimana cara menggunakannya, contoh nyata, serta tips terbaik agar kamu bisa langsung mempraktikkannya sendiri.

Apa Itu Tag HTML?

Tag HTML adalah penanda yang digunakan untuk menyusun berbagai elemen di dalam dokumen HTML. Tag biasanya ditulis di dalam tanda kurung siku seperti <tag>. Sebagian tag memiliki pasangan penutup seperti </tag>, sementara beberapa tag bersifat self-closing (tidak membutuhkan penutup).

Contoh tag dasar:

<p>Ini adalah paragraf</p>

Jika kamu ingin memahami elemen HTML secara lengkap — termasuk hubungan antara tag dan elemen — kamu bisa membaca artikel Tutorial Belajar Elemen HTML.

Tag Struktur Dasar HTML

Setiap dokumen HTML dimulai dari struktur dasar berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    Konten di sini...
</body>
</html>
  • <!DOCTYPE html> – Menentukan tipe dokumen sebagai HTML5.
  • <html> – Pembungkus semua konten HTML.
  • <head> – Berisi informasi metadata seperti judul halaman.
  • <title> – Judul halaman yang tampil di tab browser.
  • <body> – Bagian konten yang terlihat oleh pembaca.

Untuk belajar struktur file HTML secara detail, baca artikel Mengenal Struktur File HTML dari Dasar.

Tag Teks Dasar HTML

Berikut adalah tag-tag yang paling sering digunakan untuk menampilkan teks:

1. Tag Paragraf: <p>

Tag <p> digunakan untuk menampilkan satu paragraf teks:

<p>Ini adalah paragraf teks.</p>

Browser otomatis memberi jarak antar paragraf sehingga konten terlihat rapi.

2. Heading: <h1> – <h6>

Heading menunjukkan judul dan subjudul dalam struktur konten:

<h1>Judul Utama</h1>
<h2>Subjudul</h2>

Semakin besar angkanya, semakin rendah tingkat pentingnya. Untuk pembahasan heading secara lengkap, baca Panduan Lengkap HTML Headings.

3. Teks Tebal dan Miring

Gunakan tag berikut untuk menebalkan atau memiringkan teks:

  • <strong> – menandakan teks penting.
  • <em> – menandakan teksteks penekanan.
<p>Ini adalah teks <strong>penting</strong>.</p>
<p>Ini adalah teks <em>penting</em> dengan penekanan.</p>

Perbedaan penting antara <strong> dan <b> adalah semantik — <strong> menunjukkan bahwa teks itu bermakna penting, sedangkan <b> hanya bergaya.

Tag Gambar dan Tautan

1. Tag Gambar: <img>

Tag <img> digunakan untuk menampilkan gambar pada halaman:

<img src="gambar.jpg" alt="Deskripsi gambar">

Atribut src menunjukkan lokasi gambar, sedangkan alt memberi deskripsi yang membantu SEO dan aksesibilitas.

Lebih lengkap tentang media di HTML dapat dibaca di Cara Menggunakan Media pada HTML.

2. Tag Tautan: <a>

Tag <a> digunakan untuk membuat tautan yang mengarahkan pengguna ke alamat lain:

<a href="https://adiprayitno25.blogspot.com">Kunjungi Blog</a>

Tag ini sangat penting dalam internal link blogmu — misalnya kamu bisa menautkan artikel terkait seperti Belajar Pemformatan Teks HTML.

Tag Daftar Dasar

HTML menyediakan dua jenis daftar:

  • Unordered list (<ul>) – daftar tanpa urutan.
  • Ordered list (<ol>) – daftar dengan urutan angka.

Contoh:

<ul>
  <li>Item satu</li>
  <li>Item dua</li>
</ul>

Tag daftar sering dipadukan dengan artikel seperti Cara Membuat Daftar dengan HTML.

Tag yang Sering Digunakan Lainnya

  • <br> – membuat baris baru
  • <hr> – garis horizontal
  • <blockquote> – kutipan panjang

Contoh penggunaan:

<p>Teks baris pertama<br>Teks baris kedua</p>
<hr>
<blockquote>Ini adalah blok kutipan.</blockquote>

Kesalahan Umum Pemula

Berikut beberapa kesalahan yang sering dilakukan pemula saat belajar tag dasar:

  • Tag tidak tertutup – seperti lupa menutup <p>.
  • Menggunakan tag yang salah – seperti memakai <div> untuk heading.
  • Terlalu banyak tag tanpa struktur – membuat HTML tidak mudah dibaca.

Jika kamu menemukan hasil yang tidak sesuai saat mengetik HTML, artikel Cara Memperbaiki Kesalahan pada HTML bisa membantu.

Kesimpulan

Tag dasar dalam HTML adalah blok bangunan utama dari konten web. Dengan memahami fungsi dan penggunaannya, kamu akan lebih mudah menyusun halaman web yang terstruktur, jelas, dan ramah pengguna.

Setelah memahami tag dasar, kamu bisa lanjut mempelajari topik lebih lanjut seperti Cara Membuat Website Responsif atau masuk ke topik CSS dan interaktivitas dengan JavaScript.

Related Posts