Apa Itu HTML? Fungsi dan Cara Kerja HTML

Apa itu HTML? 

HTML adalah bahasa markup untuk membuat halaman web. Kepanjangan dari HTML adalah Hypertext Markup Language. Artinya, HTML menggunakan simbol tertentu (tag) yang nantinya akan diterjemahkan oleh browser ke halaman web.

html adalah hypertext markup languange untuk membangun struktur website

Dengan menggunakan tag-tag HTML, Anda dapat membangun struktur halaman, menambahkan konten seperti teks dan gambar, serta memberikan format dan tata letak pada website.

HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file. Untuk membuat file HTML, harus mengikuti standar atau format khusus. Format ini tertuang dalam standar kode internasional atau ASCII (American Standard Code for Information Interchange). 

Sejarah HTML

Sejarah HTML pertama kali dikembangkan oleh Tim Berners-Lee, ilmuwan dari organisasi European Organization for Nuclear Research (CERN) pada tahun 1990. Awalnya, markup language diciptakan oleh IBM, perusahaan hardware dan software asal Amerika Serikat. 

Sumber: Wikipedia

Sejak tahun 1991, Tim Berners-Lee, yang juga penemu world wide web (WWW), mengembangkan HTML sebagai solusi untuk memudahkan para ilmuwan CERN dalam mengakses dokumen satu sama lain. 

Barulah di tahun 1993, bahasa markup ini meluncur resmi ke publik dan berkembang menjadi berbagai versi hingga saat ini.

Sampai saat ini HTML5 menjadi versi yang paling update dengan sistem yang paling canggih. Popularitas HTML versi terbaru ini pun sangat pesat. Bahkan, saat ini ada 87,4 persen website yang sudah menggunakan HTML5. 

Sejarah penggunaan HTML secara umum ini pun tak bisa lepas dari peran World Wide Web (WWW). WWW dan HTML adalah dua aspek yang saling berhubungan. Karena, HTML adalah dasar untuk membuat halaman website, yang nantinya ditampilkan pada WWW.

Fungsi HTML

Fungsi HTML adalah untuk mengatur tampilan halaman web. Terutama menyusun teks seperti paragraf dan heading, hingga menambahkan link dan gambar. Berikut adalah beberapa fungsi HTML lainnya: 

1. Membuat Struktur Halaman Web

Fungsi utama HTML adalah untuk membangun struktur halaman web. Mulai dari membuat header, footer, navigasi, hingga kontennya.

Peran HTML juga sebagai pondasi halaman web. Sebab, untuk menerapkan beberapa bahasa pemrograman maupun bahasa lainnya seperti CSS dan JavaScript, website membutuhkan struktur yang dibangun dari HTML.

Jadi, tak berlebihan juga jika HTML dikatakan sebagai dasar untuk memahami bahasa pemrograman.

2. Menambahkan Konten Website

Selain membuat struktur, Anda juga bisa memasukkan gambar di HTML dan menambah konten pada halaman web. Sebab, bahasa markup ini memungkinkan Anda menyisipkan ilustrasi dan video, membuat tabel HTML, dan memasukkan media lainnya.

Misalnya, dengan menggunakan tag <p> untuk menambah paragraf, tag <img> untuk memasukkan gambar.

3. Mengatur Format dan Tata Letak

Berikutnya, HTML memungkinkan Anda mengatur format dan mengatur tata letak konten dalam halaman web. Seperti memilih ukuran dan jenis huruf, menentukan warna huruf dengan berbagai kode warna HTML, serta mengatur tata letak konten pada website.

Semisal untuk menandai kalimat cetak tebal, gunakan kode HTML <bold>. Sedangkan untuk memiringkan tulisan, gunakan tag <italic>. 

Dengan kode HTML yang tepat, Anda dapat membuat tampilan konten menarik serta mudah dibaca. 

4. Mengarahkan Pengguna ke Halaman Website Lain

HTML juga berfungsi mengarahkan pengguna ke halaman atau website lain menggunakan link tertentu. Link ini bisa disematkan ke dalam teks tertentu, alias sebagai anchor text.

