HTML adalah bahasa markup yang pasti digunakan di semua website. Kegunaan utama bahasa ini adalah untuk membuat struktur dasar website yang kemudian dilanjutkan dengan styling CSS dan fungsionalitas PHP atau JavaScript. Di artikel ini, kamu akan mempelajari pengertian HTML, beserta fungsi dan cara kerjanya!

Apa itu HTML?

Kepanjangan dari HTML adalah Hypertext Markup Language dan perlu kamu garis bawahi bahwa bahasa markup bukanlah bahasa pemrograman, untuk dapat dikategorikan sebagai bahasa pemrograman, sebuah bahasa harus mempunyai fungsi dinamis dan bahasa markup tidak memilikinya.

World Wide Web Consortium (W3C) telah memasukkan HTML ke dalam standar web resmi. Selain itu, W3C juga bertugas untuk terus memperbarui bahasa markup ini. Oleh karena itu, kalau kamu ingin mempelajari web programming, maka bahasa markup ini akan menjadi materi pertama yang wajib kamu kuasai.

Sejarah HTML

Penemu HTML adalah Tim Berners Lee. Pada tahun 1989, Tim yang saat itu bekerja sebagai kontraktor di European Organization for Nuclear Research (CERN) mendapatkan ide tentang hypertext yang berbasis internet. Dari sinilah Tim akhirnya menulis deskripsi pertama tentang idenya tersebut, tepatnya pada tahun 1991.

Pada awalnya, Tim menganggap idenya sebagai Standard Generalized Markup Language (SGML). Barulah pada tahun 1993 Tim mempublikasikannya sebagai Hypertext Markup Language lewat Internet Engineering Task Force (IETF). Publikasi inilah yang kemudian dianggap sebagai rilis versi 1.0.

Secara historis, perkembangan HTML dari waktu ke waktu ialah:

• Versi 1.0 (1991)

Ide awal pada versi pertama HTML adalah untuk berbagi informasi yang bisa diakses melalui browser. Namun pada saat itu, tidak banyak developer yang terlibat dalam pembuatan website. Sehingga bahasa markup ini juga sulit berkembang.

• Versi 2.0 (1995)

Rilis versi 2 memiliki semua fitur yang terdapat pada versi 1 yang dioptimalkan dan beberapa fitur tambahan. Versi ini menjadi standar dalam pembuatan website sampai Januari 1997.

• Versi 3.0 (1997)

Di versi 3, Dave Raggett berkontribusi besar dalam memperkenalkan fitur kertas kosong atau draft. Bahasa markup pada versi 3 menyertakan banyak pembaruan fitur yang membuat webmaster lebih leluasa dalam mendesain website. Sayangnya, pembaruan ini cukup memperlambat kinerja browser.

• Versi 4.01 (1999)

Dibandingkan dengan semua pendahulunya, versi keempat HTML adalah yang paling sukses. Versi ini mendukung fitur multimedia, scripting, fungsi print yang lebih baik, dan masih banyak lagi. Pasca rilis versi 4, W3C cukup lama tidak merilis versi lanjutan karena sibuk mengerjakan XHTML.

• Versi 5 (2014)

Versi ini merupakan perpanjangan dari versi 4. W3C menambahkan banyak tag baru, seperti <header>, <footer>, <main>, <video>, dan masih banyak lagi. HTML5 juga mendukung mathML dan SVG dalam teks.

Cara Kerja HTML

Cara kerja HTML adalah melalui proses rendering oleh browser. Agar browser bisa memahami dan memuat halaman web, maka kamu harus menyimpan file markup dengan ekstensi .html atau .htm. Sebuah website bisa memiliki beberapa file .htm, tergantung pada jumlah halaman dan kompleksitasnya.

Di dalam sebuah script markup, kamu akan menemukan banyak tag atau elemen. Tag inilah yang berfungsi untuk mengatur struktur website. Ketika membaca susunan tag dan informasi di dalamnya, browser bisa menampilkan halaman website dengan rapi dan terstruktur.

Sama seperti bahasa lain, HTML pun memiliki aturan penulisan yang harus kamu patuhi. Kesalahan penulisan syntax akan mengakibatkan error pada saat browser membaca file kode. Namun, jika dibandingkan dengan bahasa lainnya, bahasa markup termasuk yang paling sederhana.

