Basic Programming

Pengertian HTML, Fungsi dan Cara Kerjanya

Jika Anda ingin menjadi web developer andal, Anda wajib banget khatam dengan pengertian HTML. Soalnya, HTML adalah salah satu komponen website yang sangat penting. 

Nah, pas banget, di artikel ini kami akan menjelaskan apa itu HTML, lengkap dengan sejarah, komponen, fungsi, dan cara kerjanya. Harapannya, melalui artikel ini Anda mendapatkan pemahaman yang mendalam mengenai HTML. Sehingga, Anda bisa lebih mudah mempelajarinya. 

Langsung saja, mari kita simak pembahasannya. 

Apa itu HTML?

Hypertext Markup Language atau HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman website. 

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

Dengan adanya HTML, pengguna dapat membuat atau menyusun heading, paragraf, gambar, link, dan lainnya supaya dapat dilihat banyak orang melalui halaman website. 

Untuk bisa diakses secara umum, pengguna perlu membukanya lewat aplikasi browser, seperti Internet Explorer, Chrome, atau Mozilla Firefox. 

Setelah mengetahui pengertian HTML di atas, Anda mungkin penasaran bagaimana sejarah lahirnya HTML hingga saat ini? Untuk itu, mari simak terlebih dulu sejarah HTML berikut. 

Sejarah HTML

Tim Berners-Lee merupakan sosok ilmuwan dibalik lahirnya HTML. Di tahun 1991, ia awalnya menciptakan HTML sebagai solusi untuk memudahkan para ilmuwan dalam mengakses dokumen satu sama lain. 

Selang setahun kemudian, HTML mulai dapat digunakan untuk umum. Sejarah penggunaan HTML secara umum ini pun tak bisa lepas dari peran World Wide Web atau yang kita kenal dengan WWW. Keduanya saling bersinergi supaya informasi yang ingin disebarkan bisa diakses oleh banyak orang. 

Tak disangka, kini HTML telah berevolusi menjadi bahasa markup yang telah digunakan oleh lebih dari 92,3% persen website di dunia. 

Selama perjalanannya, HTML tentu mengalami perkembangan yang cukup pesat. Seperti apa evolusinya? Simak timeline perjalanan HTML berikut: 

Tahun VersiPerkembangan HTML
1991HTML1Memudahkan ilmuwan mengakses dokumen yang ada di berbagai komputer.
1995 HTML2 Mampu menampilkan data dan form yang dapat diedit secara langsung. Versi ini merupakan cikal bakal lahirnya website interaktif.
1997 HTML3 Menambahkan fitur figure untuk mendukung tampilan image.
1998-1999HTML4.0 Menambahkan perintah dasar HTML, yaitu image, tabel, text, link, dan form.
1999-2000HTML4.1Telah dipublikasi secara internasional dan dapat dipakai oleh browser apapun.
2014HTML5 Membuat prosedur tampilan dengan menggabungkan CSS, HTML, dan Javascript. Versi ini menjadi versi terbaik karena telah dilengkapi fitur canggih yang lengkap, seperti embed video dan audio.

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. 

Mengenal Tag HTML, Elemen, dan Atribut

Setelah mengetahui bagaimana sejarah dari HTML, sekarang Anda perlu tahu komponen-komponen yang terdapat pada HTML. 

Secara umum 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. Ada hanya perlu mengingat beberapa tag dasar berikut ini: 

Tag Fungsi Tag
<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 bagian isi website
<h1> <h2> sampai <h6> Untuk membuat bagian heading pada artikel
<p> Untuk membuat paragraf
<!– –> Untuk membuat komentar

Baca juga: 10 Coding HTML Dasar yang Blogger Wajib Tahu

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>

Jika diperhatikan elemen HTML tersebut, dari tag 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: 

Atribut Dapat digunakan pada Tag
src <img>, <embed>, <audio>, <iframe>
href<a>, <link>
action<form>
autoplay<audio>, <video>

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 pemrograman Javascript. Sehingga halaman website dapat melakukan aksi tertentu. 

Baca juga: Cara Membuat Javascript di HTML Sederhana

Bagaimana Cara kerja HTML?

Oke, sekarang mungkin Anda bertanya-tanya bagaimana cara kerja file HTML sehingga dapat ditampilkan di browser. Sekarang mari simak penjelasannya.

Pertama, dokumen HTML Anda buat di aplikasi editor HTML dan 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 komponen HTML yang akan menyusun bagian heading, paragraf, isi konten, dan lainnya. 

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

Kemudian, untuk dapat diakses oleh banyak orang, Anda perlu mengonlinekannya terlebih dulu. Anda perlu menyewa layanan web hosting dan mengupload file website Anda di sana.

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

Baca juga: Cara Upload File HTML ke WordPress

Fungsi HTML yang Wajib Anda Ketahui!

Sebelumnya kami telah sedikit singgung salah satu fungsi HTML. Nah, untuk lebih detailnya, berikut beberapa fungsinya yang wajib Anda ketahui! 

