Apa itu HTML? Sejarah, Fungsi, dan Cara Kerja HTML

HTML adalah dasar dari setiap halaman web yang kita lihat di internet. Tanpa HTML, situs web tidak akan memiliki struktur atau tampilan yang rapi. Teknologi ini telah berkembang sejak pertama kali diperkenalkan, memungkinkan halaman web menjadi lebih interaktif dan menarik.

Dari dokumen statis hingga aplikasi web kompleks, semuanya bergantung pada HTML. Lalu, bagaimana sejarah perkembangannya? Apa saja fungsinya dalam membangun sebuah situs? Dan bagaimana cara kerja HTML dalam menyusun elemen-elemen di halaman web? Temukan jawabannya dalam artikel ini!

Apa itu HTML?

HTML adalah markup language yang digunakan untuk menyusun struktur halaman web, termasuk elemen seperti paragraf, judul, dan tautan. Meskipun sekilas mirip dengan bahasa pemrograman, HTML sebenarnya bukan programming language karena tidak memiliki kemampuan untuk membuat fungsi dinamis. 

Secara formal, HTML atau Hypertext Markup Language adalah standard markup language yang digunakan untuk membuat dan mengatur tampilan halaman web serta aplikasi berbasis web. Istilah Hypertext merujuk pada dokumen yang berisi links yang memungkinkan pengguna berpindah ke halaman lain dengan mudah. 

Sejarah HTML

HTML pertama kali diperkenalkan oleh fisikawan Tim Berners-Lee pada akhir tahun 1991 saat ia bekerja di lembaga riset CERN di Swiss. Awalnya, HTML diciptakan untuk mempermudah pengelolaan dokumen dalam lingkungan ilmiah. 

Berners-Lee mengembangkan gagasan tentang sistem hypertext berbasis internet yang memungkinkan dokumen saling terhubung. Versi pertama HTML dirilis pada 1991 dengan hanya 18 tag. Sejak itu, berbagai tag dan atribut baru terus ditambahkan di setiap pembaruan. 

Perkembangan pesat HTML mendorong pembentukan World Wide Web Consortium (W3C), yang bertanggung jawab atas standarisasi dan pembaruan teknologi ini. Pada tahun 1999, HTML4 dirilis dan menjadi standar utama dalam pengembangan web. 

Kemudian, versi terbaru, HTML5, diperkenalkan ke publik pada 2014 dengan banyak fitur tambahan. Salah satu inovasi terbesar dalam HTML5 adalah dukungan bawaan untuk menyematkan audio dan video, sehingga tidak lagi memerlukan plugin eksternal seperti Flash Player. 

HTML5 juga mendukung SVG dan MathML, yang memudahkan penggunaan rumus matematika dan grafik vektor langsung di dalam halaman web. Tidak hanya meningkatkan fitur, HTML5 juga memperkenalkan peningkatan pada semantik. Tag baru seperti <article>, <header>, dan <footer> memberikan struktur yang lebih jelas bagi browser,

HTML5 menjadi versi paling canggih dan modern dari HTML. Pada tahun 2014, W3C memasuki fase pemeliharaan dengan fokus pada peningkatan fitur semantik agar pengembang lebih mudah mengatur kode dan memberi makna pada konten. HTML semakin berkembang dan kini diakui sebagai standar utama dalam dunia pengembangan web.

Cara Kerja HTML

HTML bekerja melalui beberapa langkah utama yang memungkinkan konten yang dibuat ditampilkan sebagai halaman web di web browser.

1. Pertama, Anda membuat dokumen HTML menggunakan text editor sederhana dan menyimpannya dengan ekstensi .html atau .htm. Umumnya, sebuah situs web terdiri dari beberapa halaman HTML terpisah, seperti halaman utama, halaman “Tentang Kami”, dan halaman kontak.
2. Setiap halaman HTML dibangun menggunakan serangkaian tag atau elemen yang menentukan struktur dan isi halaman, termasuk judul, paragraf, serta berbagai blok konten lainnya. Sebagian besar elemen dalam HTML memiliki tag pembuka dan tag penutup, yang mengikuti format <tag></tag>.
3. Untuk melihat dokumen HTML, Anda perlu menggunakan web browser seperti Google Chrome, Safari, atau Mozilla Firefox. Web browser berfungsi membaca dan menafsirkan HTML dengan cara merender konten sesuai dengan instruksi dalam dokumen.
4. Agar halaman bisa diakses oleh orang lain, dokumen HTML harus tersedia secara online. Proses ini dilakukan dengan mengunggah file HTML ke web server melalui layanan web hosting. Ketika seseorang mengetik alamat situs web di browser, server akan mengirimkan file HTML yang kemudian dirender dan ditampilkan oleh browser.

