Mengenal HTML dari Sejarah, Fungsi Sampai Cara Kerjanya

HTML sebuah istilah penting dan harus dipelajari terutama bagi kalian yang ingin mengembangkan karir di dunia web. Bukan hanya itu saja, para blogger serta content creator bisa juga mempelajarinya.

Baca juga : Value Proposition: Fungsi dan 8 Elemen Penting!

Istilah ini merupakan singkatan dari Hypertext Markup Language. Di mana fungsinya adalah membuat struktur halaman website untuk mengatur format teks dan gambar. Tetapi perlu digaris bawahi bukan merupakan bahasa pemrograman. 

Berikut Ini Pengertian Mengenai HTML

Hypertext Markup Language adalah bahasa yang digunakan dalam membuat bagian sebuah situs. Istilah ini digunakan dalam menentukan struktur dan konten, termasuk teks, gambar, video, hingga berbagai elemen lainnya.

Biasanya menggunakan “tag” sebagai menandai setiap elemen. Tag tersebut dibuat dengan menggunakan karakter khusus seperti “<” dan “>“. Nantinya akan dikelompokkan sesuai konten berdasarkan elemen tertentu.

Dengan begini bisa memberikan informasi kepada browser tentang bagaimana konten harus ditampilkan pada pada sebuah situs. Contoh tag sebagai bagian dari sebuah perintah, dapat dilihat seperti ini.

<p> menandai paragraf

<img> sebagai tanda menampilkan gambar

<a> membuat hyperlink

<h1> hingga <h6> menandai judul atau heading

<div> mengelompokkan elemen dan membuat layout halaman

Selain tag, juga terdapat atribut HTML yang memberikan informasi tambahan tentang suatu elemen. Atribut itu biasanya ditulis sehingga memberikan pengertian mengenai sesuatu seperti warna, ukuran, atau tautan URL.

Dunia digital saat ini, pengetahuan dasar tentang Hypertext Markup Language menjadi keterampilan yang sangat dibutuhkan, karena hampir semua situs web di internet menggunakannya sebagai dasar pembuatan bagian di website.

HTML terdiri dari kombinasi text dan symbol, disimpan dalam sebuah file. Untuk membuatnya, harus sesuai standar yang tertuang dalam International Code Standard atau ASCII (American Standard Code for Information Interchange).

Sejarah di Balik Teknologi Ini

Lihat bagaimana sejarah Hypertext Markup Language ini berasal, di mana pertama kali dikembangkan pada tahun 1990 oleh Tim Berners-Lee, seorang ilmuwan di European Organization for Nuclear Research (CERN). 

Bahasa markup awalnya dikembangkan oleh perusahaan perangkat keras dan lunak Amerika IBM. Sejak tahun 1991, Tim Berners-Lee, juga penemu World Wide Web (WWW), telah mengembangkannya, sebagai solusi memudahkan ilmuwan CERN.

Pada waktu itu mereka memanfaatkannya untuk mengakses dokumen satu sama lain. Bahasa markup ini tidak secara resmi disajikan kepada publik hingga tahun 1993, dan beberapa versi berbeda telah dikembangkan.

Sejauh ini, HTML5 merupakan versi terbaru dengan sistem tercanggih. Popularitas HTML versi terbaru juga sangat cepat. Faktanya, 87,4 persen website sudah menggunakan produk tersebut karena hasilnya sangat terasa.

Sejarah penggunaan umumnya tidak dapat dibedakan dari peran World Wide Web (WWW). Keduanya merupakan dua aspek saling terkait satu sama lain. Karena merupakan dasar pembuatan website yang tampil di WWW. 

Fungsi dari Hypertext Markup Language

Setelah mengetahui beberapa sejarah dan pengertiannya secara singkat. Sekarang saatnya kita mempelajari mengenai Fungsi utama HTML seperti apa. Diantaranya, membangun struktur dari membuat header, footer hingga navigasi dan konten.

Perannya sendiri juga menjadi dasar sebuah website, karena untuk mengimplementasikan beberapa bahasa pemrograman dan bahasa lain seperti CSS dan JavaScript, website memerlukan struktur yang dibangun dari teknologi ini.

Jadi tidak berlebihan jika dikatakan bahwa hypertext markup languages adalah dasar untuk memahami bahasa pemrograman. Bukan hanya itu saja, masih ada beberapa fungsi lain yang perlu dipelajari seperti:

• Membuat Hyperlink

Hyperlink sangat penting bagi semua pembuatan konten, agar bisa membuatnya diperlukan HTML. Dengan begini tautan tersebut dapat menghubungkan halaman web dengan situs lain, atau halaman lain di website tersebut.

Biasanya ditampilkan sebagai teks atau gambar yang dapat diklik oleh pengguna menuju ke bagian lain dari halaman yang dihubungkan. Nantinya dibuat menggunakan tag “a” (anchor) dan atribut “href” (hypertext reference). 

Contohnya adalah sebagai berikut:

htmlCopy code

<a href=”https://www.google.com/”>Klik di sini untuk menuju ke Google</a> 

Pada contoh di atas, “a” adalah tag digunakan dalam membuat hyperlink, dan “href” adalah atribut yang digunakan untuk menentukan alamat URL yang dituju ketika tautan tersebut di klik.

Teks “Klik di sini untuk menuju ke Google” akan ditampilkan sebagai tautan yang dapat di tekan. Kemudian kalian akan langsung masuk masuk ke Google, tanpa perlu keluar terlebih dulu.

• Aksesibilitasnya Menjadi Mudah

Fungsi HTML adalah mempermudah aksesibilitas. Dalam hal ini, memiliki beberapa tag khusus yang dapat digunakan membuat sebuah situs lebih aksesibel bagi pengguna dengan kebutuhan khusus, misalnya, tag <alt>.