Cara membuat hyperlink dengan kode HTML yaitu menggunakan tag <a>. Misalnya:

Dengan hyperlink, pengunjung bisa dengan mudah mendapatkan informasi yang saling berhubungan dengan halaman yang sedang dibaca. Anda juga bisa mengarahkan mereka ke landing page tertentu..  

Mengenal Komponen HTML

Setelah mengetahui bagaimana sejarah dan fungsi HTML, sekarang Anda perlu tahu komponen yang terdapat pada bahasa markup ini. 

Secara umum komponen HTML terdiri dari Tag, Elemen, dan Atribut. 

Lebih detailnya, simak penjelasannya berikut ini: 

1.Tag

Tag adalah tanda awalan dan akhiran dalam perintah HTML yang akan dibaca oleh web browser. Tag dibuat dengan menggunakan kurung siku <…>, di mana di dalamnya berisi nama tag.  

Setiap tag memiliki fungsi perintah yang berbeda-beda. Mulai dari membuat judul, paragraf, heading, cetak tebal, miring, italic, dan lainnya.  

Misalnya: <bold>. Tag tersebut akan meminta browser untuk menampilkan teks dengan format tebal. 

Selain itu, tag ditulis secara berpasangan, yaitu tag pembuka dan tag penutup. Pada tag penutup ditambahkan garis miring (/) di depan nama tag. 

Tag HTML sendiri awalnya hanya berjumlah 18. Hingga saat ini sudah ada lebih dari 250 tag. Banyak juga, ya. Namun, Anda tak perlu menghafal semua tag yang ada.

Anda hanya perlu mengingat beberapa contoh HTML untuk pemula berikut ini: 

• <html>, untuk memulai membuat halaman HTML yang mencakup semua konten dan elemen. 

• <head>, untuk membuat halaman HTML yang mencakup tampilan deskripsi di hasil pencarian Google, style konten (CSS), dan lainnya.  

• <title>, untuk membuat judul website

• <body>, untuk membuat isi website

• <h1> <h2> sampai <h6> , untuk mengatur heading konten

• <p> , untuk membuat paragraf

2. Elemen 

Elemen merupakan komponen HTML yang berupa keseluruhan kode dari tag pembuka hingga tag penutup. Elemen terdiri dari teks dan simbol yang berupa tag pembuka, isi tag atau konten, dan tag penutup. 

Contohnya: <bold>Belajar HTML</bold> 

Pada sebuah elemen juga bisa berisi elemen lainnya. Jadi elemen tersebut tak hanya berisi satu tag saja, tetapi banyak tag. Elemen itu disebut nested elements. Sebagai contoh, simak kode berikut: 

<html>

<body> 

<h2>Judul Heading</h2>

<p>Paragraf pertama artikel.</p> 

</body> 

</html>

pembuka <html> lalu tag <body> yang berisi elemen tag heading dan elemen tag paragraf.

3.Atribut

Atribut adalah informasi atau perintah tambahan yang berada dalam elemen. Atribut ini berfungsi sebagai penjelas perintah tag pada elemen. 

Misalnya, <img src=”gambar.jpg” alt “Bunga Matahari.”>. 

Tag <img> memiliki atribut khusus yaitu (scr) dan (alt) yang artinya browser harus menampilkan gambar.jpg dengan alt text “Bunga Matahari”. 

Dari contoh di atas, dapat diketahui juga kalau jumlah atribut dalam sebuah tag bisa lebih dari satu. Meski demikian, tidak semua atribut bisa digunakan dalam sebuah tag. Berikut ini jenis atribut khusus beberapa tag: 

Selain atribut khusus, ada beberapa atribut yang digunakan untuk menentukan aksi pada dilakukan jika terjadi sesuatu pada elemen.

Misalnya , (onload) saat loading selesai, (onoffline) saat tiba-tiba offline, (onresize) ukuran jendela. Atribut tersebut disebut dengan atribut event. 

Atribut tersebut nantinya akan diimplementasikan dengan JavaScript. Sehingga halaman website dapat melakukan aksi tertentu

