HTML: Tulang Punggung Website Modern

Medan, Langkatoday.com – Di era yang serba digital saat ini, perkembangan teknologi aplikasi berbasis web menjadi sebuah kebutuhan dalam segala lini, baik bisnis, pemerintahan, ataupun layanan/organisasi sosial non profit yang terhubung satu sama lain.

Web atau yang sering dikenal sebagai website telah menjadi representasi dari banyak entitas yang menggunakannya.

Website dikembangkan atas ribuan kode untuk mengakomodasi konten-kontennya. Pengembangan website juga dilakukan sesuai tujuan penggunaannya.

Ada website yang hanya berisi landing page satu halaman untuk portofolio, atau website yang bisa melakukan pengolahan data dengan fungsi CRUD (Create, Read, Update, dan Delete), hingga website yang bahkan memiliki fungsi kompleks dengan banyak level pengguna.

Salah satu komponen dasar yang paling penting untuk menyangga seluruh website-website yang telah dikembangkan adalah penggunaan HTML (Hypertext Markup Language).

HTML adalah fondasi dasar dari sebuah website, tanpa HTML, maka browser tidak akan bisa menampilkan konten dari website yang telah dibuat. Sebab HTML lah yang menjadi bahasa markup yang kumpulan kodenya bisa dipahami oleh komputer.

Keterampilan HTML adalah salah satu skill dasar yang harus dipelajari oleh para developer web untuk membuat web yang interaktif dan dinamis.

Masih banyak yang salah kaprah karena menganggap HTML adalah bahasa pemrograman padahal HTML tidak memiliki fungsi logika yang dinamis. HTML lebih terkhusus menjadi bahasa struktur yang mana fungsi HTML hanya terkhusus untuk menyusun struktur dan tata letak dasar konten dari sebuah halaman web.

Ibarat sebuah rumah, HTML sudah menentukan seksi mana yang akan diletakkan pintu, jendela, atap hingga yang menjadi ruangan sesuai fungsi nantinya.

Fungsi, Cara Kerja & Struktur

HTML berperan sebagai struktur utama sebuah website. Navigasi, header, konten, hingga footer halaman. HTML juga bertindak sebagai hyperlink dengan tag <a> yang membuat pengguna bisa berpindah dari satu halaman ke halaman yang lainnya.

Penempatan tata letak konten juga menjadi tugas HTML agar konten pada website seperti teks, video, audio serta gambar dapat dibaca oleh pengguna.

Namun HTML hanya bertindak sebagai penyedia struktur utama website. Untuk membuat halaman web menjadi lebih dinamis dan punya tampilan lebih menarik yang User Friendly harus menggunakan CSS dan Javascript. HTML punya kemampuan untuk berinteraksi dengan keduanya untuk membentuk teknologi inti web modern.

Contoh penggunaan tag HTML untuk membuat struktur sebuah tulisan dapat menggunakan tag <h1> hingga <h6> untuk membuat judul tulisan sesuai ukuran yang ditentukan. Lalu tag <p> yang digunakan untuk membuat suatu paragraf.

Untuk mengkustomisasi suatu tulisan juga bisa digunakan tag <i> atau <b> untuk memiringkan tulisan atau membuat tebal suatu tulisan.

Komponen serta Cakupan

HTML memiliki komponen penyusun dasar seperti tag, element serta attribute. Tag memiliki dua bagian yaitu tag pembuka dan tag penutup, tag memiliki kode yang ditandai dengan kurung siku “<>” dengan tag penutup yang ditambahkan tanda “/”.

Contoh dari tag <b> ….. </b> untuk mempertebal suatu text atau tag <head> ….. </head> yang menandakan itu adalah seksi header pada suatu halaman web.

Element dalam HTML adalah kode-kode yang bisa digunakan untuk tujuan tertentu dalam struktur suatu web.

Misalnya element untuk teks yang bisa menggunakan tag <b> atau <p> untuk membuat suatu paragraf. Elemen <h1> hingga <h6> untuk membuat heading suatu halaman.

Element <a> untuk membuat link yang saling menautkan suatu halaman satu sama lain sehingga bisa saling bernavigasi.

Penggunaan elemen dengan tag <table> untuk membuat tabel serta list/daftar dengan tag <ul> untuk unordered list atau <ol> untuk ordered list.

Pada penggunaan form juga digunakan banyak elemen untuk penginputan data seperti <input> yang attribute-nya bisa dikustomisasi sesuai data yang ingin diinput.

Misalnya <input type=”text”> untuk membuat inputan berupa text, atau <input type=”password”> untuk inputan password login pada suatu halaman.

Attribute atau disebut juga sebagai properti adalah karakteristik yang bisa mewakili dari suatu tag, dimana setiap tag bisa memiliki banyak attribute sekaligus.

Attribute hanya bisa dibuat pada tag pembuka dan memiliki format name=value.

Contoh dari penggunaan atributte antara lain id=”…”, name=”…”, class=”…”, value=”…” hingga penggunaan attribute style=”…” untuk penggunaa css langsung didalam tag html.

HTML Terbaru

Pada 2014 diluncurkan HTML 5 yang memperkenalkan fitur-fitur baru seperti elemen-elemen semantik yang dirancang agar halaman website lebih mudah dikembangkan serta lebih jelas struktur dan tata letaknya sehingga konteksnya lebih mudah dibaca oleh browser sehingga aksesibilitas dan SEOnya lebih meningkat.

Elemen-elemen semantik yang menjadi ciri khas dari susunan struktur HTML 5 antara lain <header> yang merupakan pengantar dari suatu web. Tag <nav> yang berfungsi sebagai navigasi pada halaman. Lalu <section> yang menjadi pengatur agar tiap konten dikelompokkan sesuai dengan bagiannya.

Didalam tag <section> dapat dipakai tag <article> atau <main> yang mana dalam satu halaman hanya dapat digunakan 1 tag <main>. Tag <article> dibuat agar suatu konten mandiri dan tidak bercampur dengan konten lainnya. Ada tag <aside> yang biasanya digunakan untuk membuat informasi terkait lainnya serta digunakan dalam sidebar. Dan ada tag <footer> yang menjadi penutup bagian suatu dokumen.

HTML 5 juga menambahkan dukungan untuk multimedia berupa audio dan video sehingga tidak memerlukan plug in tambahan.

Selain itu, HTML 5 juga sudah mendukung penggunaan tag <canvas> dan dukungan untuk file SVG untuk penggunaan objek visual dan animasi yang lebih interaktif.

Saat pembuatan form inputan pada HTML versi lama, validasi data membutuhkan bantuan javascript. Namun pada HTML 5 telah disediakan fitur pada form inputannya langsung seperti <input type=”email”> sehingga browser akan langsung memvalidasi secara otomatis tanpa perlu tambahan kode.

Fitur dukungan untuk local storage dan session storage juga menjadi salah satu fitur terbaru HTML 5 sehingga bisa menggantikan cookie agar website menjadi lebih efisien.

Hal ini memungkin data tetap tersimpan bahkan jika komputer di restart atau browser ditutup dan cocok untuk penyimpanan jangka panjang.

Jadi HTML 5 adalah versi suksesor bagi HTML generasi sebelumnya dan mengenalkan elemen-elemen baru yang meningkatkan kapabillitas dari HTML yang sebelumnya.