HTML: Pengertian, Fungsi, Komponen, Jenis, dan Sejarahnya

HTML adalah bahasa yang wajib dikuasai oleh seorang web developer, apalagi bagi Anda yang seorang front-end developer.

Bahasa markup ini merupakan komponen yang sangat penting dalam website.

Oleh sebab itu, tidak ada ruginya untuk belajar HTML. Simak penjelasan lengkapnya dari Sitespirit sampai habis!

Apa itu HTML?

HTML merupakan singkatan dari HyperText Markup Language dan didefinisikan sebagai bahasa markup untuk pembuatan web.

Bahasa ini terdiri dari sekumpulan simbol-simbol dan kode-kode yang nantinya di-insert ke dalam sebuah file yang mau ditampilkan di internet.

Simbol-simbol yang digunakan pada bahasa ini menggunakan tags berupa simbol bracket “<” dan “>” serta sering kali menggunakan “<p>” untuk menjelaskan sebuah informasi tentang teks dalam dokumen.

Untuk membuat sebuah file HTML, ada standar khusus yang harus diikuti. Dokumen HTML modern umumnya disimpan dengan pengodean karakter Unicode UTF-8, yang dideklarasikan dengan <meta charset="utf-8"> di bagian head.

Keberadaan bahasa markup ini dapat membantu Anda dalam menyusun heading dan paragraf atau membuat link, gambar, dan lainnya yang bisa terlihat di web page.

Semua web browser modern mendukung HTML, seperti Google Chrome, Mozilla Firefox, dan Microsoft Edge.

Perlu dicatat, HTML bukan bahasa pemrograman. HTML tidak memiliki logika seperti variabel, perulangan, atau percabangan; fungsinya adalah menandai struktur dan makna konten. Logika dan interaksi ditangani oleh bahasa pemrograman seperti JavaScript.

Sejarah HTML

HTML adalah bahasa markup pertama yang digunakan di World Wide Web (WWW). Pengembang pertamanya adalah orang yang sama dengan penemu WWW, yaitu Tim Berners-Lee.

Awalnya pada akhir tahun 1991, Tim Berners-Lee mempublikasikan dokumen yang disebut “HTML Tags” yang menggambarkan 18 elemen.

Awalnya ini dikembangkan untuk membantu ilmuwan mengakses dokumen yang terdapat di dalam komputer.

Kemudian pada versi 2.0 digunakan standar untuk fitur utama yang berbasis pada penerapan pada tahun 1994 yang selanjutnya pada tahun 1995 HTML 2.0 dipublikasikan sebagai RFC 1866.

Versi ini mampu menampilkan data dan form yang bisa langsung diedit. Versi ini juga adalah cikal bakal dari website interaktif.

Lalu pada tahun 1997, kembali dipublikasikan pada versi 3.2 sebagai W3C Recommendation. Versi ini menambahkan dukungan tabel, applet, serta teks yang dapat mengalir di sekitar gambar.

Selanjutnya, pada kurun waktu akhir tahun 1997 dan pertengahan tahun 1998, dipublikasikan lagi HTML 4.0 sebagai W3C Recommendation. Versi ini memperkenalkan dukungan style sheet (CSS), frame, scripting, serta fitur aksesibilitas yang lebih baik.

Setelah itu pada akhir tahun 1999 hingga pertengahan 2000, muncul kembali dengan versi 4.01.

Versi kali ini juga dipublikasikan dengan standar internasional untuk Hypertext Markup Language, yaitu ISO/IEC 15445:2000. Versi ini menjadi standar utama selama bertahun-tahun sebelum digantikan HTML5.

Kemudian pada tahun 2014, W3C menerbitkan HTML5 sebagai Recommendation. Versi ini dirancang untuk aplikasi web modern yang menggabungkan HTML, CSS, dan JavaScript.

HTML5 membawa banyak elemen baru, seperti <video> dan <audio> untuk menyematkan video dan audio tanpa plugin, <canvas> untuk grafis, serta elemen semantik seperti <header>, <nav>, <article>, dan <figure>.

Sejak 2019, pengembangan HTML dikelola oleh WHATWG, kelompok yang dimotori para pembuat browser, sebagai HTML Living Standard. Artinya, HTML kini terus diperbarui tanpa nomor versi baru.

Fungsi HTML

Setelah mengetahui sejarahnya, seperti apa sebenarnya fungsi HTML itu? Langsung saja kita bahas di bawah ini tentang fungsi-fungsinya.

1. Foundation

Bahasa markup ini berfungsi sebagai fondasi dari sebuah website. Selain itu, apabila dikombinasikan dengan CSS dan JavaScript, tampilan website Anda akan lebih menarik.

