Apa itu HTML? Pengertian, Contoh dan Tutorial Untuk Pemula

Menjadi web developer yang hebat tentu harus menguasai bahasa pemrograman. Bila Anda ingin menjadi seorang web developer, maka HTML adalah hal pertama yang harus dipelajari. Mari cari tahu apa itu HTML, arti, contoh dan tutorial untuk pemula melalui artikel berikut!

Apa itu HTML

HTML adalah singkatan dari Hypertext Markup Language. Jika diambil pengertian dari masing-masing istilah tersebut, maka Hypertext merupakan dokumen yang berisi tautan (link), yang memungkinkan pengguna terhubung ke halaman yang lain.

Sedangkan Markup Language merupakan sekumpulan code yang dipahami oleh komputer, yang nantinya menghasilkan suatu informasi. 

Dengan demikian, bila pengertian dari kedua istilah tersebut digabungkan, maka HTML adalah bahasa markup/markup languange yang digunakan untuk membuat struktur halaman website.

Berbicara soal HTML, kurang lengkap rasanya bila tidak membicarakan siapa penemu HTML, dan perkembangannya. Untuk itu, mari membahas sedikit tentang sejarah perjalanan HTML hingga digunakan sampai sekarang.  

Sejarah

HTML pertama kali diperkenalkan oleh seorang ahli fisika yang bernama Tim Berners-Lee pada akhir  1991. Awalnya, HTML diciptakan untuk memudahkan pekerjaan dalam pengelolaan dokumen. Seiring perkembangan zaman, HTML kemudian berubah fungsi menjadi bahasa markup pada suatu website.

Versi	Tahun
HTML1	Akhir tahun 1991
HTML2.0	Dipublikasikan 24 November 1995
HTML3.2	Dipublikasikan 14 Januari 1997
HTML4.0	Dipublikasikan 18 Desember 1997
HTML5	Dipublikasikan 28 Oktober 2014

HTML memiliki sejarah yang panjang sejak awal diciptakan. Saat ini, HTML5 merupakan update versi paling baru dari HTML yang dipublikasikan di tahun 2014. Versi ini merupakan versi terbaik dan tercanggih, yang sudah bisa digunakan untuk embed video dan audio.  

Sampai di sini tentu Anda sudah mendapatkan gambaran tentang apa itu HTML serta sudah mengetahui sejarah perkembangan HTML dari waktu ke waktu. Selanjutnya, mari mempelajari berbagai fungsi HTML. 

Fungsi HTML

Setelah mengetahui dan memahami pengertian HTML, selanjutnya Anda juga harus memahami beberapa fungsi HTML. Fungsi utama HTML adalah sebagai berikut:

1. Membuat Halaman Website

HTML menjadi standar bahasa markup untuk membuat website. Hampir semua website yang ada di internet dibuat menggunakan HTML.

Untuk dapat membuat suatu halaman website, HTML dikombinasikan dengan beberapa bahasa pemrograman lain, seperti PHP, Javascript, CSS dan masih banyak lagi, sesuai dengan kebutuhan.

Bila Anda mengunjungi suatu website, kemudian tertarik membuat tampilan seperti halaman tersebut, maka Anda bisa coba mengintip code script pendukungnya.

Anda bisa melihat struktur website melalui browser dengan cara tekan klik kanan pada halaman > klik inspect element. Cara lainnya adalah dengan tekan tombol Ctrl + U.

Satu hal yang perlu diingat adalah cara ini hanya dapat digunakan untuk melihat struktur code pembentuk tampilan front end saja, namun tidak untuk melihat script code yang ada di bagian back end. 

2. Menampilkan Berbagai Informasi dalam Browser Internet

Setelah website selesai dibuat, selanjutnya script website dapat diunggah ke server hosting, supaya bisa diakses secara luas melalui jaringan internet. 

Dengan perantara web browser, Anda dapat mengunjungi suatu website dan mendapatkan informasi dari halaman website tersebut.

