Kembali ke Beranda

HTML

HyperText Markup Language

Apa itu HTML?

HTML (HyperText Markup Language) bukanlah bahasa pemrograman, melainkan bahasa markup yang digunakan untuk membuat struktur dan kerangka dari sebuah halaman web. Bayangkan HTML sebagai fondasi dan tulang dari sebuah rumah. Ia mendefinisikan elemen-elemen seperti judul, paragraf, gambar, dan tautan.

Struktur Dasar Dokumen

Setiap file HTML memiliki struktur dasar yang wajib ada. Ini memberitahu browser bahwa dokumen tersebut adalah halaman web dan mendefinisikan bagian kepala (metadata) dan tubuh (konten yang terlihat). 

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
</head>
<body>
    <!-- Konten website Anda ada di sini -->
</body>
</html>

Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML dan selalu ditempatkan di dalam tag pembuka. Atribut biasanya datang dalam pasangan nama/nilai seperti: nama="nilai".

Atribut Umum

  • id: Menentukan ID unik untuk sebuah elemen.
  • class: Menentukan satu atau lebih nama kelas untuk sebuah elemen (digunakan oleh CSS dan JavaScript).
  • style: Digunakan untuk menerapkan gaya CSS sebaris (inline) pada sebuah elemen.
  • href: Menentukan URL tujuan untuk tag <a>.
  • src: Menentukan sumber (URL) untuk tag seperti <img> dan <script>.
  • alt: Menentukan teks alternatif untuk gambar jika tidak dapat ditampilkan.

Tag-tag Umum

Tag Judul: <h1> hingga <h6>

Digunakan untuk membuat judul atau heading. <h1> adalah level tertinggi, dan <h6> adalah yang terendah.

Contoh Kode:

<h1>Ini Judul Utama</h1>
<h2>Ini Sub-Judul</h2>

Hasil Tampilan:

Ini Judul Utama

Ini Sub-Judul

Tag Paragraf: <p>

Digunakan untuk membungkus blok teks menjadi sebuah paragraf.

Contoh Kode:

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

Hasil Tampilan:

Ini adalah paragraf pertama.

Tag Tautan (Link): <a>

Membuat hyperlink. Atribut href wajib diisi dengan URL tujuan.

Contoh Kode:

<a href="#">Ini adalah tautan</a>

Hasil Tampilan:

Ini adalah tautan

Tag Gambar: <img>

Menampilkan gambar. Atribut src berisi alamat gambar dan alt adalah teks deskripsi.

Contoh Kode:

<img src="https://placehold.co/300x150/FF5733/FFFFFF?text=Gambar+Contoh" alt="Gambar placeholder">

Hasil Tampilan:

Gambar placeholder

Tag Daftar (List): <ul>, <ol>, <li>

<ul> untuk daftar tak berurutan (bullet) dan <ol> untuk daftar berurutan (angka).

Contoh Kode:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>Item Pertama</li>
    <li>Item Kedua</li>
</ol>

Hasil Tampilan:

  • Item 1
  • Item 2
  1. Item Pertama
  2. Item Kedua

HTML Semantik

HTML Semantik adalah penggunaan tag HTML yang sesuai dengan makna atau tujuan dari konten yang dibungkusnya. Ini membantu mesin pencari dan teknologi pendukung (seperti pembaca layar) untuk lebih memahami struktur halaman Anda.

Tag Semantik Utama

Alih-alih menggunakan <div> untuk semuanya, gunakan tag yang lebih deskriptif:

  • <header>: Untuk bagian kepala halaman atau sebuah section (berisi logo, navigasi, judul).
  • <nav>: Untuk blok navigasi utama.
  • <main>: Untuk konten utama dan unik dari halaman.
  • <article>: Untuk konten mandiri seperti postingan blog atau berita.
  • <section>: Untuk mengelompokkan konten terkait.
  • <aside>: Untuk konten sampingan (seperti sidebar).
  • <footer>: Untuk bagian kaki halaman (berisi info hak cipta, kontak, dll).

Contoh Struktur:

<header>
    <h1>Judul Website</h1>
    <nav> ... </nav>
</header>

<main>
    <article>
        <h2>Judul Artikel</h2>
        <p>Isi artikel...</p>
    </article>
</main>

<footer>
    <p>© 2025 Hak Cipta.</p>
</footer>

Formulir dan Tabel

Formulir: <form> dan <input>

Digunakan untuk mengumpulkan input dari pengguna. Tag <input> memiliki banyak tipe, seperti text, password, checkbox, radio, dan submit.

Contoh Kode:

<form>
    <label for="nama">Nama:</label><br>
    <input type="text" id="nama" name="nama"><br>
    <label for="sandi">Kata Sandi:</label><br>
    <input type="password" id="sandi" name="sandi"><br><br>
    <input type="submit" value="Kirim">
</form>

Hasil Tampilan:





Tabel: <table>, <tr>, <th>, <td>

Digunakan untuk menampilkan data dalam format baris dan kolom. <tr> mendefinisikan baris, <th> untuk header kolom, dan <td> untuk sel data.

Contoh Kode:

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Izumi</td>
    <td>Miyamura</td>
  </tr>