Pengertian Tag HTML dan Fungsinya

Memahami perbedaan antara tag block-level dan tag inline sangat penting dalam mengatur struktur dan tampilan halaman web. Tag block-level membangun kerangka utama, sementara tag inline digunakan untuk memperkaya konten dengan format dan fungsi tambahan.

1. Tag Block-Level

Tag block-level selalu dimulai pada baris baru dan memenuhi seluruh lebar yang tersedia dalam halaman web. Elemen ini berfungsi sebagai blok penyusun utama dalam struktur sebuah dokumen HTML.

Contoh tag block-level meliputi:

• <html></html> – Menjadi elemen utama yang mencakup seluruh isi halaman HTML.
• <head></head> – Berisi informasi meta tentang dokumen, seperti judul halaman dan pengaturan karakter.
• <body></body> – Menampung semua konten yang akan ditampilkan pada halaman web.
• Heading tag (<h1></h1> – <h6></h6>) – Digunakan untuk membuat judul dan subjudul, di mana <h1> merupakan tingkat paling penting, sedangkan <h6> adalah yang paling rendah.
• <p></p> – Digunakan untuk membentuk paragraf dalam dokumen.
• <blockquote></blockquote> – Berfungsi untuk menampilkan kutipan panjang.
• <div></div> – Berperan sebagai wadah umum yang dapat berisi berbagai elemen, termasuk teks, gambar, atau bahkan div lainnya.
• <ol></ol> – Digunakan untuk membuat daftar berurutan (dengan angka).
• <ul></ul> – Digunakan untuk membuat daftar tidak berurutan (dengan simbol bullet).
• <li></li> – Elemen yang digunakan untuk menentukan setiap item dalam daftar.

2. Tag Inline

Berbeda dengan block-level, tag inline hanya menggunakan ruang sesuai kebutuhan kontennya dan tidak dimulai pada baris baru. Elemen ini biasanya digunakan untuk memformat teks atau menambahkan fungsi dalam sebuah paragraf atau elemen lainnya.

Contoh tag inline meliputi:

• <a></a> – Digunakan untuk membuat tautan ke halaman lain atau sumber daya tertentu. Tag ini membutuhkan atribut href untuk menentukan URL tujuan.
• <img> – Berfungsi untuk menyematkan gambar dalam halaman web. Tidak memerlukan closing tag dan menggunakan atribut src untuk menentukan lokasi gambar serta alt sebagai deskripsi alternatif.
• Tag penekanan teks <strong></strong> – Menampilkan teks dalam format bold.
• Tag penekanan teks <em></em> – Menampilkan teks dalam format italic.
• Tag lainnya <b>, <i>, dan <u> yang masing-masing digunakan untuk membuat teks tebal, miring, dan bergaris bawah.

Fungsi HTML

Setiap halaman web yang ada di internet tidak bisa lepas dari peran HTML. Berikut adalah beberapa fungsi utama HTML dalam dunia web development.

1. Berfungsi untuk Membuat Website

HTML adalah bahasa markup standar yang digunakan untuk membuat halaman website dan aplikasi web. Hampir semua situs di internet dibangun menggunakan HTML sebagai fondasi utama. 

Untuk menciptakan sebuah halaman web, HTML biasanya dikombinasikan dengan bahasa pemrograman lain seperti CSS, JavaScript, dan PHP sesuai dengan kebutuhan. Dengan HTML, Anda dapat membuat paragraf, judul, dan tautan yang memungkinkan informasi dapat diakses melalui peramban internet oleh banyak pengguna.