Selain itu, HTML juga tidak memerlukan aplikasi khusus untuk menulis kode atau tugas teknis lainnya. Kamu bisa menulis script di VS Code, Sublime Text, atau text editor lainnya. Bahkan, Notepad biasa pun bisa kamu pakai untuk membuatnya. Satu-satunya yang kamu perlukan untuk menjalankannya hanyalah browser.

Contoh Kode HTML

Pada dasarnya, HTML adalah bahasa yang sederhana. Contohnya:

<div>

  <h1>Contoh Heading Utama</h1> 

  <h2>Sample Subheading</h2>

  <p>Contoh paragraf</p> 

  <img src=”/gambar.png” alt=”contoh alt text gambar”> 

  <p>Paragraf kedua dengan a <a href=”https://contohlink.com”>hyperlink</a></p>

</div>

Pada contoh kode sederhana di atas, kamu bisa melihat bahwa HTML adalah bahasa yang tersusun dari banyak tag dengan simbol pembuka ‘<>’ dan penutup ‘</>’. Tag <div> ialah divisi yang berfungsi untuk mengelompokkan sejumlah konten ke dalam satu bagian.

Tag <h1> dan <h2> adalah heading dan subheading yang bisa kamu pakai untuk membuat judul. Semakin besar level heading, maka semakin kecil ukuran hurufnya. Tag <p> adalah paragraf untuk membuat teks di bagian body. Sedangkan <img> adalah tag untuk memasukkan gambar.

Agar dapat menambahkan link ke paragraf, kamu bisa memakai tag <a> dengan anchor text seperti contoh kode di atas. Selain 6 jenis tag tersebut, masih banyak tag lain yang tidak bisa kita bahas semuanya di artikel ini. Setidaknya kamu sudah mengerti bagaimana cara kerja kode HTML dengan contoh sederhana di atas.

Fungsi HTML

Kamu mungkin sudah mengerti bahwa bahasa markup sudah menjadi standar dalam pembuatan website. Hanya saja, fungsinya ternyata lebih banyak dari itu. Secara lebih rinci, fungsi HTML adalah sebagai berikut:

1. Membuat Struktur Halaman Website

Fungsi utama bahasa markup adalah untuk membuat struktur utama halaman website. Bahasa inilah yang mengatur penempatan tata letak dan setiap konten yang ada di dalamnya. Artinya, bahasa markup adalah kerangka utama dalam mendesain halaman website.

2. Menjadi Landasan Bahasa Lain

HTML juga berfungsi sebagai landasan untuk menambahkan script bahasa lain ke dalam website. Di atas landasan inilah kamu bisa menambahkan CSS untuk mempercantik tampilan, PHP atau JavaScript untuk menambah fungsi, dan lain sebagainya.

3. Menampilkan Media

Fungsi lain bahasa markup adalah untuk menampilkan berbagai jenis file multimedia. Contohnya seperti gambar, video, dan audio. Jadi, kamu punya banyak pilihan media selain teks untuk ditampilkan di website.

4. Memberi Efek Khusus pada Teks

Fungsi keempat HTML adalah untuk menambahkan efek khusus pada teks di konten website. Kamu mungkin sudah terbiasa bekerja dengan dokumen menggunakan efek italic, bold, underline, highlight, dan masih banyak lagi. Melalui bahasa markup, kamu bisa menggunakan semua efek tersebut hanya dengan tag sederhana.

5. Mengarahkan Pengguna ke Halaman atau Situs Lain

Di contoh kode sebelumnya, kamu sudah memahami bagaimana hyperlink bekerja dalam sebuah tag. Fungsi ini bisa kamu manfaatkan untuk mengarahkan pengguna ke halaman lain di website kamu (internal link) ataupun ke website lain (external link).

Sudah Paham Mengenai Apa itu HTML?

Sejauh ini, kamu sudah memahami pengertian HTML beserta cara kerja, contoh, dan fungsinya. Semua website pasti memerlukan bahasa markup ini. Oleh karena itu, mempelajari HTML adalah tugas wajib bagi setiap developer. Apakah kamu sudah siap untuk menguasai HTML?