</table>

Hasil Tampilan:

Nama Depan Nama Belakang
Izumi Miyamura

Elemen Multimedia

HTML5 memperkenalkan tag khusus untuk menyematkan file audio dan video secara langsung tanpa memerlukan plugin eksternal seperti Flash.

Audio: <audio>

Digunakan untuk menyematkan konten suara. Atribut controls akan menampilkan kontrol pemutar audio standar dari browser (play, pause, volume).

Contoh Kode:

<audio controls>
  <source src="musik.mp3" type="audio/mpeg">
  Browser Anda tidak mendukung elemen audio.
</audio>

Hasil Tampilan:

Di sini akan muncul pemutar audio standar dari browser.

(Membutuhkan file musik.mp3 untuk benar-benar berfungsi)

Video: <video>

Digunakan untuk menyematkan konten video. Sama seperti audio, atribut controls akan menampilkan kontrol pemutar video.

Contoh Kode:

<video width="400" controls>
  <source src="film.mp4" type="video/mp4">
  Browser Anda tidak mendukung tag video.
</video>

Hasil Tampilan:

Contoh pemutar video (Membutuhkan file film.mp4 untuk benar-benar berfungsi)

Elemen Blok vs. Inline

Elemen HTML umumnya terbagi menjadi dua kategori tampilan: blok dan inline.

  • Elemen Blok: Selalu dimulai di baris baru dan mengambil lebar penuh yang tersedia. Contoh: <div>, <p>, <h1>, <form>.
  • Elemen Inline: Tidak dimulai di baris baru dan hanya mengambil lebar sebanyak yang diperlukan. Contoh: <span>, <a>, <img>, <strong>.

Contoh Kode:

<div style="background-color: lightblue;">Ini elemen blok.</div>
<div style="background-color: lightcoral;">Ini elemen blok lainnya.</div>


<span style="background-color: lightgreen;">Ini elemen inline.</span>
<span style="background-color: gold;">Ini elemen inline lainnya.</span>

Hasil Tampilan:

Ini elemen blok.
Ini elemen blok lainnya.

Ini elemen inline. Ini elemen inline lainnya.

iFrame: <iframe>

Tag <iframe> digunakan untuk menampilkan halaman web lain di dalam sebuah halaman web (seperti jendela di dalam jendela). Sering digunakan untuk menyematkan peta, video dari YouTube, atau konten eksternal lainnya.

Contoh Kode:

<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=..." style="border:0;"></iframe>

Hasil Tampilan:

Di sini akan muncul konten dari halaman lain, misalnya peta.

Contoh iframe

Entitas Karakter

Beberapa karakter, seperti < dan >, memiliki makna khusus di HTML. Untuk menampilkannya sebagai teks biasa, kita harus menggunakan entitas karakter.

Contoh Kode:

<p>Tag paragraf dibuat dengan &lt;p&gt;.</p>
<p>Hak cipta dilambangkan dengan &copy;.</p>

Hasil Tampilan:

Tag paragraf dibuat dengan <p>.

Hak cipta dilambangkan dengan ©.

Kepala Dokumen: Elemen di Dalam <head>

Bagian <head> adalah kontainer untuk metadata (data tentang data) dan ditempatkan antara tag <html> dan <body>. Metadata ini tidak ditampilkan di halaman, tetapi digunakan oleh browser, mesin pencari, dan layanan web lainnya.

Judul Halaman: <title>

Menentukan judul untuk halaman web. Judul ini akan muncul di tab browser, bookmark, dan hasil pencarian. Tag ini wajib ada di setiap dokumen HTML.

Contoh Kode:

<head>
    <title>Kamus Koding - Halaman HTML</title>
</head>

Efeknya:

Teks "Kamus Koding - Halaman HTML" akan muncul di tab browser Anda.

Metadata: <meta>

Menyediakan metadata tentang dokumen HTML, seperti set karakter, deskripsi halaman, kata kunci, dan pengaturan viewport untuk desain responsif.

Contoh Kode:

<head>
    <!-- Menentukan set karakter yang digunakan -->
    <meta charset="UTF-8">

    <!-- Pengaturan untuk tampilan di perangkat mobile (penting untuk responsif) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Deskripsi halaman untuk mesin pencari -->
    <meta name="description" content="Belajar dasar-dasar HTML dengan mudah.">
</head>

Efeknya:

Tag-tag ini tidak memiliki tampilan visual, tetapi sangat penting untuk SEO (Search Engine Optimization) dan agar website tampil dengan baik di perangkat mobile.

Menghubungkan Sumber Eksternal: <link>

Digunakan untuk menghubungkan dokumen saat ini dengan sumber daya eksternal. Penggunaan paling umum adalah untuk menautkan file stylesheet CSS.

Contoh Kode:

<head>
    <!-- Menghubungkan ke file CSS eksternal -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Menambahkan ikon (favicon) untuk tab browser -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>

Skrip dan Gaya Internal: <script> & <style>

