Apa itu HTML? Pengertian dan cara kerja HyperText Markup Language

HTML adalah singkatan dari HyperText Markup Language. HTML merupakan bahasa markup standar untuk halaman web, yang digunakan untuk membuat dan menyusun bagian, paragraf, dan link menggunakan elemen HTML, yaitu komponen dasar halaman web seperti tag dan atribut.

HTML bekerja dengan serangkaian tag yang diapit tanda kurung sudut untuk menentukan berbagai bagian konten. Browser akan membaca dokumen HTML dan menampilkannya sebagai halaman web dengan menafsirkan tag tersebut. Dengan file HTML, Anda bisa menginstruksikan browser untuk menampilkan teks, gambar, link, dan elemen lainnya di layar.

Bahasa markup ini memiliki beberapa kegunaan. Developer menggunakan kode HTML untuk mengatur cara browser menampilkan elemen halaman web, seperti teks, hyperlink, dan file media. HTML juga banyak digunakan untuk navigasi internet karena memudahkan penyisipan link antara halaman dan website yang saling terkait. Selain itu, HTML memungkinkan Anda mengatur dan memformat dokumen web.

Perlu diketahui, HTML tidak dianggap sebagai bahasa pemrograman karena tidak bisa membuat fungsi yang dinamis, meskipun kini HTML menjadi standar resmi web. Spesifikasi HTML dikembangkan dan dikelola oleh World Wide Web Consortium (W3C), yang sekaligus memberikan update secara berkala.

Cara kerja HTML

HTML bekerja dengan menggunakan tag dan atribut untuk menyusun konten. Setelah itu, browser akan membacanya dan merendernya menjadi halaman web yang bisa dilihat pengguna. File HTML disimpan menggunakan ekstensi .html atau .htm.

Rata-rata website memiliki beberapa halaman HTML yang berbeda. Sebagai contoh, halaman beranda, halaman Tentang, dan halaman Kontak masing-masing memiliki file HTML tersendiri.

Semua halaman HTML memiliki serangkaian elemen HTML, yang terdiri dari kumpulan tag dan atribut.

Elemen HTML adalah fondasi utama halaman web. Tag berfungsi untuk memberi tahu browser web di mana elemen dimulai dan berakhir, sedangkan atribut menjelaskan karakteristik elemen tersebut.

Struktur elemen HTML

Elemen HTML memiliki tiga bagian utama, yaitu: 

• Tag pembuka, digunakan untuk menandai awal elemen. Tag ini diapit tanda kurung sudut pembuka dan penutup. Sebagai contoh, gunakan tag pembuka <p> untuk membuat paragraf.
• Konten, yaitu output yang akan dilihat oleh pengguna.
• Tag penutup, sama seperti tag pembuka, tapi menggunakan garis miring sebelum nama elemen. Sebagai contoh, </p> digunakan untuk mengakhiri paragraf.

Gabungan dari ketiga bagian ini akan membentuk elemen HTML:

<p>Begini cara menambahkan paragraf di HTML.</p>

Atribut HTML

Bagian lain dari elemen HTML adalah atribut, yang terdiri dari dua bagian, yaitu nama dan nilai atribut. Nama atribut menunjukkan informasi tambahan yang ingin ditambahkan, sedangkan nilai atribut memberikan spesifikasi lebih lanjut.

Sebagai contoh, elemen dengan atribut style yang menambahkan warna ungu dan font Verdana akan terlihat seperti ini:

<p style="color:purple;font-family:verdana">Begini cara menambahkan paragraf di HTML.</p>

Class HTML

Atribut class memiliki fungsi yang penting, terutama dalam pengembangan website dan pemrograman. Atribut ini menambahkan informasi gaya yang bisa diterapkan pada beberapa elemen dengan nilai class yang sama.

Sebagai contoh, Anda bisa menggunakan gaya yang sama untuk heading <h1> dan paragraf <p>. Gaya tersebut mencakup warna latar belakang, warna teks, border, margin, dan padding di bawah class important. Untuk menerapkan gaya yang sama antara <h1> dan <p>, tambahkan class=”important” setelah setiap tag pembuka:

.important {
 background-color: blue;
 color: white;
 border: 2px solid black;
 margin: 2px;
 padding: 2px;
}
<h1 class="important">Ini adalah heading</h1>