Ada banyak pilihan web browser yang bisa digunakan. Beberapa browser yang populer digunakan di antaranya seperti Mozilla Firefox, Google Chrome, Safari, dan masih banyak lagi.

3. Membuat Link Menuju Halaman Website Lain

Fungsi terakhir dari HTML adalah untuk mengarahkan pengunjung dari suatu halaman website ke halaman yang lain. Fungsi ini disebut dengan hyperlink. Dengan menggunakan cara ini, informasi bisa disalurkan semakin luas dan saling berhubungan sesuai konteks. 

Kelebihan dan Kekurangan HTML

Berikut adalah beberapa poin kelebihan dan kekurangan HTML secara umum:

Kelebihan

• Mudah dipelajari dan digunakan: HTML adalah bahasa markup yang relatif sederhana dengan struktur sintaks yang mudah dipahami, sehingga mudah dipelajari oleh pemula.
• Kompatibel dengan banyak browser: Hampir semua browser mendukung HTML. Artinya ketika anda membuat web HTML, halaman tersebut dapat diakses dan dilihat oleh pengguna di berbagai perangkat dan browser tanpa konfigurasi tambahan.
• Ringan: HTML bersifat statis, yang membuatnya lebih ringan dibandingkan dengan halaman web dinamis.
• SEO Friendly: HTML memiliki fungsi tag yang tepat seperti heading, meta description, hingga alt text yang dapat lebih mudah diindeks oleh mesin pencari seperti Google.

Kekurangan

Selain beberapa kelebihan yang kami tuliskan diatas, HTML juga memiliki beberapa kekurangan seperti:

• Kurang dinamis: HTML adalah bahasa markup dan tidak bisa menjalankan logika pemrograman. Untuk menambahkan fitur dinamis seperti interaksi dengan pengguna, anda harus mengkombinasikan dengan bahasa lain seperti JavaScript atau CSS.
• Tidak cocok untuk website skala besar: HTML tidak dirancang untuk menangani aplikasi web yang sangat besar dan kompleks. Semakin besar situs web yang dibuat, semakin sulit juga untuk mengelola struktur HTML-nya. Selain itu, HTML tidak dapat terhubung langsung dengan database.

Perbedaan Antara HTML dan HTML5

HTML5 adalah versi terbaru dari HTML yang diluncurkan secara resmi pada tahun 2014 oleh World Wide Web Consortium (W3C). Berikut adalah beberapa poin perbedaan antara html dan html5.

Aspek	HTML	HTML5
Multimedia	Tidak mendukung audio dan video tanpa plugin eksternal (misalnya, Flash).	Mendukung elemen <audio> dan <video> secara native tanpa plugin tambahan.
Grafis dan Animasi	Tidak memiliki dukungan grafis bawaan. Harus menggunakan plugin seperti Flash.	Mendukung elemen <canvas> dan SVG (Scalable Vector Graphics) untuk grafis dan animasi.
Formulir	Formulir sederhana, validasi harus dilakukan dengan JavaScript.	Mendukung tipe input baru seperti email, date, dan atribut seperti required, placeholder.
Aplikasi Offline	Tidak mendukung aplikasi web offline.	Mendukung Application Cache dan Local Storage untuk akses aplikasi web secara offline.
API Tambahan	Tidak memiliki dukungan API bawaan yang signifikan.	Mendukung API baru seperti Geolocation API, Drag-and-Drop API, dan Web Storage API.
Konten Semantik	Elemen semantik kurang jelas, seperti <div> untuk struktur umum.	Mendukung elemen semantik baru seperti <article>, <section>, <header>, <footer>.
Performa dan Kecepatan	Lebih lambat karena banyak membutuhkan plugin dan eksternal untuk fitur tambahan.	Lebih cepat karena mendukung fitur multimedia dan grafi secara bawaan tanpa plugin eksternal.
Kompatibilitas Browser	Didukung oleh semua browser, tetapi fitur modern terbatas.	Didukung oleh semua browser modern dengan fitur yang lebih canggih.