Selain menghubungkan file eksternal, Anda juga bisa menulis JavaScript dan CSS langsung di dalam dokumen HTML menggunakan tag <script> dan <style>. Biasanya diletakkan di dalam <head> (untuk <style>) atau sebelum penutup </body> (untuk <script> agar tidak menghalangi pemuatan halaman).

Contoh Kode:

<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <script>
        alert('Halaman telah dimuat!');
    </script>
</body>

Praktik Terbaik dan Aksesibilitas

Menulis HTML yang valid dan terstruktur bukan hanya tentang membuat halaman tampil benar, tetapi juga tentang membuatnya dapat diakses dan dikelola dengan baik.

Komentar dalam HTML

Anda dapat menambahkan komentar ke dalam kode HTML Anda untuk meninggalkan catatan, pengingat, atau menonaktifkan bagian kode untuk sementara saat debugging. Komentar tidak akan ditampilkan oleh browser.

Contoh Kode:

<!-- Ini adalah komentar. Tidak akan terlihat di halaman. -->
<p>Paragraf ini akan terlihat.</p>
<!-- <p>Paragraf ini dinonaktifkan dengan komentar.</p> -->

Hasil Tampilan:

Paragraf ini akan terlihat.

Aksesibilitas Web (Web Accessibility / a11y)

Aksesibilitas adalah praktik memastikan bahwa situs web Anda dapat digunakan oleh semua orang, termasuk penyandang disabilitas (misalnya, tunanetra yang menggunakan pembaca layar). Menggunakan HTML semantik dan atribut alt pada gambar adalah langkah dasar yang bagus. Konsep lanjutannya adalah menggunakan atribut ARIA (Accessible Rich Internet Applications) untuk memberikan konteks tambahan pada elemen.

Contoh Kode:

<!-- Tanpa aksesibilitas, pembaca layar mungkin hanya akan membaca "X" -->
<button>X</button>

<!-- Dengan ARIA, pembaca layar akan tahu ini adalah tombol "Tutup" -->
<button aria-label="Tutup">X</button>

Efeknya:

Secara visual, kedua tombol mungkin terlihat sama. Namun, tombol kedua memberikan informasi yang jelas ("Tutup") kepada pengguna teknologi pendukung seperti pembaca layar.

Validasi HTML

Validasi adalah proses memeriksa kode HTML Anda terhadap standar resmi dari W3C (World Wide Web Consortium) untuk memastikan tidak ada kesalahan sintaks. Kode yang valid cenderung ditampilkan secara lebih konsisten di berbagai browser.

Cara Memvalidasi:

Anda dapat menyalin dan menempelkan kode Anda ke layanan gratis seperti W3C Markup Validation Service untuk mendapatkan laporan tentang kesalahan atau peringatan apa pun dalam kode Anda.

Elemen HTML5 Lanjutan dan Grafis

HTML5 terus berkembang dan memperkenalkan tag-tag baru yang menyediakan fungsionalitas bawaan browser yang sebelumnya memerlukan JavaScript atau CSS yang rumit.

Elemen Formulir Tambahan

Selain <input>, ada elemen lain yang sangat berguna untuk formulir yang lebih kompleks.

  • <textarea>: Untuk input teks multi-baris (seperti kolom komentar).
  • <select> dan <option>: Untuk membuat daftar pilihan (dropdown).

Contoh Kode:

<label for="pilihan">Pilih Bahasa:</label>
<select name="bahasa" id="pilihan">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

<br><br>

<label for="pesan">Pesan Anda:</label><br>
<textarea id="pesan" name="pesan" rows="4" cols="50"></textarea>

Hasil Tampilan:




Tag Semantik dan Utilitas Lainnya

  • <details> & <summary>: Membuat widget "buka-tutup" (accordion) interaktif tanpa JavaScript.
  • <figure> & <figcaption>: Mengelompokkan konten media (seperti gambar) dengan keterangannya.

Contoh Kode:

<details>
  <summary>Klik untuk melihat detail</summary>
  <p>Ini adalah konten tersembunyi yang akan muncul.</p>
</details>

<figure>
  <img src="https://placehold.co/300x150/FF5733/FFFFFF?text=Gambar+Contoh" alt="Gambar placeholder">
  <figcaption>Gbr. 1: Sebuah gambar placeholder.</figcaption>
</figure>

Hasil Tampilan:

Klik untuk melihat detail

Ini adalah konten tersembunyi yang akan muncul.

Gambar placeholder
Gbr. 1: Sebuah gambar placeholder.

Grafis di Web: <canvas> dan <svg>

HTML menyediakan dua cara utama untuk membuat grafis:

  • <canvas>: Membuat area gambar "kanvas" yang dapat dimanipulasi dengan JavaScript. Cocok untuk game, animasi, dan visualisasi data dinamis.
  • <svg>: (Scalable Vector Graphics) Mendefinisikan grafis berbasis vektor menggunakan XML. Cocok untuk logo, ikon, dan ilustrasi yang harus tajam di semua ukuran.

Contoh Kode:

<!-- Canvas membutuhkan JavaScript untuk menggambar -->
<canvas id="kanvasSaya" width="200" height="100" style="border:1px solid #000;"></canvas>

<!-- SVG mendefinisikan bentuk langsung di HTML -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Hasil Tampilan: