Pengenalan HTML

Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup utama untuk membuat struktur halaman web dan menyajikan konten di browser. HTML bukan bahasa pemrograman, karena tidak bisa mengeksekusi logika, melakukan perhitungan, atau memproses data seperti JavaScript.

Browser membaca file HTML dan menerjemahkannya menjadi tampilan halaman yang dapat dilihat pengguna.

Apa itu Markup?

Markup adalah bahasa yang digunakan untuk memberi tanda dan struktur pada dokumen teks. Dengan markup:

Browser tahu bagian mana yang judul, paragraf, gambar, link, dan sebagainya.
Konten menjadi terstruktur dan mudah diatur.
Mesin pencari dan alat bantu (seperti screen reader) bisa memahami isi halaman.

HTML menggunakan tag sebagai penanda struktur tersebut.

Tag Dasar HTML

Struktur dasar dokumen HTML terdiri dari:

<!DOCTYPE html>: Memberi tahu browser bahwa dokumen menggunakan HTML5.
<html>: Pembungkus utama seluruh isi halaman.
<head>: Bagian yang berisi informasi tentang halaman (tidak langsung tampil di layar).
<body>: Bagian yang menampung semua konten yang terlihat pengguna.

Contoh struktur dasar:


<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

Bagian `<head>` dan `<body>`

Bagian `<head>`

Berisi informasi yang tidak langsung tampil sebagai konten utama, misalnya:

<title>: Judul halaman di tab browser.
<meta>: Informasi tambahan (charset, deskripsi, viewport).
<style>: CSS internal (tidak direkomendasikan untuk proyek besar).
<script>: JavaScript (lebih baik dipisah di file sendiri).
<link>: Menghubungkan ke file CSS eksternal.

Contoh sederhana:


<head>
  <meta charset="UTF-8" />
  <title>Portfolio</title>
</head>

Bagian `<body>`

Berisi semua elemen yang akan ditampilkan di halaman:

Teks, gambar, daftar, link, form, dan lain-lain.
Semua konten yang ingin dilihat pengguna harus berada di dalam <body>.

Contoh:


<body>
  <h1>Judul Utama</h1>
  <p>Ini adalah isi halaman.</p>
</body>

Struktur HTML Non-Semantik vs Semantik

Sebelum HTML5, banyak developer hanya menggunakan <div> dengan id atau class sebagai penanda bagian.

Contoh non-semantik:


<div id="header">...</div>
<div id="nav">...</div>
<div id="content">...</div>
<div id="footer">...</div>

Dengan HTML5, ada elemen semantik yang lebih bermakna seperti <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. Ini membuat struktur halaman lebih jelas dan mudah dibaca.

Contoh semantik:


<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Elemen semantik membantu:

Membuat struktur lebih rapi.
Memudahkan mesin pencari memahami halaman.
Memudahkan alat bantu (screen reader) membaca konten.