Panduan Lengkap Tag HTML & Cara Menambahkan CSS

Materi belajar web dasar yang dapat langsung Anda terapkan pada website atau blog WordPress Anda.

Bagian 1: Tag HTML Dasar & Fungsinya

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat struktur halaman web. Berikut adalah susunan tag dasar beserta fungsinya:

1. Tag Struktur Utama

• <!DOCTYPE html> — Deklarasi versi HTML5 kepada penjelajah web (browser).
• <html> — Tag utama yang membungkus seluruh dokumen HTML.
• <head> — Tempat menyimpan metadata, judul dokumen (<title>), serta tautan skrip/CSS.
• <body> — Membungkus seluruh konten visual yang dilihat oleh pengunjung website.

2. Tag Teks, Judul, & Paragraf

• <h1> hingga <h6> — Tag judul/heading. <h1> digunakan untuk judul utama, sedangkan <h2> sampai <h6> untuk subjudul.
• <p> — Membuka paragraf baru untuk menulis teks/kalimat.
• <br> — Menambahkan garis baru (line break) tanpa membuat paragraf baru.
• <hr> — Membuat garis pembatas horizontal.

3. Tag Penekanan & Format Kalimat

• <strong> atau <b> — Menebalkan teks. <strong> memberi makna penting (SEO-friendly).
• <em> atau <i> — Mencetak miring teks. <em> memberi penekanan nada atau kata asing.
• <mark> — Memberi warna latar belakang (highlight) kuning pada kata/kalimat.
• <small> — Mengecilkan ukuran teks (biasanya untuk catatan kaki/copyright).
• <sub> — Teks subscript (posisi agak ke bawah, misal: H₂O).
• <sup> — Teks superscript (posisi agak ke atas, misal: 10²).
• <del> — Menampilkan garis dicoret pada teks (informasi usang/dihapus).
• <ins> — Menampilkan garis bawah (informasi baru/tambahan).

<h2>Mengenal Rumus Kimia & Matematika</h2>
<p>
  Air memiliki rumus kimia <strong>H<sub>2</sub>O</strong>. 
  Dalam matematika, <em>5<sup>2</sup> = 25</em>.<br>
  <mark>Penting:</mark> Minumlah air secara teratur!
</p>

Bagian 2: Tag HTML Tingkat Lanjutan

1. Pengelompokan & Tata Letak (Layout)

• <div> — Wadah tingkat blok (block-level container) untuk mengelompokkan elemen.
• <span> — Wadah tingkat baris (inline container) untuk memberi gaya pada bagian kata tertentu.
• <header>, <nav>, <main>, <section>, <article>, <footer> — Tag Semantic HTML5 yang membantu mesin pencari (SEO) memahami struktur konten.

2. Tautan, Gambar, & Media

• <a href="URL"> — Membuat tautan/hyperlink ke halaman web lain.
• <img src="URL" alt="deskripsi"> — Menampilkan gambar di halaman web.
• <video> & <audio> — Menampilkan pemutar media video atau suara.

3. Daftar (List) & Tabel

• <ul> & <li> — Membuat daftar memakai poin/bullet (Unordered List).
• <ol> & <li> — Membuat daftar berurutan angka/huruf (Ordered List).
• <table>, <tr>, <th>, <td> — Menyusun data berbentuk baris dan kolom.

Bagian 3: 3 Cara Menambahkan CSS dalam HTML

CSS (Cascading Style Sheets) mengatur tampilan visual seperti warna, font, tata letak, dan ukuran elemen HTML. Ada 3 metode penulisan CSS:

1. Inline CSS (Direct Style)

Ditulis langsung pada tag HTML menggunakan atribut style="".

<p style="color: #d63638; font-size: 18px; font-weight: bold;">
  Teks ini berwarna merah dan berukuran 18px.
</p>

2. Internal CSS

Ditulis di dalam tag <style> pada bagian <head> dokumen HTML.

<head>
  <style>
    .kotak-info {
      background-color: #f0f6fc;
      border: 1px solid #0969da;
      padding: 15px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <div class="kotak-info">
    <p>Ini adalah kotak pesan bergaya Internal CSS.</p>
  </div>
</body>

3. External CSS

Ditulis pada file terpisah berekstensi .css lalu dihubungkan menggunakan tag <link> pada bagian HTML.

<!-- Dipasang di bagian <head> HTML -->
<link rel="stylesheet" href="style.css">

<!-- Isi file style.css -->
.tombol-custom {
  background-color: #0073aa;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

Bagian 4: Cara Memasang Kode di WordPress

Jika Anda menggunakan CMS WordPress, berikut langkah mudah memasukkan kode HTML dan CSS di atas:

Selamat mencoba dan mempraktikkan kustomisasi web HTML & CSS di situs WordPress Anda!