2. Berfungsi sebagai Hyperlink

Salah satu fungsi utama HTML adalah memungkinkan penggunaan hyperlink yang menghubungkan satu halaman web dengan halaman lainnya. Dengan adanya hyperlink, pengunjung dapat berpindah dari satu halaman ke halaman lain dengan mudah. 

3. Sebagai Pondasi Website

HTML berperan sebagai pondasi utama dalam pengembangan halaman website. Teknologi ini menyediakan struktur dasar yang menentukan tata letak dan elemen-elemen dalam sebuah situs. 

Setelah HTML disusun, bahasa lain seperti CSS digunakan untuk mempercantik tampilan, sedangkan JavaScript menambahkan fungsionalitas agar website lebih interaktif. Tanpa HTML, halaman web tidak akan memiliki kerangka dasar yang terstruktur.

4. Berfungsi untuk Menambah Multimedia pada Website

Dengan HTML, berbagai jenis elemen multimedia seperti gambar, video, audio, dan animasi dapat ditampilkan di halaman web. Hal ini membantu penyajian informasi menjadi lebih menarik dan interaktif bagi pengguna. Tanpa HTML, elemen-elemen seperti tabel, gambar, atau video tidak bisa langsung ditampilkan di halaman website. 

5. Sebagai Penanda Teks dan Bagian Website

Sebagai bahasa markup, HTML memungkinkan penggunanya untuk menandai teks dengan format tertentu, seperti menebalkan atau memiringkan kata dengan kode khusus. Selain itu, HTML juga berfungsi untuk menandai berbagai bagian dalam website, seperti navigasi, konten utama, footer, dan header. 

Struktur HTML

Saat membangun halaman web, HTML memiliki struktur dasar yang terdiri dari tiga komponen utama: tag, element, dan attribute. Ketiga bagian ini bekerja bersama untuk menentukan tata letak dan isi sebuah halaman web.

1. Tag

Tag merupakan instruksi dasar dalam HTML yang dibaca oleh peramban untuk menampilkan konten sesuai format yang diinginkan. Setiap tag biasanya ditulis di dalam tanda kurung sudut (<>) dan terdiri dari dua bagian: opening tag (misalnya, <h1>) dan closing tag (misalnya, </h1>). 

Perbedaan keduanya terletak pada tanda garis miring (/) yang hanya ada pada closing tag. Setiap tag juga memiliki fungsi khusus. Misalnya, <h1></h1> digunakan untuk menampilkan judul utama, sedangkan <p></p> berfungsi untuk membuat paragraf. 

Beberapa tag seperti <img> tidak memerlukan closing tag karena hanya berfungsi sebagai pemanggil sumber daya eksternal.

2. Element

Element dalam HTML mencakup seluruh bagian kode yang terdiri dari opening tag, isi, dan closing tag. Misalnya, dalam kode <h1>Belajar HTML</h1>, keseluruhan struktur ini disebut sebagai sebuah element.

Selain menampung teks, element juga bisa berisi element lain di dalamnya, yang disebut sebagai nested element. Contohnya adalah struktur dasar berikut:

<html>

  <body>

    <h1>Belajar HTML Dasar</h1>

    <p>Ini adalah paragraf pertama dalam artikel.</p>

  </body>

</html>

Pada contoh di atas, element <h1> dan <p> berada di dalam element <body>, yang kemudian berada di dalam element <html>. Proses ini membantu menyusun halaman agar lebih terstruktur.

3. Attribute

Attribute berfungsi sebagai penjelas tambahan yang memberikan informasi atau mengontrol perilaku suatu element. Attribute selalu ditempatkan dalam opening tag dan ditulis dalam format name-value pair, di mana nama atribut diikuti dengan tanda sama dengan (=) dan nilainya diletakkan dalam tanda kutip ganda (“”). Sebagai contoh, pada kode berikut:

<img src=”hondavario.jpg” alt=”Motor Matic”>

• src adalah attribute yang menunjukkan sumber gambar.
• alt adalah attribute yang berisi teks alternatif jika gambar gagal dimuat.