Bagaimana Cara kerja HTML? 

Sederhananya, cara kerja HTML yaitu bahasa markup ini menyusun halaman website dengan tag-tag tertentu. Setiap tag punya fungsinya sendiri, sehingga Anda bisa membuat struktur dan tampilan konten yang dibutuhkan. Nantinya, browser akan menerjemahkan tag ini untuk ditampilkan pada website.

Lebih teknisnya, seperti ini. Pertama, Anda membuat file HTML dengan aplikasi editor HTML. Lalu, Anda menyimpannya dengan format .html atau .htm.

Dokumen HTML yang dibuat bisa saja lebih dari satu. Sebab dalam sebuah website, biasanya terdiri dari banyak halaman. Misalnya aja, halaman utama, kontak, blog, dan lainnya.

Nah, masing-masing dokumen, berisi elemen HTML yang akan menyusun bagian heading, paragraf, isi konten, dan lainnya.

Sumber: Pixabay

Ekstensi file ini dapat dibuka dengan menggunakan web browser seperti Google Chrome, Safari, atau Mozilla Firefox.

Sumber: Unsplash

Kemudian, agar file HTML dapat diakses oleh banyak orang lewat internet, Anda perlu mengonlinekannya. Untuk melakukan ini, Anda perlu menyewa layanan hosting dan mengupload file website Anda di sana.

Jika sudah upload file HTML, selanjutnya browser akan membaca dan me-render file HTML menjadi tampilan halaman website. Sehingga ketika orang mengakses website lewat internet, mereka dapat mudah membaca informasi yang ditampilkan.

Kelebihan dan Kekurangan HTML

Sama seperti hal teknis lainnya dalam dunia web, bahasa markup ini juga punya kelebihan dan kekurangannya.

Berikut kelebihan HTML:

•Digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.

•Dijalankan secara alami di setiap web browser.  

•Mudah dipelajari.

•Open-source dan sepenuhnya gratis.

Rapi dan konsisten.

•Menjadi standar resmi web, dikelola oleh (W3C).

•Integrasi mudah dengan bahasa backend, seperti PHP dan Node.js.

Kemudian, kekurangan HTML adalah:

•Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.

•Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.

•Fitur baru tidak bisa digunakan dengan cepat di sebagian browser.

•Perilaku browser terkadang sulit diprediksi. Misalnya, browser lama tidak selalu bisa merender tag yang lebih baru.

Hubungan HTML, CSS, dan JavaScript

Meskipun dinyatakan sebagai bahasa markup yang canggih dan mudah, HTML tidak sepenuhnya bisa membuat website yang profesional dan responsif. Bahasa ini hanya bisa digunakan untuk menambah elemen dan membuat struktur konten.

Namun di satu sisi, bahasa ini bisa bekerja secara maksimal dengan dua bahasa frontend: CSS (Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman user dan memberikan fungsi yang lebih canggih.

•CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing, dan animiasi.

•JavaScript memungkinkan Anda menambahkan fungsionalitas yang dinamis, seperti slider, pop-up, dan galeri foto.

Jika digambarkan, berikut perbedaan HTML dan CSS dan JavaScript: HTML adalah orang yang tidak mengenakan busana apa pun, kemudian CSS adalah bajunya, kemudian JavaScript adalah aktivitas dan sikap orang tersebut.

Jadi, Pengertian HTML adalah…

Pengertian HTML adalah bahasa markup yang berfungsi untuk membuat struktur website sehingga dapat diakses secara umum melalui browser.  

Meski awalnya Tim Berners-Lee mengembangkan bahasa markup ini hanya untuk kalangan ilmuwan CERN, versi HTML sudah jauh berkembang. Berkat perkembangannya, HTML terus melahirkan berbagai fitur yang dibutuhkan website. Misalnya, versi terbarunya, HTML5.

Tidak sesulit bahasa pemrograman, siapapun bisa belajar HTML dengan mudah. Kuncinya adalah memahami komponen dasar HTML, cara kerjanya, dan lebih bagus lagi kalau praktik langsung meng-online’kan file HTML Anda ke website.