HTML5, sebagai versi terbaru dari HTML, membawa banyak peningkatan terutama dalam hal dukungan multimedia, grafis, dan pengembangan aplikasi web yang lebih modern.

Belajar HTML

Setelah memahami HTML secara teori, kini waktunya mulai belajar HTML! Pada bagian ini, Anda akan mempelajari tag-tag pendukung yang digunakan di HTML. 

Untuk mulai belajar HTML, tidak perlu komputer dengan spesifikasi tinggi. Cukup gunakan komputer yang memiliki aplikasi web browser dan aplikasi text editor seperti Notepad.

Jika sudah menyiapkan perangkat yang dibutuhkan, selanjutnya, simak artikel berikut: Belajar HTML

Perintah Dasar HTML

Berikutnya, Rumahweb akan menjelaskan tentang perintah dasar di HTML. Perintah dasar tidak terlepas dari komponen-komponen penyusun HTML. Bagian ini juga akan menjelaskan tentang script sederhana di HTML. Berikut pembahasannya. 

Komponen Penyusun HTML

Ada 3 komponen penyusun HTML. Yaitu tag, element, serta attribute. Berikut masing-masing penjelasannya. 

Tag

Tag menjadi awal instruksi yang akan dibaca oleh browser. Misalnya sebagai berikut:

<b> … </b> : Menampilkan tulisan dalam bentuk tebal.

<i> … </i> : Menampilkan tulisan dalam bentuk miring.

<u> … </u> : Menampilkan tulisan dalam bentuk garis bawah.

<a> … </a> : Membuat hyperlink atau link yang mengarah ke URL halaman lain.

<p> … </p> : Membuat block teks dalam format paragraf.

Dan masih ada beberapa tag lainnya. 

Element

Element merupakan serangkaian code yang terdiri atas tag pembuka dan tag penutup, seperti berikut:

<h1> … </h1> 

Tag diatas akan menghasilkan tulisan dengan tipe Header 1. Biasanya, pasangan element tersebut digunakan untuk membuat judul tulisan. 

Attribute

Attribute adalah informasi tambahan yang dimasukkan ke dalam element, misalnya:

<img src=”hondavario.jpg” alt=”Motor Matic”>

Element ini menggunakan img sebagai image sumber gambar, serta dengan alternatif teks Motor Matic.

Contoh Script HTML sederhana

Penjelasannya:

• <!DOCTYPE html> : Mendeklarasikan komputer bahwa kita sedang mendeklarasikan perintah html. 
• <html> … </html> : Merupakan tag penanda bahwa di dalamnya terdapat sekumpulan code yang dibuat menggunakan HTML.
• <head> … </head> :  Biasa diisi dengan metadata dokumen HTML, seperti judul, deskripsi, dan informasi lainnya. 
• <body> … </body> : Pada bagian ini berisi konten halaman website.

Supaya lebih memperdalam kemampuan Anda tentang HTML, silakan kunjungi Belajar HTML Part 2: Menambahkan Gambar dan Membuat Tabel

Cara Membuat Form Untuk Pemula

Form yang ada di website dapat dibuat menggunakan HTML dengan ditambah beberapa validasi yang bisa dikombinasikan dengan bahasa pemrograman lain. 

Untuk membuat form di HTML, silakan ikuti panduan pada artikel berikut: Belajar HTML Part 3: Cara Membuat Form HTML

Kesimpulan

HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman website. HTML yang dulunya dibuat untuk memudahkan pengelolaan file dokumen, kini sudah berkembang dan dapat digunakan untuk berbagai kebutuhan. Faktanya, lebih dari 91% website di dunia menggunakan HTML. 

Bagi Anda yang sudah menguasai HTML, selanjutnya Anda dapat melanjutkan belajar CSS dan Javascript. Semoga sukses!