HTML Adalah: Pengertian, Fungsi, Cara Kerja

HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa standar yang digunakan untuk membuat dan menyusun halaman web. HTML menyediakan struktur dasar dari sebuah halaman web dengan cara mendefinisikan elemen-elemen seperti teks, gambar, tautan, tabel, formulir, dan multimedia.

Table of Contents

Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat dan menyusun konten pada halaman web. Dengan HTML, kita dapat menentukan struktur dan elemen-elemen pada halaman web seperti teks, gambar, tabel, tautan, dan elemen multimedia.

Sejarah Singkat HTML

HTML (HyperText Markup Language) adalah hasil perkembangan teknologi web yang dirancang untuk berbagi informasi melalui internet.
Berikut adalah rangkuman perjalanan sejarah HTML:

1. Awal Mula HTML

Penemu: Tim Berners-Lee, seorang ilmuwan komputer Inggris, menciptakan HTML pada tahun 1989.
Motivasi: Dia ingin membuat sistem untuk berbagi dokumen ilmiah di CERN (European Organization for Nuclear Research) dengan lebih efisien.
Ide Dasar: Menghubungkan dokumen menggunakan hyperlink, sehingga pengguna dapat melompat dari satu dokumen ke dokumen lainnya dengan mudah.

Pada tahun 1991, Berners-Lee merilis dokumen pertama berjudul “HTML Tags”, yang menjelaskan 18 elemen HTML dasar, termasuk elemen untuk heading, paragraf, daftar, dan tautan.

2. Versi Awal HTML

HTML 1.0 (1993):
- Versi pertama HTML yang sangat sederhana.
- Digunakan untuk menampilkan teks, gambar, dan tautan.
- Tidak mendukung elemen desain seperti tabel atau formulir.
HTML berkembang cepat dengan banyak tambahan elemen untuk memenuhi kebutuhan pengguna.

3. Perkembangan Standar oleh W3C

Pada tahun 1994, World Wide Web Consortium (W3C) dibentuk untuk mengelola dan mengembangkan standar HTML agar tetap kompatibel dan terorganisir.
Versi-versi utama yang dirilis setelahnya:
- HTML 2.0 (1995):
  - Standar pertama yang resmi dirilis oleh W3C.
  - Mendukung tabel, formulir, dan elemen dasar lainnya.
- HTML 3.2 (1997):
  - Memperkenalkan elemen untuk tata letak (seperti <table> dan atribut untuk font).
  - Mulai digunakan secara luas oleh pengembang web.
- HTML 4.01 (1999):
  - Menambahkan dukungan untuk elemen multimedia.
  - Memperkenalkan konsep “dokumen terpisah” untuk konten (HTML) dan desain (CSS).

4. Perkembangan Modern: HTML5

HTML5 dirilis oleh W3C pada tahun 2014 (setelah dikembangkan sejak 2008).
Fitur baru yang diperkenalkan:
- Dukungan untuk multimedia (video, audio) tanpa plugin eksternal seperti Flash.
- Elemen baru untuk struktur semantik seperti <header>, <footer>, <article>, dan <section>.
- Peningkatan kompatibilitas dengan perangkat mobile.
- Dukungan penyimpanan data lokal melalui Local Storage dan Web Storage.
- Interaktifitas yang lebih baik dengan API modern seperti Canvas API untuk grafik dan Geolocation API.

5. Pengaruh HTML dalam Perkembangan Web

HTML telah menjadi fondasi utama untuk membangun web modern. Dengan penggabungan CSS (untuk desain) dan JavaScript (untuk interaktivitas), HTML terus menjadi bagian tak terpisahkan dalam pengembangan web. Hingga saat ini, HTML5 masih menjadi standar utama, meskipun terus mengalami pembaruan untuk menyesuaikan dengan teknologi terbaru.

Fungsi HTML

Berikut ini adalah Fungsi HTML:

Membuat Struktur Halaman Web: HTML menyediakan kerangka dasar untuk halaman web. Misalnya:
- Judul halaman.
- Paragraf.
- Daftar (bullet/numbered list).
- Formulir input.
Menyisipkan Elemen Multimedia: HTML memungkinkan kita menambahkan elemen seperti gambar, video, atau audio.
Navigasi Antarhalaman: Dengan hyperlink (tautan), HTML memungkinkan pengguna untuk berpindah dari satu halaman ke halaman lain di internet.

Dengan HTML, Anda dapat membuat struktur dasar untuk berbagai jenis aplikasi web, baik yang sederhana maupun kompleks.

Cara Kerja HTML

HTML (HyperText Markup Language) bekerja dengan cara memberikan struktur dan konten pada sebuah halaman web, yang kemudian diterjemahkan oleh browser (seperti Google Chrome, Firefox, atau Safari) untuk ditampilkan kepada pengguna.
Berikut adalah penjelasan langkah demi langkah cara kerja HTML:

Judul

Ini adalah teks paragraf.

5. Proses Tambahan Jika Ada Tautan atau Media

Tautan (Hyperlink): Jika terdapat elemen <a> dengan atribut href, browser akan memuat halaman baru saat tautan diklik.
<a href=”https://example.com”>Klik di sini</a>
Media (Gambar, Video, atau Audio): Browser akan memuat file eksternal seperti gambar atau video berdasarkan lokasi yang diberikan dalam atribut (misalnya, src untuk gambar).
<img src=”gambar.jpg” alt=”Deskripsi Gambar”>

6. Interaksi dengan Pengguna

Jika ada elemen interaktif seperti formulir atau tombol, HTML bekerja dengan bahasa pemrograman lain seperti JavaScript untuk menangani logika. Misalnya:

Ketika pengguna mengisi formulir dan menekan “Kirim”, browser akan mengirimkan data ke server untuk diproses.

Struktur HTML

Berikut ini adalah contoh strutur dasar dokumen HTML:

<!DOCTYPE html>

<html>

<head>

    <title>Judul Halaman</title>

</head>

<body>

    <h1>Selamat Datang</h1>

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

    <a href="https://www.example.com">Tautan ke website lain</a>

</body>

</html>

<!DOCTYPE html>: Deklarasi tipe dokumen yang menunjukkan versi HTML (HTML5).
<html>: Elemen utama yang mencakup semua isi halaman.
<head>: Bagian untuk meta informasi seperti judul, gaya, dan skrip.
<body>: Bagian untuk konten utama yang terlihat oleh pengguna.

Kelebihan dan Kekurangan HTML

Berikut ini point dari kelebihan & kekurangan HTML

Berikut adalah Kelebihan HTML:

Mudah Dipelajari: Tidak memerlukan pemahaman pemrograman yang kompleks.
Kompatibilitas Luas: Didukung oleh semua browser.
Dasar Teknologi Web: HTML adalah pondasi sebelum menggunakan CSS (untuk desain) dan JavaScript (untuk interaktivitas).

HTML juga memiliki beberapa kekurangan meskipun menjadi standar utama dalam pengembangan web. Berikut adalah kekurangan HTML:

Tidak Mendukung Logika Pemrograman: Hanya mengatur struktur, tidak untuk perhitungan.
Tidak Berorientasi pada Desain: Memerlukan CSS untuk tampilan yang baik.
Tidak Mendukung Fungsionalitas Backend: Tidak bisa berinteraksi langsung dengan server.
Kurang Efisien untuk Proyek Besar: Sulit dikelola tanpa kerangka kerja tambahan.
Tidak Aman: Rentan terhadap serangan tanpa pengamanan tambahan.
Tidak Mendukung Interaktivitas Secara Native: Memerlukan JavaScript untuk elemen interaktif.
Keterbatasan untuk Aplikasi Kompleks: Kurang cocok untuk aplikasi interaktif canggih.
Tidak Mendukung Penyimpanan Data: Memerlukan teknologi lain untuk menyimpan data.

HTML dapat dioptimalkan dengan teknologi lain untuk membangun situs web dan aplikasi modern.

Contoh Sederhana HTML

Berikut adalah contoh sederhana HTML yang menunjukkan struktur dasar sebuah halaman web:

<!DOCTYPE html>

<html>

<head>

    <title>Halaman Sederhana</title>

</head>

<body>

    <h1>Selamat Datang di Website Saya</h1>

    <p>Ini adalah contoh halaman web sederhana menggunakan HTML.</p>

    <a href="https://www.example.com">Klik di sini untuk mengunjungi halaman lain</a>

</body>

</html>

Penjelasan:

<!DOCTYPE html>
- Mendeklarasikan dokumen sebagai HTML5.
<html>
- Elemen utama yang mencakup semua konten halaman.
<head>
- Bagian ini berisi informasi tentang halaman (metadata) seperti judul halaman.
- <title>: Menampilkan teks di tab browser.
<body>
- Berisi semua konten utama yang terlihat oleh pengguna.
- <h1>: Heading utama.
- <p>: Paragraf teks.
- <a href=”URL”>…</a>: Hyperlink yang mengarahkan ke halaman lain.

Hasil di Browser:

Tampilan di browser akan seperti ini:

Judul Tab:
Halaman Sederhana

Isi Halaman:

Selamat Datang di Website Saya

Ini adalah contoh halaman web sederhana menggunakan HTML.

Klik di sini untuk mengunjungi halaman lain

Tautan “Klik di sini” dapat diklik untuk menuju ke halaman example.com.

HTML Adalah: Pengertian, Fungsi, Cara Kerja

Apa itu HTML?