<p class="important">Ini adalah paragraf.</p>

Elemen kosong

Sebagian besar elemen memiliki tag pembuka dan tag penutup, tapi ada juga beberapa elemen yang tetap berfungsi tanpa tag penutup. Elemen ini disebut elemen kosong karena tidak memiliki konten:

<img src="/" alt="Gambar">

Tag gambar ini memiliki dua atribut, yaitu atribut src untuk path gambar dan atribut alt untuk teks deskriptif. Namun, tag tersebut tidak memiliki konten atau tag penutup.

Deklarasi DOCTYPE

Setiap dokumen HTML harus diawali dengan deklarasi <!DOCTYPE> untuk memberi tahu browser tentang jenis dokumen tersebut. Pada HTML5, deklarasi DOCTYPE ditulis seperti ini:

<!DOCTYPE html>

Apa fungsi HTML?

Berikut adalah beberapa penggunaan utama HTML:

• Pengembangan web. Developer menggunakan kode HTML untuk mengatur cara browser menampilkan berbagai elemen halaman web, seperti teks, heading, gambar, video, dan formulir interaktif.
• Navigasi internet. Dengan HTML, Anda bisa menelusuri dan menghubungkan berbagai halaman web dengan mudah melalui hyperlink. Karena itu, HTML menjadi fondasi utama dalam membangun struktur navigasi website.
• Dokumentasi web. HTML memungkinkan Anda menyusun dan memformat dokumen menggunakan heading, daftar, tabel, dan elemen semantik lainnya.
• Email marketing. HTML bisa digunakan untuk membuat template email yang lebih menarik dengan tata letak khusus, gambar, dan tombol interaktif.
• Aksesibilitas web. HTML menyediakan elemen semantik yang membantu screen reader dan teknologi bantu lainnya menyampaikan konten kepada pengguna penyandang disabilitas.

Tag HTML dan elemen HTML yang paling sering digunakan

Tag HTML yang paling sering digunakan umumnya terbagi ke dalam dua kategori, yaitu elemen level blok dan elemen inline. Saat ini, HTML memiliki 142 tag yang bisa digunakan untuk membuat berbagai elemen yang membentuk struktur dan konten halaman web.

Elemen level blok

Elemen level blok menggunakan seluruh lebar halaman yang tersedia dan selalu dimulai pada baris baru. Sebagai contoh, elemen heading akan berada pada baris yang berbeda dari elemen paragraf.

Setiap halaman HTML menggunakan tiga tag utama berikut:

• Tag <html>. Elemen root yang mendefinisikan seluruh dokumen HTML.
• Tag <head>. Berisi informasi meta, seperti judul halaman dan set karakter.
• Tag <body>. Mengapit seluruh konten yang ditampilkan pada halaman.

Beberapa tag level blok lainnya yang sering digunakan meliputi:

• Tag heading. Terdiri dari <h1> sampai <h6>, dengan <h1> sebagai heading tertinggi dan <h6> sebagai yang paling kecil.
• Tag paragraf. Tag <p> digunakan untuk mengapit sebuah paragraf.
• Tag daftar. HTML menyediakan beberapa jenis daftar. Gunakan tag <ol> untuk daftar berurutan dan <ul> untuk daftar tidak berurutan. Setelah itu, gunakan tag <li> untuk setiap item dalam daftar.

Elemen inline

Elemen inline digunakan untuk memformat konten di dalam elemen level blok, misalnya dengan menambahkan link atau memberikan penekanan pada teks. Elemen ini paling sering digunakan untuk memformat teks tanpa mengubah alur konten.

Sebagai contoh, tag <b> menampilkan teks dalam format tebal, sedangkan tag <i> menampilkannya dalam format miring. Hyperlink juga termasuk elemen inline yang menggunakan tag <a> dan atribut <href> untuk menentukan tujuan link:

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

Kelebihan dan kekurangan HTML

Kelebihan utama HTML adalah mudah dipelajari, gratis digunakan, dan kompatibel dengan semua browser modern. Di sisi lain, HTML juga memiliki beberapa keterbatasan, seperti tidak mampu membuat fungsi yang dinamis tanpa bantuan teknologi lain.