2. Creation

Fungsi keduanya adalah dapat membantu dalam membuat halaman website Anda yang dapat membantu Anda untuk menyalurkan berbagai informasi-informasi melalui internet.

3. Tagging

Kemudian fungsi ketiganya adalah bisa menandai teks dan bagian-bagian dari web page.

Dengan bantuan Hypertext Markup Language, maka halaman website Anda akan mudah dibaca oleh orang lain karena tersusun dengan rapi dan menarik.

4. Showing

Selanjutnya adalah dapat menampilkan halaman yang tidak membosankan karena Anda bisa menambahkan gambar, video, maupun audio dengan memanfaatkan HTML.

5. Directing

Dan yang terakhir, kini HTML bisa membantu Anda membuat halaman yang bisa mengarahkan pembaca website Anda ke halaman lainnya yang dikenal sebagai hyperlink.

Kelebihan HTML

Hypertext Markup Language memiliki beberapa kelebihan yang menjadikannya bahasa yang sangat penting dalam pengembangan web. Berikut ini adalah beberapa kelebihan utama HTML:

1. Sederhana dan Mudah Dipahami

HTML adalah bahasa yang relatif mudah dipelajari dan dipahami, bahkan oleh pemula. Ini membuatnya menjadi bahasa yang populer bagi banyak orang yang ingin membuat halaman web dasar.

2. Platform-Independen

Hypertext Markup Language dapat dijalankan di berbagai platform dan sistem operasi, sehingga halaman web yang dibuat dengan Hypertext Markup Language dapat diakses oleh berbagai perangkat, termasuk komputer, smartphone, dan tablet.

3. Kompatibilitas

Banyak browser web mendukung Hypertext Markup Language dengan baik, sehingga halaman web yang dibuat dengan HTML umumnya dapat diakses dengan baik di berbagai browser yang berbeda.

4. Pengembangan Terbuka

HTML adalah standar terbuka yang kini dikembangkan oleh WHATWG sebagai HTML Living Standard, setelah sebelumnya distandardisasi oleh World Wide Web Consortium (W3C).

Ini berarti bahwa siapa saja dapat mengakses spesifikasi Hypertext Markup Language dan berkontribusi pada perkembangannya.

5. Integrasi dengan Bahasa Lain

Hypertext Markup Language dapat dengan mudah diintegrasikan dengan teknologi lain, seperti CSS (Cascading Style Sheets), untuk mengatur tampilan halaman web dan JavaScript untuk menambahkan interaktivitas.

Kekurangan HTML

Hypertext Markup Language adalah bahasa dasar untuk membangun halaman web, tetapi memiliki beberapa kekurangan yang perlu dipertimbangkan:

1. Statik

HTML pada dasarnya adalah bahasa markup statis, yang berarti bahwa halaman web yang dibuat dengan Hypertext Markup Language cenderung bersifat statis dan tidak memiliki interaktivitas yang tinggi tanpa bantuan bahasa pemrograman seperti JavaScript.

2. Keamanan Terbatas

HTML tidak memiliki banyak mekanisme keamanan bawaan, dan serangan keamanan web seperti Cross-Site Scripting (XSS) dan Cross-Site Request Forgery (CSRF) dapat terjadi jika tidak diatasi dengan benar.

3. Keterbatasan Fungsional

Hypertext Markup Language tidak memiliki banyak fungsionalitas tingkat tinggi seperti database dan pengolahan data.

Anda perlu menggunakan bahasa pemrograman server-side seperti PHP, Python, atau Ruby untuk melakukan tugas-tugas ini.

4. Ketergantungan pada Peramban

Meskipun HTML adalah standar terbuka, setiap peramban web memiliki cara unik untuk menafsirkan dan menampilkan halaman Hypertext Markup Language.

Ini dapat menghasilkan perbedaan dalam tampilan halaman web antar peramban.

Komponen HTML

Sebelum melanjutkan ke cara kerjanya, Anda juga perlu mengetahui komponen-komponennya. Secara umum, komponen tersebut terdiri atas tag, elemen, dan atribut.

1. Tag

Pertama adalah tag, komponen ini yang menandakan awalan dan akhiran yang akan dibaca oleh web browser. Tag menggunakan bracket “<” dan “>” dan apabila dituliskan menjadi <…>.

Saat ini terdapat lebih dari 100 elemen HTML standar, tetapi Anda cukup menghafal tag dasarnya berikut ini:

a. <html>

Tag ini digunakan untuk memulai halaman Hypertext Markup Language yang akan menampilkan elemen-elemen dan konten.

b. <head>

