HTML adalah bahasa standar yang digunakan untuk membuat struktur halaman web. Meski sering disebut sebagai bahasa pemrograman, sebenarnya HTML bukanlah bahasa pemrograman dalam arti sebenarnya. Sebab, HTML merupakan bahasa markup yang berfungsi untuk mengelola dan menyajikan konten berupa teks, gambar, video, dan elemen-elemen lainnya dalam sebuah halaman web.
HTML memegang peranan penting dalam pembangunan website yang efisien dan cepat. Seperti yang dikutip dari situs FirstSiteGuide.com, terdapat lebih dari 95% situs web di dunia menggunakan HTML dan kategori-kategorinya untuk menciptakan lingkungan yang efisien dan cepat.
Karena itulah bagi kamu yang berniat membangun website, penting untuk mempelajari apa itu HTML hingga strukturnya di artikel Dewaweb kali ini. Simak terus sampai akhir ya!
Apa itu HTML?
HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun struktur halaman web. Tidak seperti bahasa pemrograman, HTML berfokus pada pemberian markup atau penanda pada konten yang akan ditampilkan di halaman web. Markup ini dilakukan dengan menggunakan serangkaian elemen atau “tag” yang memberikan informasi tentang struktur dan formatnya.
HTML memberikan struktur dasar bagi halaman web dengan menggunakan elemen-elemen seperti heading, paragraf, tautan, gambar, daftar, dan lain sebagainya. Setiap elemen HTML diberi tanda dengan tag pembuka dan tag penutup yang menunjukkan bagaimana konten harus ditampilkan pada browser.
Sebagai bahasa markup utama untuk web, HTML memiliki pengguna yang sangat banyak. Hingga saat ini diperkirakan dari 2 miliar website, sekitar 1,9 miliarnya menggunakan HTML. Dari jumlah tersebut, sekitar 190 juta website merupakan pengguna HTML yang aktif.
Kemampuannya dalam menyusun dan menyajikan konten secara terstruktur, membuat HTML menjadi pondasi penting dalam pembangunan halaman web yang efisien dan mudah diakses oleh berbagai perangkat.
Sejarah HTML
HTML pertama kali diciptakan oleh Tim Berners-Lee, seorang fisikawan di CERN (organisasi riset nuklir asal Swiss) pada tahun 1989. Tujuan awal pembuatan HTML adalah untuk membantu para peneliti berbagi dokumen dari satu komputer ke komputer lain. Sistem ini kemudian dikembangkan lebih lanjut menjadi “World Wide Web” atau “www“.
Sejak awal kemunculannya, HTML telah mengalami beberapa kali revisi dan perkembangan hingga mencapai versi terkini saat ini. Berikut adalah garis besar perkembangan versi-versi HTML.
- 1993 – HTML versi 1.0 dirilis secara tidak resmi pada Juni 1993.
- 1995 – HTML 2.0 dirilis resmi pada 24 November 1995 sebagai versi resmi pertama.
- 1997 – HTML 3.2 dirilis resmi pertama kali oleh W3C (World Wide Web Consortium) pada 14 Januari 1997, setelah versi 3.0 gagal beredar karena banyaknya perdebatan terkait perubahan yang diajukan.
- 1998 – HTML 4.0 dirilis pada 2 April 1998.
- 1999 – HTML 4.01 dirilis di akhir tahun untuk memperbaiki kekurangan dari versi 4.0.
- 2000 – XHTML 1.0 dirilis pada 26 Januari 2000, mengadopsi XML (Extended Markup Language) untuk menyederhanakan proses penyimpanan dan pengiriman data.
- 2002 – XHTML 2.0 dirilis pada Agustus 2002.
- 2014 – HTML5 dirilis dan digunakan secara global, dikembangkan oleh W3C dan WHATWG untuk bekerja tanpa XHTML.
Hingga saat ini, HTML5 dianggap sebagai versi paling canggih karena stabilitas dan kesederhanaan sistemnya. Versi ini juga dapat dikolaborasikan dengan CSS dan JavaScript untuk membuat website secara manual menggunakan kode.
Baca Juga: HTML5: Pengertian dan Perbedaannya Dengan HTML
Cara Kerja HTML
HTML bekerja dengan menggunakan serangkaian elemen atau tag yang memberikan struktur dan semantik pada konten sebuah halaman web. File HTML memiliki ekstensi .html atau .htm yang dapat dibuka dan ditampilkan oleh browser web seperti Google Chrome, Mozilla Firefox, Safari, dan lainnya.
Cara kerja HTML dapat dijelaskan sebagai berikut.
- Pembuatan file HTML: Buat sebuah file dengan ekstensi .html atau .htm menggunakan teks editor. Di dalam file ini, kamu akan menulis kode HTML yang terdiri dari elemen-elemen terstruktur.
- Penulisan elemen HTML: Elemen HTML ditulis menggunakan tag pembuka dan tag penutup yang menandai bagian-bagian konten tertentu. Misalnya, <h1>Judul</h1> untuk menandai sebuah judul utama. Setiap elemen memiliki fungsi dan semantik yang berbeda dalam menstrukturkan konten.
- Hierarki elemen: Elemen-elemen HTML disusun secara hierarkis, membentuk bagian-bagian seperti judul, paragraf, daftar, tautan, gambar, dan blok konten lainnya. Susunan hierarki ini membantu browser memahami struktur dan urutan tampilan konten.
- Rendering halaman web: Setelah menyimpan file HTML, browser web akan membaca dan memproses kode di dalamnya. Browser akan merender atau menampilkan konten halaman web sesuai dengan elemen-elemen HTML yang telah ditulis.
Umumnya, sebuah situs web terdiri dari beberapa halaman HTML yang saling terhubung melalui tautan (link). Setiap halaman memiliki file HTML tersendiri, seperti halaman beranda, halaman tentang kami, halaman kontak, dan lainnya. Meski begitu, semua halaman ini menggunakan prinsip dasar yang sama dalam penggunaan elemen-elemen HTML.
Baca Juga: Tutorial Cara Membuat Website dengan HTML dan CSS bagi Pemula
Fungsi HTML
Meskipun bukan bahasa pemrograman, HTML memiliki beberapa fungsi penting, di antaranya sebagai berikut.
- Digunakan untuk membuat struktur website – HTML memberikan kerangka dasar bagi sebuah situs web dengan menggunakan elemen-elemen seperti heading, paragraf, daftar, tautan, gambar, dan lain-lain. Elemen-elemen ini disusun secara hierarkis untuk membentuk tampilan dan alur konten pada halaman web.
- Membungkus elemen HTML – Setiap elemen HTML, seperti judul, paragraf, atau gambar, dibungkus dengan tag pembuka dan tag penutup. Tag-tag ini memberikan informasi kepada browser tentang bagaimana elemen tersebut harus ditampilkan dan diformat.
- Membuat link yang dapat mengarahkan ke halaman lain – HTML memungkinkan kamu untuk membuat tautan (link) yang menghubungkan antara satu halaman dengan halaman lain, baik di dalam situs web yang sama maupun ke situs web eksternal. Tautan ini memudahkan navigasi bagi pengguna dalam menjelajahi konten di seluruh situs.
- Mengingat HTML menggunakan karakter ASCII – HTML dirancang untuk menggunakan karakter-karakter ASCII (American Standard Code for Information Interchange) dalam penulisan kodenya. Hal ini memastikan kompatibilitas dan portabilitas kode HTML di berbagai platform dan perangkat.
Selain fungsi-fungsi di atas, HTML juga memungkinkan kamu untuk menyisipkan multimedia seperti gambar, video, dan audio ke dalam halaman web. Meskipun terbatas dalam hal tampilan dan interaksi, HTML sering dikombinasikan dengan teknologi lain seperti CSS (Cascading Style Sheets) untuk mempercantik tampilan, dan JavaScript untuk menambahkan fungsionalitas dan interaksi yang lebih kompleks.
Struktur HTML
HTML dibangun dari beberapa komponen utama yang membentuk struktur sebuah halaman web. Berikut adalah penjelasannya.
1. Tag
Tag adalah penanda awal dan akhir dari sebuah elemen HTML. Tag terdiri dari tanda kurung siku (<>) yang mengapit sebuah kode tertentu. Tag berfungsi sebagai perintah atau instruksi yang dibaca oleh browser. Ada dua jenis tag dalam HTML:
- Tag dengan penutup, seperti <p>…</p> untuk paragraf, <body>…</body> untuk tubuh halaman, dan <title>…</title> untuk judul halaman.
- Tag tanpa penutup, seperti <br> untuk baris baru, <img> untuk menyisipkan gambar, dan <hr> untuk membuat garis horisontal.
Contoh tag:
| <h1>Judul Utama</h1>, <a href=”https://example.com”>Tautan</a> |
2. Elemen
Elemen adalah bagian yang lebih luas dari tag. Elemen terdiri dari tag pembuka, konten di dalamnya (jika ada), dan tag penutup, serta atribut yang melengkapinya (jika ada). Tidak semua elemen memiliki tag penutup, seperti elemen <br> dan <img>.
Contoh elemen:
|
<p>Ini adalah sebuah paragraf.</p>
<a href=”https://example.com”>Tautan ke Website</a> |
3. Atribut
Atribut adalah informasi tambahan yang diberikan pada sebuah tag atau elemen. Tidak semua tag memiliki atribut, tetapi beberapa tag tertentu memerlukan atribut agar dapat berfungsi dengan benar, seperti <a>, <img>, dan <video>. Atribut ditulis di dalam tag pembuka dan memberikan informasi tambahan tentang bagaimana elemen tersebut harus ditampilkan atau berfungsi.
Contoh atribut:
|
<a href=”https://example.com”>Tautan ke Website</a> (atribut href memberikan alamat tautan)
<img src=”gambar.jpg” alt=”Deskripsi gambar”> (atribut src memberikan sumber gambar, dan alt memberikan deskripsi teks alternatif) |
Dengan memahami struktur tag, elemen, dan atribut dalam HTML, kamu dapat membangun halaman web yang terstruktur dengan baik dan sesuai dengan standar yang berlaku. Kombinasi dari ketiga komponen ini memungkinkan kamu untuk mengatur tampilan dan perilaku konten pada halaman web.
Baca Juga: 21+ Contoh Coding HTML Website Dasar untuk Pemula
Hubungan antara HTML, JavaScript, dan CSS
HTML menggunakan kode berupa tag dan elemen untuk menampilkan konten seperti teks, gambar, tautan, dan elemen-elemen lainnya. Namun, HTML memiliki keterbatasan dalam hal menambahkan fitur interaktif dan mengatur tampilan visual secara detail.
Untuk mengatasi keterbatasan tersebut, HTML dikombinasikan dengan dua teknologi lain, yaitu JavaScript dan CSS (Cascading Style Sheets).
- CSS (Cascading Style Sheets) – bahasa style sheet yang digunakan untuk mengatur tampilan visual dari elemen-elemen HTML. CSS membantu untuk mengontrol aspek seperti warna, font, tata letak, margin, padding, dan gaya lainnya. Dengan CSS, kamu dapat memisahkan tampilan dari struktur konten (HTML), sehingga memudahkan pemeliharaan dan konsistensi tampilan di seluruh halaman web.
- JavaScript – bahasa pemrograman tingkat tinggi yang berjalan di sisi klien (web browser) yang digunakan untuk menambahkan interaksi, animasi, efek visual, dan fungsionalitas lanjutan pada halaman web. Dengan JavaScript, kamu dapat memanipulasi elemen HTML, menangani event (seperti klik atau hover), melakukan validasi form, dan membuat tampilan web menjadi lebih dinamis dan responsif.
Ketiga teknologi ini bekerja secara kolaboratif dalam membangun sebuah halaman web, singkatnya sebagai berikut.
- HTML memberikan struktur dan konten dasar.
- CSS mengatur tampilan visual dari elemen-elemen HTML.
- JavaScript menambahkan interaksi, animasi, dan fungsionalitas lanjutan pada halaman web.
Meskipun masing-masing teknologi memiliki peran yang berbeda, ketiganya saling melengkapi untuk menciptakan web yang interaktif bagi pengguna.
Baca Juga: Daftar Kode Warna HTML CSS Terlengkap untuk Membuat Desain Website
Penutup
HTML atau HyperText Markup Language adalah bahasa markup standar dalam pembangunan website. Dengan menggunakan serangkaian elemen dan tag, HTML memberikan struktur dan semantik pada konten sebuah halaman web, sehingga konten tersebut dapat ditampilkan dengan benar di browser.
Meskipun memiliki keterbatasan dalam tampilan dan interaksi, HTML sering dikombinasikan dengan CSS untuk membuat tampilan yang menarik dan JavaScript untuk menambahkan fungsionalitas lanjutan.
Jika kamu tertarik untuk membangun website sendiri dan mempelajari HTML lebih lanjut, Dewaweb menyediakan layanan hosting berkualitas dengan harga terjangkau.
Dengan hosting Dewaweb, kamu dapat mempublikasikan website secara mudah dan mendapatkan fitur-fitur lengkap seperti kecepatan website yang terjamin, domain gratis selamanya, SSL certificate gratis, dan dukungan teknis 24/7. Yuk, bergabung bersama ribuan pelanggan Dewaweb lainnya dan wujudkan website impian kamu sekarang!