Kelebihan HTML

• Mudah dipelajari. HTML memiliki syntax yang sederhana dengan tag dan atribut yang mudah dipahami. Karena itu, pemula bisa mulai membuat halaman web dasar hanya dengan mempelajari beberapa tag.
• Gratis dan mudah diakses. HTML merupakan standar terbuka yang tidak memerlukan lisensi atau software berbayar. Anda bisa menulis kode HTML menggunakan editor teks apa pun dan membukanya di browser mana saja.
• Dukungan browser yang universal. Semua browser modern mendukung HTML sehingga konten website bisa ditampilkan dengan baik di berbagai perangkat dan platform.
• Ringan dan cepat. File HTML umumnya berukuran kecil sehingga lebih cepat dimuat dan membantu meningkatkan performa website.
• SEO-friendly. Mesin pencari bisa lebih mudah melakukan crawling dan indexing pada konten HTML, terutama apabila Anda menggunakan tag HTML semantik yang menjelaskan struktur konten dengan jelas.
• Mudah diintegrasikan dengan teknologi lain. HTML bekerja bersama CSS untuk mengatur tampilan website dan JavaScript untuk menambahkan interaktivitas, sehingga membentuk fondasi utama pengembangan web modern.

Kekurangan HTML

• Hanya bisa membuat konten statis. HTML tidak dapat membuat fungsi yang dinamis atau memproses input pengguna tanpa bantuan JavaScript maupun bahasa pemrograman server-side.
• Kemampuan styling terbatas. HTML menyediakan pemformatan dasar, tetapi Anda tetap memerlukan CSS untuk membuat desain website yang lebih menarik.
• Kode yang berulang. Saat membuat website berskala besar hanya dengan HTML, Anda perlu menulis kode yang sama berulang kali untuk elemen yang muncul di banyak halaman, seperti header dan footer.
• Potensi inkonsistensi antar-browser. Meskipun browser modern mendukung standar HTML, beberapa browser lama mungkin menampilkan elemen tertentu secara berbeda sehingga memerlukan pengujian tambahan.
• Rentan terhadap masalah keamanan. HTML tidak menyediakan fitur keamanan bawaan. Karena itu, website bisa cukup rentan terhadap serangan cyber tanpa langkah-langkah keamanan yang tepat.
• Tidak memiliki logika atau kemampuan perhitungan. HTML tidak bisa melakukan perhitungan, mengambil keputusan, atau menangani interaksi pengguna yang kompleks tanpa bantuan bahasa pemrograman tambahan.

Apa perbedaan antara HTML dan HTML5?

HTML5 adalah versi terbaru dari standar HTML yang dirancang untuk mendukung aplikasi web modern dan konten multimedia. Perbedaan utama antara HTML dan HTML5 mencakup dukungan bawaan untuk audio dan video, elemen semantik baru untuk struktur dokumen yang lebih baik, kemampuan penyimpanan offline yang lebih canggih, serta fitur grafis dan interaktivitas yang lebih lengkap.

Lihat tabel berikut untuk memahami peningkatan HTML5 dibandingkan versi HTML sebelumnya:

Berbagai peningkatan tersebut menjadikan HTML5 sebagai standar utama dalam pengembangan web modern. Dengan performa yang lebih maksimal, pengalaman pengguna yang lebih optimal, serta kompatibilitas yang lebih baik di berbagai browser dan perangkat, HTML5 kini menjadi fondasi bagi sebagian besar website modern.

Bagaimana HTML, CSS, dan JavaScript saling terkait?

HTML, CSS, dan JavaScript memiliki peran yang berbeda, tapi saling melengkapi dalam pembuatan website. HTML menyediakan struktur dan konten, CSS mengatur tampilan visual, sedangkan JavaScript menambahkan interaktivitas dan fungsi dinamis.

Berikut fungsi masing-masing teknologi ini dalam menyusun halaman web:

• HTML: menyediakan struktur dan konten halaman web. HTML menentukan semua elemen yang Anda lihat, seperti heading, paragraf, gambar, link, formulir, dan tabel menggunakan sistem tag. Sederhananya, HTML berfungsi sebagai kerangka atau blueprint halaman web yang menentukan konten apa saja yang ditampilkan dan bagaimana susunannya.
• CSS: mengatur tampilan visual dan styling elemen HTML. CSS menentukan warna, font, spasi, layout, latar belakang, animasi, dan desain responsif. Dengan CSS, konten bisa ditampilkan secara optimal di berbagai ukuran layar dan perangkat. Tanpa CSS, halaman web hanya akan tampil sebagai teks biasa dengan format bawaan browser.
• JavaScript: menambahkan interaktivitas dan fungsi dinamis ke halaman web. Bahasa ini memungkinkan berbagai interaksi pengguna, seperti validasi formulir, menu interaktif, slider, pop-up, animasi, dan pembaruan konten secara real-time tanpa perlu memuat ulang halaman. JavaScript juga bisa memanipulasi elemen HTML dan styling CSS berdasarkan tindakan pengguna sehingga halaman web terasa lebih responsif dan interaktif.

Ketiganya merupakan fondasi utama dalam pengembangan web front-end dan hampir selalu digunakan secara bersamaan untuk menghadirkan pengalaman pengguna yang menarik. Sebagian besar website modern mengandalkan kombinasi HTML, CSS, dan JavaScript untuk menghadirkan pengalaman interaktif yang sesuai dengan ekspektasi pengguna saat ini.

Bagaimana cara belajar coding HTML?

Mempelajari HTML bisa membuka berbagai peluang di bidang pengembangan web dan karier digital. Sebagai fondasi utama semua website, HTML merupakan keterampilan penting yang perlu dikuasai, baik untuk membangun proyek pribadi, menjadi web developer, maupun sekadar memahami cara kerja web.

Pengetahuan tentang HTML juga mudah diterapkan di berbagai bidang. Setelah memahami HTML, Anda akan lebih mudah mempelajari CSS dan JavaScript, yang menjadi langkah berikutnya untuk berkembang menjadi full-stack developer.

Selain itu, memahami HTML juga membantu Anda terjun ke berbagai profesi di luar pengembangan web. Content creator, digital marketer, blogger, hingga entrepreneur bisa memanfaatkan HTML untuk menyesuaikan website, mengatasi masalah sederhana, dan berkomunikasi lebih efektif dengan developer.

Meskipun saat ini tersedia banyak kursus online untuk belajar coding, berikut beberapa sumber terbaik untuk mempelajari HTML:

• freeCodeCamp: menyediakan kurikulum interaktif gratis yang mencakup HTML, CSS, dan JavaScript, lengkap dengan tantangan coding serta proyek praktik.
• Codecademy: menyediakan kursus HTML interaktif dengan lingkungan coding langsung sehingga Anda bisa belajar sambil berlatih.
• W3Schools: menyediakan tutorial, contoh, dan latihan yang mudah dipahami. Platform ini mencakup berbagai tag dan atribut HTML serta editor interaktif “Try it Yourself”.

Mulailah dengan mempelajari struktur dasar dan tag yang paling sering digunakan, lalu praktikkan dengan membuat halaman web HTML sederhana. Anda bisa membuat proyek kecil seperti portofolio pribadi, layout blog, atau landing page untuk menerapkan materi yang sudah dipelajari.

Setelah terbiasa menggunakan HTML, lanjutkan dengan mempelajari CSS untuk styling dan JavaScript untuk interaktivitas. Langkah ini akan membantu Anda mengembangkan kemampuan secara bertahap hingga mampu membuat website profesional yang berfungsi penuh.

Yang terpenting, latih kemampuan HTML Anda secara konsisten. Luangkan waktu secara rutin untuk menulis kode dan bereksperimen dengan berbagai tag serta struktur HTML. Jangan takut melakukan kesalahan karena hal tersebut merupakan bagian penting dari proses belajar.

Semua konten tutorial di website ini telah melalui peninjauan menyeluruh sesuai standar dan komitmen editorial Hostinger.

Penulis

Faradilla Ayunindya

Faradilla, yang lebih akrab disapa Ninda, sudah berpengalaman selama 10 tahun sebagai linguist dan 5 tahun sebagai Content Marketing Specialist di Hostinger. Ia suka mengikuti tren teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca mengatasi masalah yang dialami. Kenali Ninda lebih dekat di LinkedIn.

Tutorial lain dari Faradilla Ayunindya