Beberapa element memerlukan attribute tertentu agar berfungsi dengan benar. Misalnya, tag <a> membutuhkan attribute href untuk menentukan tautan tujuan, sedangkan tag <form> memerlukan attribute action untuk mengarahkan data yang dikirim pengguna.

Kelebihan dan Kekurangan HTML

Sebagai bahasa standar dalam pembuatan halaman web, HTML memiliki banyak kelebihan yang membuatnya tetap relevan hingga saat ini. Namun, di balik keunggulannya, HTML juga memiliki beberapa keterbatasan yang perlu diperhatikan dalam pengembangan web.

1. Kelebihan HTML

Sebagai bahasa markup yang paling banyak digunakan, HTML menawarkan berbagai keuntungan:

• Kepopuleran HTML membuatnya memiliki banyak sumber belajar serta komunitas yang aktif membantu pengembang dalam memecahkan masalah.
• Halaman web berbasis HTML dapat diakses di berbagai perangkat dan peramban tanpa memerlukan konfigurasi tambahan.
• Bersifat open-source dan gratis. Penggunaan HTML tidak memerlukan biaya lisensi.
• Tertata rapi dan konsisten dalam penulisan kode, memudahkan pengelolaan dan pengembangan web.
• Mudah diintegrasikan dengan bahasa backend seperti PHP dan Node.js untuk membangun fitur yang lebih kompleks.
• Ringan dan cepat karena bersifat statis, sehingga lebih efisien dibandingkan halaman web dinamis,
• Mendukung pembuatan situs web yang responsif dan lintas platform, memastikan tampilan yang optimal di berbagai perangkat.
• Memiliki fungsi utama dalam membentuk struktur web, termasuk pembuatan heading, paragraf, teks tebal, miring, dan tautan. HTML juga memungkinkan penambahan elemen multimedia seperti gambar, audio, dan video.

2. Kekurangan HTML

Meskipun memiliki banyak keunggulan, HTML juga memiliki keterbatasan yang perlu diperhatikan:

• Terbatas pada halaman statis. Untuk fitur dinamis, pengembang harus mengombinasikannya dengan JavaScript atau bahasa backend seperti PHP.
• Tidak dapat menjalankan logika pemrograman. Semua halaman dengan elemen serupa, seperti header dan footer, harus dibuat secara terpisah tanpa otomatisasi.
• Fitur baru tidak selalu langsung didukung oleh semua peramban. Peramban lama mungkin tidak dapat merender tag terbaru yang diperkenalkan dalam versi terbaru HTML.
• Perilaku peramban terkadang tidak konsisten, menyebabkan tampilan halaman yang berbeda di berbagai platform.
• Kurang fleksibel dalam pengembangan web yang kompleks. Sebagai bahasa markup, HTML tidak memiliki kemampuan untuk menangani interaksi pengguna secara dinamis tanpa bantuan bahasa lain.
• Mengelola struktur HTML pada aplikasi web yang sangat kompleks bisa menjadi sulit, terutama karena HTML tidak dapat berinteraksi langsung dengan database.

Perbedaan Antara HTML dan HTML5

Perkembangan HTML dari versi sebelumnya ke HTML5 membawa berbagai perubahan yang meningkatkan fungsionalitas dan fleksibilitas dalam pembuatan halaman web. Berikut adalah beberapa perbedaan utama antara HTML dan HTML5:

• HTML lama tidak memiliki dukungan bawaan untuk audio dan video, membutuhkan Flash Player. HTML5 memperkenalkan elemen <audio> dan <video>, memungkinkan pemutaran langsung di browser tanpa plugin tambahan.
• Versi lama HTML tidak mendukung grafis dan animasi tanpa plugin seperti Flash. HTML5 memperkenalkan elemen <canvas> dan dukungan SVG, memungkinkan manipulasi grafis langsung di browser.
• Formulir di HTML klasik terbatas dan memerlukan JavaScript untuk validasi. HTML5 menambahkan input type baru seperti email dan date, serta atribut required dan placeholder, yang menyederhanakan validasi.
• HTML lama tidak memiliki fitur untuk aplikasi offline. HTML5 menyediakan Application Cache dan Local Storage untuk memungkinkan akses web tanpa koneksi internet.
• HTML lama memiliki dukungan terbatas untuk API. HTML5 memperkenalkan Geolocation API, Drag-and-Drop API, dan Web Storage API, membuat aplikasi web lebih interaktif.
• HTML lama banyak menggunakan <div> untuk tata letak, tanpa makna semantik. HTML5 memperkenalkan elemen <article>, <section>, <aside>, <header>, dan <footer> untuk meningkatkan struktur halaman dan SEO.
• HTML lama lebih lambat karena ketergantungannya pada plugin eksternal. HTML5 lebih cepat dengan dukungan bawaan untuk multimedia dan grafis, mengurangi beban browser.
• HTML lama didukung oleh semua browser, tetapi terbatas dalam fitur modern. HTML5 lebih kompatibel dengan browser modern dan mendukung teknologi terbaru.

Baca Juga : Apa itu Bahasa Pemrograman Python? Manfaat, dan Kelebihannya

Contoh HTML

Dalam HTML, berbagai elemen digunakan untuk membangun struktur halaman web. Berikut beberapa contoh penerapan elemen-elemen HTML yang umum digunakan.

1. HTML Basic

Struktur dasar sebuah dokumen HTML selalu mencakup beberapa elemen utama:

• <!DOCTYPE html> menentukan bahwa dokumen menggunakan HTML5, sehingga browser dapat memahami dan merender halaman dengan benar.
• <html></html> menjadi elemen utama yang mencakup seluruh isi halaman.
• <head></head> berisi informasi meta seperti judul halaman, karakter yang digunakan, dan tautan ke stylesheet. Informasi di dalamnya tidak akan muncul di halaman web.
• <title></title> menentukan judul halaman yang akan terlihat di tab browser.
• <body></body> berisi seluruh konten yang terlihat di halaman web, seperti teks, gambar, tautan, dan elemen lainnya.

Contoh struktur dasar dokumen HTML:

<!DOCTYPE html>

<html>

<head>

  <title>Judul Halaman</title>

  <!– Informasi Meta –>

</head>

<body>

  <!– Konten Halaman –>

  <h1>Judul Utama</h1>

  <p>Ini adalah sebuah paragraf.</p>

</body>

</html>

Setiap dokumen HTML minimal harus memiliki tiga elemen utama, yaitu <html>, <head>, dan <body>, untuk memastikan halaman dapat ditampilkan dengan baik di browser.

2. Images

Untuk menampilkan gambar di halaman web, HTML menggunakan elemen <img>, yang bersifat inline. Elemen ini tidak memerlukan tag penutup, tetapi dalam HTML5, disarankan menggunakan tanda garis miring (<img />) untuk menunjukkan elemen yang berdiri sendiri. Atribut utama dalam elemen <img> adalah:

• src menentukan sumber gambar yang akan ditampilkan.
• alt memberikan teks alternatif jika gambar gagal dimuat, yang juga berguna untuk aksesibilitas.

Contoh penggunaan elemen <img>:

<img src=”/images/example.jpg” alt=”Contoh gambar”>

<img src=”hondavario.jpg” alt=”Motor Matic”>

<img src=”html.jpg” alt=”Gambar HTML” />

Format gambar yang didukung oleh HTML antara lain JPG, PNG, JPEG, dan GIF. Selain itu, ukuran gambar dapat diatur menggunakan atribut width dan height.

3. Font

Secara default, HTML hanya mengatur struktur konten tanpa menentukan tampilan teks. Namun, elemen HTML dapat diberi gaya menggunakan atribut style dengan properti CSS untuk mengubah font dan format teks.

Misalnya, untuk mengubah jenis font pada judul:

<h2 style=”font-family:Georgia;”>Judul dengan font Georgia</h2>

Dulu, HTML memiliki elemen <font> untuk mengatur font, tetapi kini elemen tersebut sudah ditinggalkan dan digantikan oleh CSS. Namun, beberapa elemen HTML seperti <b> dan <i> masih digunakan untuk memformat teks tebal dan miring.

4. Anchor Text

