Pelayananpublik.id- Dalam dunia internet, Anda pasti sering mendengar istilah HTML. HTML ini berhubungan dengan website biasanya.
Lalu apakah HTML itu dan bagaimana cara kerjanya?
Hypertext Markup Language (HTML) adalah alat yang memungkinkan memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.
HTML ini bukan salahsatu bahasa pemrograman tapi bahasa mark up, jadi tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Tapi HTML memungkinkan user untuk mengorganisir dan memformat dokumen, sama seperti Microsoft Word.
Kesimpulannya, pengertian HTML sebagai bahasa mark up sangatlah mudah untuk dipahami bahkan bagi webmaster pemula di bidang web development sekalipun.
Sejarah HTML
Sebelum melanjutkan pembahasan, kita perlu melongok sejarah bagaimana HTML itu ditemukan dan dibuat.
HTML sendiri dibuat oleh Tim Berners-Lee, yang merupakan seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Tim saat itu mempunyai ide tentang sistem hypertext yang berbasis internet.
Hypertext yang dimaksud merujuk pada teks yang memuat referensi (link) ke teks lain yang bisa diakses langsung oleh viewer.
Pada 1991 Tim merilis versi pertama HTML yang di dalamnya terdiri atas 18 HTML tag. Sejak saat itu, setiap kali bahasa HTML merilis versi teranyarnya, selalu ada tag dan attribute (tag modifier) terbaru.
Berdasarkan HTML Element Reference milik Mozilla Developer Network, sekarang ada 140 HTL tag meskipun sebagiannya sudah usang atau tidak didukung oleh versi terbaru browser.
Karena popularitasnya yang kian meningkat, HTML kini dianggap sebagai web standard yang resmi. Spesifikasi HTML di-maintain dan dikembangkan oleh World Wide Web Consortiumm (W3C).
Kemudian upgrade HTML besar-besaran baru terjadi di tahun 2014. Hasilnya, pengenalan HTML5 yang memiliki semantic baru yang memberitahukan arti dari kontennya sendiri, seperti <artcile>, <header>, dan <footer>.
Cara Kerja HTML Dalam Sebuah Website
Bagi yang belum mengerti, Anda tentu penasaran bagaimana HTML bekerja di sebuah website. Semua file HTML adalah file yang berbentuk .html atau .htm.
Ekstensi file ini bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan me-render kontennya sehingga user internet bisa melihat dan membacanya.
Nah, biasanya situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Seperti misalnya, halaman beranda utama, halaman ‘tentang kami’, halaman kontak yang semuanya memiliki dokumen HTML terpisah.
Masing-masing halaman HTML terdiri atas seperangkat tags (bisa disebut juga elements), yang mengacu pada building block halaman website.
Tag tersebut membuat hirarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.
Sebagian besar element HTML memiliki tag pembuka dan penutup yang menggunakan syntax <tag></tag>.
Dalam laman website, ketika Anda menulis sebuah tulisan akan ada dua pilihan tampilan yakni tampilan teks dan HTML. Dalam tampilan teks, Anda akan bisa melihat bentuk tulisan Anda berikut dengan gambar atau video yang akan ada tampilkan. Termasuk bentuk tulisan seperti misalnya bold, italic dan sebagainya seperti sedang menulis di MS Word.
Tapi dalam mode HTML, Anda akan hanya kode-kode baik untuk paragraf baru, bentuk tulisan, foto hingga video.
Simak contoh kode HTML berikut ini
<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src=”/” alt=”Image”>
<p>Paragraph two with a <a href=”https://example.com”>hyperlink</a></p>
</div>
Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa Anda gunakan untuk mark up bagian konten yang lebih besar.
Susunan HTML di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2), dua paragraf (<p></p>), dan satu gambar (<img>).
Sedangkan paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang terdiri atas URL tujuan.
Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk deskripsi gambar.
Unsur HTML
– Elemen block-level, semua space yang tersedia dan selalu membuat line baru di dalam dokumen. Contoh dari tag block adalah heading dan paragraf.
– Elemen inline, memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level. Contoh dari tag inline adalah link dan emphasized strings.
Tag Block-Level, tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah <html>, <head>, dan <body>.
Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap halaman HTML. Sedangkan tag <head></head> menyimpan informasi meta, seperti judul dan charset halaman. Sedangkan tag <body></body> melampirkan semua konten yang muncul pada suatu halaman.
<html>
<head>
<!– META INFORMATION –>
</head>
<body>
<!– PAGE CONTENT –>
</body>
</html>
Heading memiliki 6 level di HTML. Level tersebut bervariasi, mulai dari <h1></h1> sampai ke <h6></h6>, di mana h1 merupakan level heading tertinggi dan h6 adalah level terendah. Paragraf dibuka dan ditutup dengan tag <p></p>, sedangkan blockquote menggunakan tag <blockquote></blockquote>.
Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas beberapa paragraf, gambar, kadang-kadang blockquote, dan elemen lebih kecil lainnya. Kita bisa membuat mark up dengan menggunakan tag <div></div>. Di dalam elemen div juga terdapat tag div lainnya.
Anda juga bisa menggunakan tag <ol></ol> untuk list yang berurutan dan <ul></ul> untuk list yang tidak berurutan. Masing-masing list item harus dibuka dan ditutup dengan tag <li></li>. Sebagai contoh, di bawah ini adalah tampilan dasar dari list tidak berurutan dalam HTML:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
– Tag Inline, digunakan untuk memformat teks. Sebagai contoh, tag <strong></strong> akan render elemen ke format bold, sedangkan tag <em></em> akan ditampilkan dalam format italic.
– Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan attribute href untuk mengindikasi tujuan link:
<a href=”https://example.com/”>Click me!</a>
Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu gambar dengan menggunakan <img> tanpa harus membubuhkan tag penutup. Hanya saja, Anda disarankan menggunakan attribute src untuk menentukan path gambar, misalnya:
<img src=”/images/example.jpg” alt=”Example image”>
Kelebihan dan Kekurangan HTML
HTML memiliki beberapa kelebihan yakni bahasa yang digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar, dijalankan secara alami di setiap web browser. Selain itu HTML juga memiliki learning curve yang mudah.
HTML juga merupakan open-source dan sepenuhnya gratis,Bahasa markup yang rapi dan konsisten, Standard web yang resmi di-maintain oleh World Wide Web Consortium (W3C).
Dan ternasuk mudah diintegrasikan dengan bahasa backend, seperti PHP dan Node.js.
Adapun kekurangan HTML adalah kurang cocok digunakan untuk halaman yang dinamis.
HTML tidak memungkinkan user untuk menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.
Kemudian fitur baru tidak bisa digunakan secara cepat di sebagian browser. bahkan terkadang perilaku browser susah diprediksi contohnya browser lama tidak selalu bisa render tag yang lebih baru.
Demikian ulasan mengenai HTML, fungsi dan cara kerjanya di sebuah website. Semoga bermanfaat. (*)