Materi HTML

Pelajari dasar-dasar HTML untuk membuat struktur halaman web

Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML menggunakan tag untuk menentukan struktur dan konten halaman. Setiap tag memiliki fungsi khusus dalam menampilkan konten.

HTML bekerja sama dengan CSS untuk styling dan JavaScript untuk interaktivitas. Kombinasi ketiga teknologi ini menciptakan pengalaman web yang lengkap dan menarik.

Struktur Dasar HTML5

html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Judul Halaman</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Selamat Datang</h1>
  </header>
  
  <nav>
    <ul>
      <li><a href="#home">Beranda</a></li>
      <li><a href="#about">Tentang</a></li>
    </ul>
  </nav>
  
  <main>
    <section>
      <h2>Konten Utama</h2>
      <p>Ini adalah paragraf pertama saya.</p>
    </section>
  </main>
  
  <footer>
    <p>&copy; 2025 Hak Cipta</p>
  </footer>
  
  <script src="script.js"></script>
</body>
</html>

Tag HTML Penting

Tag Semantic

Tag semantic memberikan makna pada konten HTML dan membantu mesin pencari memahami struktur halaman.

html

<header>Bagian kepala halaman</header>
<nav>Navigasi halaman</nav>
<main>Konten utama</main>
<section>Bagian konten</section>
<article>Artikel independen</article>
<aside>Konten sampingan</aside>
<footer>Bagian kaki halaman</footer>

Tag Gambar & Link

Menampilkan gambar dan membuat link ke halaman lain.

html

<!-- Gambar -->
<img src="gambar.jpg" alt="Deskripsi gambar">

<!-- Link -->
<a href="https://example.com">Klik di sini</a>

<!-- Link internal -->
<a href="/halaman-lain">Halaman Lain</a>

Tag Tabel

Membuat tabel untuk menampilkan data terstruktur.

html

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Kelas</th>
      <th>Nilai</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alif</td>
      <td>X TI</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Ahmad</td>
      <td>X TI</td>
      <td>88</td>
    </tr>
  </tbody>
</table>

Tag Form

Membuat form untuk mengumpulkan data dari pengguna.

html

<form>
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="pesan">Pesan:</label>
  <textarea id="pesan" name="pesan" rows="5"></textarea>
  
  <button type="submit">Kirim</button>
  <button type="reset">Reset</button>
</form>

Atribut HTML Penting

Atribut	Fungsi	Contoh
id	Identitas unik elemen	id="header"
class	Kelas untuk styling	class="btn-primary"
src	Sumber file (gambar, script)	src="image.jpg"
href	Tujuan link	href="page.html"
alt	Teks alternatif gambar	alt="Deskripsi"
data-*	Atribut custom	data-id="123"

Materi Lengkap

Siap Berlatih?

Setelah mempelajari materi HTML, coba latihan soal untuk menguji pemahaman Anda.

Mulai Latihan Soal