1. Membuat Halaman Website

Fungsi utama dari HTML adalah untuk membuat halaman website. Sehingga Anda dapat berbagi informasi pada banyak orang melalui browser di internet. 

HTML juga mudah untuk diaplikasikan untuk seorang pemula, tak heran, hampir semua website pasti dibuat menggunakan HTML. 

2. Menjadi Pondasi Website

HTML juga berfungsi sebagai pondasi utama pembuatan website. Beberapa bahasa pemrograman akan diaplikasikan pada HTML untuk dapat menampilkan website yang lebih menarik. 

Sebagai contoh, tampilan website dapat lebih berwarna dengan menggunakan CSS. Lalu website menampilkan banyak fitur dengan menggunakan bahasa pemrograman Javascript, PHP, atau lainnya. 

3. Menandai Teks dan Bagian pada Halaman Website

Fungsi lainnya dari HTML ialah menjadi penanda teks dan bagian dari laman website. Semisal untuk menandai kalimat cetak tebal dan miring hanya perlu diberi kode <bold>, <italic>. 

Selain itu, HTML juga berfungsi untuk menandai bagian pada website. Misalnya bagian header, main, footer, dan navigation. Sehingga lebih memudahkan pembuatan website. 

4. Menampilkan Multimedia di Website

Supaya website tidak membosankan, Anda tentu perlu menambahkan gambar, video, tabel, dan media lainnya, bukan? Nah dengan HTML, Anda bisa menampilkan berbagai media sesuai kebutuhan.  

5. Mengarahkan Pengguna ke Halaman Website Lain

Seiring perkembangannya, HTML kini juga berfungsi untuk mengarahkan pengguna ke halaman atau website lain melalui teks tertentu. Fungsi tersebut juga bisa disebut hyperlink.  Misalnya seperti contoh gambar berikut. 

Dengan hyperlink, pengunjung bisa dengan mudah mendapatkan informasi yang saling berhubungan dengan halaman yang dibaca tersebut. 

Jadi, Pengertian HTML adalah…

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

Kita patut berterima kasih pada Tim Berners-Lee yang telah mengembangkan HTML pada tahun 1991. HTML yang awalnya hanya dipakai untuk kebutuhan penelitiannya, kini dapat digunakan semua orang untuk berbagai kebutuhan. 

Berkat perkembangannya, HTML juga telah memiliki banyak fungsi yang canggih. Misalnya, membuat website dengan multimedia, diaplikasikan dengan bahasa pemrograman lain, dan mampu menavigasi halaman website dengan hyperlink. 

Pun HTML ternyata tidak terlalu sulit jika dipelajari seorang pemula. Anda hanya perlu memahami komponen dasar HTML, yaitu elemen, tag, dan atribut. Di mana, elemen merupakan keseluruhan teks pada HTML yang berita penanda perintah atau tag, serta penjelas perintah tag atau atribut

Oke, sekarang Anda sudah mengetahui pengertian HTML, bukan? Next, Anda bisa mulai memperdalam belajar HTML berikut →  Belajar HTML Lengkap untuk Pemula

Jangan lupa juga untuk pelajari bahasa pemrograman lainnya, seperti CSS, Javascript, PHP, dan lainnya untuk menjadi web developer. Sebagai panduan, cobalah ikuti cara belajar pemrograman berikut → Cara Belajar Pemrograman Terlengkap dan Terbaru.

Putri Aprilia

Putri is an SEO Content Writer at Niagahoster. She has experience in SEO writing with business and tech topic.

Share
Published by
Putri Aprilia

Recent Posts

10 Website Buat CV Online Gratis, Bikin HR Jatuh Hati! [Bonus Tips]

Sudah sebar Curriculum Vitae (CV) ke banyak perusahaan, tapi tak pernah lolos? Jangan minder dulu. Belum tentu karena pengalaman Anda…

2 days ago

Cara Upload File Nuxt.js di Hosting

Nuxt.js adalah framework yang kian populer untuk membuat aplikasi website. Salah satu kelebihan framework ini adalah SEO Friendly.  Anda sedang…

3 days ago

Produk & Fitur Update September 2021

Setiap harinya kami terus melakukan perbaikan kualitas produk & layanan demi kemudahan para pelanggan Niagahoster. Nah, apa saja update selama…

4 days ago

Cara Membuat Website dengan PHP

Anda ingin membuat website sendiri, tapi bingung mulai dari mana? Tenang, ada cara membuat website dengan PHP dari awal yang…

4 days ago

Denny Triana: A Day in the Life of Engineering Manager

Belum banyak orang tahu kalau di balik website yang hebat, ada peran web engineer.  Web engineer lah yang bertanggungjawab atas…

5 days ago

Indikator Kepuasan Pelanggan: Pengertian dan Cara Mengukurnya

Kepuasan pelanggan bukan hanya dari produk, lho! Total ada enam indikator kepuasan pelanggan yang harus Anda ketahui. Yuk, simak selengkapnya.

6 days ago