Teks tautan atau anchor text memungkinkan pengguna mengklik teks tertentu untuk berpindah ke halaman lain atau sumber eksternal. Elemen <a> digunakan untuk membuat tautan ini dan bersifat inline.

Atribut utama dari elemen <a> adalah href, yang menentukan URL tujuan tautan. Contoh pembuatan anchor text:

<a href=”https://example.com”>Ini adalah tautan</a>

<a href=”https://www.biznetgio.com/”>Website Biznet Gio</a>

<a href=”link”>Teks ini adalah tautan yang bisa diklik</a>

Teks yang berada di antara tag <a> dan </a> akan menjadi anchor text yang dapat diklik oleh pengguna. Selain itu, anchor text juga berpengaruh pada SEO karena membantu mesin pencari memahami konten halaman yang ditautkan.

Cara Menulis Tag HTML

Menulis tag HTML dengan benar memastikan bahwa halaman web dapat dimuat dan ditampilkan dengan baik di browser. Berikut beberapa panduan utama dalam menulis tag HTML yang sesuai dengan praktik terbaik.

1. Tag Wajib yang Harus Ada

Setiap dokumen HTML yang valid harus memiliki tag dasar yang membentuk struktur utama halaman web. Tag ini memungkinkan browser untuk memahami dan menampilkan konten dengan benar.

• <!DOCTYPE html> – Tag ini harus ditulis di baris pertama dokumen untuk mendeklarasikan bahwa halaman menggunakan standar HTML5. Dengan deklarasi ini, browser dapat menginterpretasikan kode dengan benar.
• <html></html> – Tag ini menjadi elemen utama yang membungkus seluruh konten halaman web. Semua elemen HTML lainnya harus berada di dalamnya.
• <head></head> – Bagian ini berisi metadata, seperti pengaturan karakter, judul halaman, dan tautan ke file CSS. Biasanya, tag <title> ditempatkan di dalamnya.
• <title></title> – Tag ini menentukan nama halaman yang akan muncul di tab browser. Penggunaan judul yang jelas dapat meningkatkan pengalaman pengguna dan SEO.
• <body></body> – Semua elemen yang terlihat di halaman web, seperti teks, gambar, tautan, dan elemen lainnya, harus ditempatkan di dalam tag ini.

2. Gunakan Huruf Kecil

Secara teknis, HTML tidak membedakan antara huruf besar dan kecil dalam penulisan tag. Namun, praktik terbaik menyarankan penggunaan huruf kecil untuk semua tag dan atribut. Mengapa harus menggunakan huruf kecil?

• Membuat kode lebih rapi dan terorganisir.
• Memudahkan pembacaan dan penulisan kode.
• Mengurangi potensi kesalahan penulisan.
• Mempermudah pemeliharaan dan pengelolaan kode.

3. Buat Kode yang Simpel dan Efisien

Menulis kode HTML dengan cara yang sederhana dan efisien dapat meningkatkan performa situs secara keseluruhan. Struktur yang ringan dan terorganisir dapat mempercepat waktu pemuatan halaman dan memudahkan browser dalam merender konten.

Manfaat kode yang lebih sederhana dan efisien:

• Mengurangi ukuran file situs web, sehingga lebih cepat diakses.
• Meningkatkan kecepatan pemuatan halaman, yang penting untuk pengalaman pengguna dan SEO.
• Mempermudah pemeliharaan kode, baik oleh pengembang lain maupun oleh diri sendiri di masa depan.

HTML Memiliki Peran Penting HTML dalam Dunia Web

Dapat disimpulkan bahwa HTML tetap menjadi elemen fundamental dalam dunia pengembangan web. Sebagai bahasa markup standar, HTML memungkinkan setiap halaman web memiliki struktur yang jelas dan terorganisir. 

Dari versi pertama hingga HTML5, teknologi ini terus berkembang untuk mendukung kebutuhan modern. Meskipun memiliki keterbatasan, keunggulan HTML dalam membangun situs web tetap tak tergantikan. Tanpa HTML, internet seperti yang kita kenal hari ini tidak akan ada.

FAQ (Frequently Asked Question)

Baca Juga : Apa itu Javascript? Sejarah, Fungsi, dan Kelebihannya