Apa itu HTML? Arti, Sejarah, Manfaat, Struktur, dan Contoh

HTML adalah bahasa dasar yang digunakan untuk membuat struktur dan tampilan halaman web. Tapi, apa sebenarnya yang membuat HTML begitu penting dan sering digunakan di berbagai platform digital?

Dalam artikel ini, Mindi akan mengupas tuntas tentang HTML, mulai dari arti dan sejarahnya, hingga manfaat serta strukturnya. Dengan memahami setiap aspek HTML, kamu akan memiliki dasar yang kuat untuk membuat dan mengelola halaman webmu sendiri.

Yuk, simak artikel ini sampai akhir dan temukan bagaimana HTML bisa membuka pintu menuju dunia pengembangan web yang menarik dan penuh potensi!

Apa itu HTML?

Saat ini, HTML adalah salah satu bahasa dasar yang wajib dipahami dalam pengembangan web. Tak hanya bagi developer, HTML juga banyak dipelajari oleh kalangan akademisi dan praktisi digital yang ingin memahami struktur dasar dari sebuah situs web.

HTML adalah bahasa markah standar untuk membuat dan menyusun halaman web yang dapat diakses di seluruh platform dan perangkat. HTML memungkinkan para pengembang untuk menata konten seperti teks, gambar, video, dan berbagai elemen interaktif di internet.

Pembuatan situs web, pengembangan aplikasi, dan penyusunan konten digital adalah beberapa bidang yang sangat berkaitan erat dengan HTML.

Para pengembang biasanya menggunakan HTML sebagai fondasi utama dalam pengembangan halaman web, bersama dengan CSS dan JavaScript untuk memberikan tampilan dan interaktivitas. 

Tak heran jika pemahaman tentang HTML dianggap sebagai langkah pertama untuk membangun keahlian dalam dunia pengembangan web.

Baca juga: 6 Cara Menjadi Data Engineer Tanpa Perlu Background IT

Sejarah HTML

HTML (HyperText Markup Language) pertama kali diciptakan oleh Tim Berners-Lee pada tahun 1991 ketika bekerja di CERN, organisasi penelitian fisika di Swiss. Pada awalnya, HTML dirancang untuk membantu para ilmuwan berbagi dokumen dengan mudah melalui internet.

Versi pertama HTML, yang dikenal sebagai HTML 1.0, memiliki tag dasar yang memungkinkan pembuatan halaman web sederhana. Kemudian, HTML 2.0 dirilis pada tahun 1995 sebagai standar resmi pertama dengan peningkatan fitur yang mendukung format dokumen lebih kompleks.

Pada tahun 1997, HTML 3.2 diperkenalkan, membawa fitur baru seperti tabel dan skrip untuk menciptakan halaman web yang lebih dinamis. Selanjutnya, HTML 4.01 yang dirilis pada tahun 1999 menjadi tonggak penting dengan dukungan untuk CSS, memungkinkan desain web yang lebih fleksibel dan modern.

HTML5, versi terbaru yang dirilis pada tahun 2014, membawa revolusi besar dalam pengembangan web. Fitur seperti dukungan untuk multimedia (audio dan video), elemen grafik seperti <canvas>, dan kompatibilitas lintas perangkat membuat HTML5 menjadi standar utama hingga saat ini.

Hingga kini, HTML terus menjadi bahasa yang digunakan untuk membangun web yang lebih interaktif, responsif, dan ramah pengguna.

Baca juga: Apa Itu Golang Backend? Arti, Keunggulan, & Contoh

Manfaat HTML

Sumber: Canva

HTML memiliki peran penting dalam pengembangan web karena merupakan bahasa dasar yang digunakan untuk membuat struktur halaman. Berikut adalah beberapa manfaat HTML yang membuatnya begitu penting:

1. Membuat Struktur Halaman Web

HTML adalah fondasi utama dalam pengembangan halaman web. Dengan HTML, pengembang dapat membuat kerangka atau struktur dasar halaman, seperti membagi konten menjadi paragraf, header, tabel, atau daftar.

Selain itu, HTML memungkinkan penyusunan elemen-elemen yang mudah dipahami oleh browser, sehingga halaman web bisa ditampilkan dengan benar di berbagai perangkat. Tanpa HTML, pengaturan konten dan struktur situs akan jauh lebih rumit.