Tag <head> digunakan untuk membuat halaman Hypertext Markup Language yang meliputi tampilan deskripsi di hasil pencarian search engine, style dari konten (CSS), dan lainnya.

c. <title>

Tag ini digunakan untuk membuat judul website.

d. <body>

Tag ini digunakan untuk membuat isi website.

e. <h1> hingga <h6>

Digunakan untuk membuat heading pada bagian isi.

f. <p>

Tag ini untuk memulai sebuah paragraf.

g. <!-- ... -->

Dan yang terakhir ini digunakan untuk membuat sebuah komentar, misalnya <!-- ini komentar -->. Komentar tidak ditampilkan di halaman.

2. Element

Element adalah kumpulan dari keseluruhan kode dari tag pembuka sampai dengan tag penutup.

Komponen kedua ini terdiri dari tag pembuka, isi konten, dan tag penutup. Elemen juga dapat bersarang (nested element), yaitu elemen yang berada di dalam elemen lain. Contohnya seperti berikut:

<html>
  <body>
    <h2>Ayam Geprek</h2>
    <p>Ayam geprek adalah makanan yang lezat.</p>
  </body>
</html>

3. Attribute

Komponen ketiga ini adalah attribute. Pada bagian ini berisi informasi atau perintah tambahan yang ada di dalam element. Attribute berfungsi sebagai yang menjelaskan command dari tag pada element.

Berikut ini adalah attribute khusus yang digunakan beberapa tag, yaitu:

a. src

Attribute ini bisa digunakan pada tag <img>, <embed>, <iframe>, dan <audio>.

b. action

Attribute kedua ini dapat digunakan pada tag <form>.

c. href

Attribute ketiga ini dapat digunakan pada tag <a> dan <link>.

d. autoplay

Dan yang terakhir, attribute ini dapat digunakan untuk tag <audio> dan <video>.

Attribute juga diimplementasikan dengan bahasa pemrograman JavaScript yang bisa membuat halaman website Anda dapat melakukan aksi-aksi tertentu.

Cara Kerja HTML

WordPress © Unsplash

Dokumen HTML adalah file yang memiliki format ekstensi .htm atau .html.

Biasanya, sebuah web browser membaca file tersebut dan kemudian melakukan render kontennya sehingga Anda bisa melihatnya melalui web page.

Setiap pages memiliki elemen-elemen yang terdiri dari sekumpulan tags dan atribut. Element adalah building blocks dari web pages.

Sebuah tag yang akan memberi tahu web browser awal dan akhir dari sebuah elemen, sedangkan sebuah atribut akan mendeskripsikan karakteristik dari elemen tersebut.

Terdapat 3 bagian utama dari sebuah elemen adalah:

• Opening tag, bagian ini untuk menjelaskan awalan dari sebuah elemen. Tag ini biasanya menggunakan bracket pembuka dan penutup. Contohnya, saat kita akan membuat paragraf harus dimulai dengan tag <p>
• Content, pada bagian ini adalah bagian bisa Anda lihat di web page
• Dan terakhir pada bagian closing tag ini adalah yang menjelaskan penutupan dari sebuah elemen. Tag yang tertulis di sini mirip seperti pada opening tag namun ditambahkan forward slash, seperti </p>

Kombinasi dari 3 bagian ini akan membentuk element seperti berikut:

<p>Crepes adalah jajanan yang lezat dan bergizi.</p>

Apa Hubungan antara HTML, CSS, dan JavaScript?

Karena untuk membuat tampilan website Anda semakin menarik, HTML memerlukan bantuan dari CSS (Cascading Style Sheets) dan JavaScript untuk membuat konten website yang lebih menarik dan responsif.

Dalam hal ini CSS berperan untuk memberikan styling, seperti background, color, layout, spacing, dan animasi.

Sementara itu, JavaScript berperan untuk menambahkan fungsionalitas dinamis, seperti sliders, pop-up, dan galeri foto.

Ketiga bahasa ini adalah teknologi dasar yang penting bagi seorang front-end developer.

Nah, demikian penjelasan tentang bahasa markup HTML. Apakah Anda tertarik untuk mempelajarinya?

Sebagai fondasi web modern, HTML memainkan peran penting dalam membangun tampilan dan struktur halaman website.

Selain struktur yang rapi, desain juga sangat memengaruhi kesan pertama pengunjung. Apabila sebuah situs memiliki desain yang buruk dan sulit digunakan, pengguna akan cenderung berhenti berinteraksi dan enggan kembali.

Jadi, pastikan Anda menciptakan desain website yang menarik, mudah digunakan, dan interaktif. Konsultasikan kebutuhan Anda bersama Sitespirit.