Pada elemen gambar dapat digunakan untuk memberikan deskripsi teks alternative, nantinya akan ditampilkan. Jika tidak dapat ditampilkan atau pengguna menggunakan pembaca layar. Tag <title> pada elemen <head> bisa memberikan informasi.

Terutama tentang konten di sebuah halaman web kepada pengguna yang menggunakan pembaca layar. Selain itu, tag tersebut juga dapat digunakan memberikan informasi tentang struktur keseluruhan. 

Sebagai contoh, tag <h1> hingga <h6> untuk heading atau judul halaman, yang dapat membantu pengguna untuk memahami struktur halaman secara lebih mudah. Dengan begini kalian dapat membantu meningkatkan pengalaman pengguna.

Apalagi, bagi pengguna dengan kebutuhan khusus seperti tunanetra, penyandang disabilitas fisik, dan lain sebagainya. Sehingga, pengguna tersebut dapat mengakses dan memahami konten dengan lebih mudah dan nyaman.

• Mampu Meningkatkan SEO

Fungsi lain dari hypertext markup languages adalah mampu meningkatkan SEO (Search Engine Optimization). Semua itu dapat dicapai dengan menggunakan tag-tag yang berkaitan dengan informasi seperti judul, deskripsi, dan kata kunci.

Tag <title> digunakan menentukan judul nantinya akan muncul di bagian atas jendela browser ketika diakses. Judul juga menjadi faktor penting dalam SEO karena mesin pencari seperti Google akan menggunakannya.

Sebagai penentu mengenai relevansi hingga sebuah kualitas dari situs tersebut. Ada lagi, tag <meta> digunakan menyediakan informasi tambahan tentang seluruh konten, seperti deskripsi hingga kata kunci. 

Deskripsi akan ditampilkan pada hasil pencarian mesin pencari dan membantu pengguna dalam memahami isi artikel sebelum mengunjunginya. Kata kunci atau keyword adalah kata-kata yang dianggap relevan dengan konten.

Hal ini membantu mesin pencari untuk menemukan topik atau isi dengan lebih mudah. Selain itu, ada lagi penggunaan heading tag seperti <h1>, <h2>, dan seterusnya dapat memberikan struktur yang jelas.

Begini Cara Kerjanya Pada Website

HTML bekerja dengan cara menggabungkan berbagai macam tag-tag dengan konten di sebuah situs kemudian akan ditampilkan pada browser. Berikut adalah beberapa langkah dalam cara kerja hypertext markup languages.

1. Browser membaca tag-tag ini yang terdapat pada file.
2. Setiap satu perintah memiliki fungsinya sendiri-sendiri, dan browser akan mengolahnya sesuai dengan perannya.
3. Browser akan menghasilkan tampilan website yang diinginkan dan seluruh konten yang terdapat pada situs.
4. Saat pengguna melakukan interaksi di website, seperti mengklik tautan atau mengisi formulir, browser akan mengolah informasi tersebut dan mengirimkan permintaan ke server.
5. Server akan merespon permintaan tersebut kemudian memberikan response yang sesuai, seperti menampilkan halaman web yang diminta atau mengirimkan data.
6. Browser akan menampilkan hasil dari response server.
7. Jangan lupa sambungkan dengan internet melalui hosting, agar para pengguna bisa mengakses apa saja, serta membukanya dengan mudah.

Dalam keseluruhan, hypertext markup languages memungkinkan pembuat situs dapat menggabungkan teks, gambar, tautan, dan elemen lainnya menjadi satu kesatuan yang bisa ditampilkan pada browser, sehingga kalian mampu berinteraksi.

Kelebihan dan Kekurangan yang Bisa Dilihat

Setelah mengetahui berbagai seluk-beluk dari hypertext markup languages, sekarang saatnya melihat bagaimana kelebihan dan kekurangannya. Hal ini penting, sebagai sebuah ilmu sehingga bisa menjadi sebuah pedoman.

• Kelebihan dari Hypertext Markup Languages

Untuk mengetahui lebih detail lagi bagaimana cara kerja dari hypertext markup languages, artikel ini telah menyiapkan apa kelebihan dari sebuah hypertext markup languages. Berikut kelebihannya:

• Tersebar luas dengan banyak sumber dan komunitas besar.
• Tentu saja ini berfungsi di setiap browser.
• Mudah untuk dipelajari, karena hanya butuh waktu setidaknya 30 menit.
• Sumber terbuka dan sepenuhnya gratis.
• Rapi dan konsisten. 

• Kelemahan dari Hypertext Markup Languages

Jika sebelumnya sudah dijelaskan apa kelebihannya, ada baiknya dibaca juga kelemahan dari  hypertext markup languages, sebagai berikut:

• Biasanya digunakan untuk halaman web statis. Untuk fungsi dinamis, Anda dapat menggunakan JavaScript atau bahasa back-end seperti PHP.
• Logika tidak dapat diterapkan. Oleh karena itu, semua halaman web harus dibangun secara terpisah meskipun menggunakan elemen yang sama seperti header dan footer.
• Fitur baru tidak bekerja dengan cepat di beberapa browser.
• Perilaku browser terkadang sulit diprediksi. Misalnya, browser lama tidak selalu dapat menampilkan tag baru. 

Baca juga : Apa Itu Paypal, Fungsi, Manfaat, Cara Kerja, dan Kelebihannya

Membuat sebuah website sebenarnya sangat mudah, karena rumusnya jelas. Hanya saja, penggunaan HTML dengan berbagai elemen membuat kalian terkadang merasa bingung, maka pelajari lebih dalam lagi.