2. Mudah Dipelajari dan Digunakan

Salah satu keunggulan HTML adalah kemudahannya untuk dipelajari, bahkan oleh pemula yang baru mengenal dunia pemrograman. Struktur sintaks yang sederhana dan intuitif membuat HTML menjadi langkah awal yang ideal untuk belajar pengembangan web.

Selain itu, banyak sumber belajar yang tersedia, mulai dari dokumentasi resmi hingga tutorial online. Hal ini menjadikan HTML sebagai bahasa yang sangat ramah bagi siapa saja yang ingin mulai berkreasi di dunia web.

3. Kompatibilitas Lintas Platform

HTML dirancang agar kompatibel di berbagai perangkat dan sistem operasi. Hal ini memungkinkan halaman web yang dibuat dengan HTML dapat diakses dengan baik melalui komputer, tablet, maupun smartphone.

Dengan HTML5, pengalaman lintas platform semakin ditingkatkan. Fitur seperti desain responsif memungkinkan situs web menyesuaikan tampilannya secara otomatis sesuai dengan perangkat yang digunakan.

4. Dukungan Multimedia

HTML5 memperkenalkan elemen khusus untuk menyematkan audio dan video, seperti <audio> dan <video>. Elemen ini membuat pengembang dapat menambahkan konten multimedia langsung ke halaman web tanpa memerlukan plugin tambahan.

Hal ini memberikan pengalaman pengguna yang lebih baik, terutama karena situs web bisa menampilkan konten yang kaya dan interaktif dengan lebih cepat dan efisien. Dukungan multimedia ini menjadi salah satu alasan utama HTML5 begitu populer di era digital.

5. Dasar untuk Teknologi Lain

HTML menjadi pondasi utama bagi pengembangan teknologi web lainnya, seperti CSS untuk desain visual dan JavaScript untuk menambahkan interaktivitas. Dengan mempelajari HTML, seseorang mendapatkan pijakan awal yang kuat untuk memahami teknologi web lainnya.

Lebih dari itu, HTML juga digunakan dalam kerangka kerja web modern seperti React atau Angular. Penguasaan HTML menjadi langkah pertama yang penting sebelum mempelajari teknologi lanjutan yang digunakan dalam pengembangan aplikasi web.

Baca juga: 10 Tugas Backend Developer, Bukan Cuma Ngoding Aja Loh!

Cara Kerja HTML

HTML digunakan untuk membuat struktur halaman web dengan cara yang sederhana. Berikut adalah langkah-langkah dasar cara kerja HTML:

1. Membuat Dokumen HTML

Pembuatan halaman web dimulai dengan menulis kode HTML di editor teks, seperti Notepad atau Visual Studio Code. Ini adalah tempat di mana kita membangun struktur dasar halaman.

2. Menambahkan Tag HTML

Di dalam dokumen, kita menggunakan berbagai tag HTML untuk mengatur konten, misalnya <p> untuk paragraf, <h1> untuk judul, atau <img> untuk gambar. Setiap tag membantu browser mengerti apa yang harus ditampilkan.

3. Menyimpan File dengan Ekstensi .html

Setelah selesai, dokumen disimpan dengan ekstensi .html agar dapat dibaca oleh browser sebagai halaman web.

4. Mengunggah File ke Server

Untuk bisa diakses secara online, file HTML diunggah ke server. Server ini berfungsi sebagai tempat penyimpanan file yang bisa diakses oleh siapa saja di internet.

5. Browser Membaca dan Menampilkan Halaman

Saat seseorang membuka halaman, browser akan mengunduh file HTML dari server, membaca tag-tag di dalamnya, dan menampilkan halaman sesuai struktur yang sudah kita buat.

Singkatnya, HTML memberi instruksi pada browser tentang cara menyusun dan menampilkan konten di layar pengguna, sehingga halaman web terlihat rapi dan informatif.

Baca juga: 5 Contoh CV Backend Developer, Pasti HRD Jatuh Hati

Struktur HTML dan Contoh HTML

Sumber: Canva

HTML memiliki struktur dasar yang sederhana, tetapi penting untuk dipahami agar halaman web dapat ditampilkan dengan baik oleh browser. Berikut adalah elemen-elemen utama dalam struktur HTML:

1. Tag <!DOCTYPE html>

Ini adalah deklarasi dokumen yang ditempatkan di paling atas file HTML. Tag ini memberi tau browser bahwa dokumen yang akan dibuka adalah halaman HTML5, sehingga browser bisa menampilkannya dengan benar.

Baca juga: Backend Engineer: Tugas, Skill, & Gaji Fantastis!

2. Tag <html>

Tag <html> adalah pembungkus utama untuk seluruh konten HTML. Semua elemen lain berada di dalam tag ini. Tag <html> menunjukkan awal dan akhir dari dokumen HTML.

3. Tag <head>

Bagian <head> berisi informasi penting tentang halaman web, seperti judul (title), ikon, dan metadata (informasi tambahan untuk mesin pencari). Tag <title> di dalam <head> menampilkan judul halaman di tab browser.

4. Tag <body>

Bagian <body> adalah tempat di mana semua konten utama halaman berada, seperti teks, gambar, video, dan link. Apa pun yang ingin ditampilkan kepada pengguna akan ditempatkan di dalam tag <body>.

5. Tag Penutup

Setiap elemen utama dalam HTML memiliki tag pembuka dan penutup, kecuali beberapa tag khusus. Misalnya, <html> harus ditutup dengan </html>, dan <body> ditutup dengan </body>. Ini penting agar struktur HTML tetap rapi dan mudah dibaca oleh browser.

Berikut contoh HTML dasar:

Dengan memahami struktur ini, kamu bisa mulai membangun halaman web yang rapi dan sesuai standar. Setiap bagian dalam HTML memiliki fungsinya masing-masing untuk menyusun halaman web dengan baik.

Baca juga: 10 Framework Backend Populer, Bikin Aplikasi Makin Kenceng

Contoh HTML

Sumber: Canva

Warga Bimbingan, berikut adalah contoh sederhana kode HTML untuk membuat halaman profil:

Penjelasan Kode:

1. Bagian <!DOCTYPE html> hingga <html>

Ini adalah awal dokumen HTML yang mendefinisikan bahwa file ini adalah halaman HTML5.

2. Bagian <head>

Mengatur informasi tentang halaman, termasuk judul yang muncul di tab browser dan gaya (CSS) untuk mempercantik tampilan.

3. Bagian <body>

Semua konten yang akan ditampilkan pada halaman web berada di dalam <body>. Di sini, kita memiliki:

1. Sebuah judul halaman <h1>Profil Saya
2. Gambar profil menggunakan <img> dengan atribut src dan alt.
3. Paragraf untuk deskripsi singkat tentang profil.
4. Daftar <ul> untuk menampilkan informasi kontak.
5. Paragraf tambahan tentang hobi.

Kode ini sederhana namun cukup menarik untuk digunakan sebagai kerangka dasar halaman profil pribadi. Kamu dapat menyesuaikannya dengan menambahkan detail atau gaya sesuai kebutuhan!

Gambar Contoh Hasil Coding HTML di VSCode

Baca juga: Apa itu Product Backlog? Simak Definisi & Penjelasan

Tertarik Mendalami HTML Lebih Lanjut dan Menjadi Front-End Developer?

Warga Bimbingan, setelah memahami dasar-dasar HTML, sekarang saatnya kamu mengasah keterampilan lebih jauh dan memulai perjalanan sebagai Front-End Developer!

Yuk, ikuti Bootcamp Front-End Development di dibimbing.id! Di sini, kamu akan belajar dari mentor-mentor berpengalaman dengan materi praktis yang langsung bisa kamu terapkan.

Kamu nggak cuma belajar teori, tapi langsung praktek membangun website profesional, menyusun portofolio, dan bersiap menghadapi tantangan nyata di industri!

Dibimbing.id juga memiliki 700+ hiring partner dan 95% alumni kami berhasil berkarier di dunia IT. Jadi, tunggu apa lagi? Kalau ada pertanyaan atau butuh bantuan, langsung hubungi kami di sini! Kami siap mendukung perjalanan belajarmu.

Yuk, gabung sekarang dan #BimbingSampeJadi Front-End Developer profesional!

Referensi: 

1. HTML Introduction [Buka]
2. HTML basics [Buka]