Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML

Apa itu HTML? Pengertian, Fungsi, dan Struktur Dasar untuk Pemula

Adi Prayitno Posting Komentar



HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat dan menyusun halaman web. Tanpa HTML, tidak akan ada teks, gambar, tautan, atau struktur halaman yang tampil di browser.

Artikel ini akan membahas pengertian HTML, fungsi, struktur dasar, elemen penting, hingga praktik terbaik dalam menulis kode HTML modern. Cocok untuk pemula, pelajar, atau siapa saja yang ingin memahami fondasi dari dunia website.

1. Apa Itu HTML?

  • Singkatan: HyperText Markup Language
  • Tujuan: Menyusun dan memformat isi website (judul, paragraf, gambar, link, tabel, dll)
  • Markup: HTML bukan bahasa pemrograman, tapi bahasa penanda (markup language) yang memberi instruksi kepada browser

Contoh sederhana HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Selamat Datang di Dunia HTML</h1>
    <p>Ini adalah paragraf pertama Anda.</p>
  </body>
</html>

2. Fungsi Utama HTML

  1. Struktur: Menyusun isi konten agar teratur dan mudah dibaca.
  2. Presentasi: Memungkinkan pengaturan heading, paragraf, gambar, dll.
  3. Hyperlink: Menghubungkan antar halaman atau website dengan <a> tag.
  4. Integrasi: Bekerja bersama CSS (untuk desain) dan JavaScript (untuk interaktifitas).

3. Sejarah Singkat HTML

  • 1991: HTML pertama kali diperkenalkan oleh Tim Berners-Lee
  • 1995: HTML 2.0 resmi dirilis
  • 1999: HTML 4.01 menjadi standar utama
  • 2014: HTML5 resmi dirilis dan menjadi versi modern saat ini

4. Struktur Dasar HTML

Berikut ini adalah bagian umum dari sebuah dokumen HTML:

  • <!DOCTYPE html>: Menyatakan tipe dokumen HTML
  • <html>: Root dari seluruh dokumen HTML
  • <head>: Berisi metadata, judul halaman, link CSS, dll
  • <body>: Berisi semua konten yang tampil di halaman

5. Elemen Penting dalam HTML

  1. <h1> - <h6>: Heading atau judul dengan tingkatan
  2. <p>: Paragraf
  3. <a>: Tautan
  4. <img>: Gambar
  5. <ul>, <ol>, <li>: Daftar
  6. <div> & <span>: Elemen kontainer

6. HTML dan SEO (Search Engine Optimization)

HTML sangat penting untuk SEO karena membantu mesin pencari memahami struktur dan isi halaman Anda.

  • Gunakan Heading (H1, H2, dst) secara hierarkis
  • Masukkan atribut alt pada gambar
  • Gunakan tag <title> dan <meta description> yang jelas
  • Struktur internal link dengan <a href> yang SEO-friendly

7. Tips Menulis Kode HTML yang Baik

  1. Gunakan indentasi yang rapi
  2. Tutup semua tag yang dibuka
  3. Gunakan komentar (<!-- komentar -->) untuk bagian penting
  4. Uji coba kode HTML di browser atau tools seperti CodePen
  5. Validasi HTML Anda di https://validator.w3.org

8. Tools dan Editor untuk HTML

  • Notepad++: Editor ringan untuk pemula
  • Visual Studio Code: Editor modern dengan banyak ekstensi
  • Sublime Text: Cepat dan powerful
  • Online playground: CodePen, JSFiddle, dll

9. Perbedaan HTML, CSS, dan JavaScript

Teknologi Fungsi
HTML Struktur dan konten halaman web
CSS Desain dan layout visual halaman
JavaScript Interaktivitas dan logika dinamis

10. Contoh Proyek Sederhana HTML

Buat halaman “Biodata Sederhana”:

<html>
  <head>
    <title>Biodata Saya</title>
  </head>
  <body>
    <h1>Nama Saya Adi</h1>
    <p>Saya sedang belajar HTML dasar.</p>
  </body>
</html>

Kesimpulan

HTML adalah fondasi dari semua halaman web. Dengan memahami struktur, fungsi, dan praktik terbaik HTML, Anda dapat mulai membangun website sendiri secara mandiri atau menjadi pengembang web profesional.

Mulailah dari sekarang! Tidak perlu menunggu jadi ahli—cukup buat proyek kecil, latihan, dan eksplorasi HTML setiap hari.

Jika artikel ini bermanfaat, jangan lupa bagikan dan simpan untuk dibaca ulang nanti!

Posting Komentar untuk "Apa itu HTML? Pengertian, Fungsi, dan Struktur Dasar untuk Pemula"

Silahkan berkomentar dengan bijak untuk kritik dan saran.
Spam link aktif akan segera saya hapus , Terimakasih.