Seperti yang sudah kita ketahui, HTML berperan sebagai struktur untuk membangun sebuah halaman website. Jika Anda ingin menjadi web developer profesional, Anda harus terlebih dahulu faham dengan bahasa HTML ini. Hal ini dikarenakan HTML adalah salah satu komponen website yang sangat penting.
Pengertian HTML
HTML singkatan dari Hypertext Markup Language yaitu bahasa markup yang digunakan untuk membuat struktur halaman website. HTML merupakan bahasa standar yang digunakan untuk merancang tampilan website. HTML tidak dapat dikatakan sebagai bahasa pemrograman karena tidak ada logika di dalamnya. HTML hanya digunakan untuk menyusun tampilan website supaya sesuai dengan yang dispesifikan dan dapat dibuka dengan browser.
Fungsi utama dari HTML adalah untuk membuat suatu halaman website menjadi lebih mudah dibaca dan dipahami. Karena itulah di dalamnya terdapat berbagai macam tag yang dapat dapat digunakan untuk memformat teks, seperti heading, title, paragraf, maupun link.
Berkat perkembangannya, HTML juga telah memiliki banyak fungsi yang canggih. Selain itu, HTML tidak terlalu sulit jika dipelajari seorang programmer 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.
Sejarah HTML
Kita patut berterima kasih pada Tim Berners-Lee yang telah mengembangkan HTML pada tahun 1991. HTML yang awalnya hanya dipakai untuk kebutuhan penelitiannya sebagai solusi untuk memudahkan para ilmuwan dalam mengakses dokumen satu sama lain, kini dapat digunakan semua orang untuk berbagai kebutuhan.
Selama perjalanannya, HTML mengalami perkembangan yang cukup pesat di dunia internet. Seperti apa perkembangannya ? Simak timeline perjalanan HTML berikut:
| Tahun | Versi | Perkembangan HTML |
|---|---|---|
| 1991 | HTML1 | Memudahkan 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-1999 | HTML4.0 | Menambahkan perintah dasar HTML, yaitu image, tabel, text, link, dan form. |
| 1999-2000 | HTML4.1 | Telah dipublikasi secara internasional dan dapat dipakai oleh browser apapun. |
| 2014 | HTML5 | 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. |
Struktur Dasar HTML
Website jika dibandingkan serupa dengan berkas dokumen yang ada seperti koran, majalah, atau buku. Serupa dalam hal memiliki struktur konten layaknya dokumen sehari-hari yang kita baca. Pada sebuah majalah terdapat judul, gambar yang ditampilkan dan teks dalam bentuk paragraf. Terkadang, jika konten tersebut panjang terdapat sub-judul untuk memisahkannya menjadi beberapa bagian.
Judul dan subjudul pada sebuah dokumen menggambarkan suatu hierarki dari informasi. Misalnya, judul dengan ukuran besar merupakan judul utama dalam sebuah konten. Kemudian diikuti dengan judul kecil di bawahnya yang menjelaskan informasi dengan lebih mendetail lagi.
Berkas HTML dasarnya memiliki struktur yang terlihat seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Heading Utama</h1>
<p>Sebuah Paragraph.</p>
</body>
</html>Kita dapat melihat bahwa struktur dasar HTML dituliskan dari beberapa elemen. Pada setiap elemen HTML terdapat dua tag, yaitu pembuka tag <> dan penutup tag </> . Lihat gambar berikut untuk lebih jelasnya.
Di antara tag pembuka dan penutup sebuah elemen, kita dapat meletakkan sebuah konten. Konten dapat berupa teks ataupun sebuah elemen HTML lain. Contohnya, elemen memiliki konten yaitu elemen dan juga elemen . Lalu, elemen memiliki konten berupa elemen yang di dalamnya memiliki konten berupa teks dari judul halaman yang ditampilkan. Begitu pula dengan elemen lainnya, sehingga hirarki elemen HTML nampak seperti ini.
Tag HTML
Tag HTML merupakan tanda awalan dan akhiran dalam perintah HTML yang akan dibaca oleh web browser. Tag HTML dibuat dengan menggunakan kurung siku , di mana di dalamnya berisi nama tag.
Setiap tag HTML memiliki fungsi perintah yang berbeda-beda. Mulai dari membuat judul, paragraf, heading, cetak tebal, miring, italic, dan lainnya. Misalnya: <h1>. Tag tersebut akan meminta browser untuk membuat bagian heading pada artikel .
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 yang dapat digunakan ke dalam berkas HTML. Namun, Anda tak perlu menghafal semua tag yang ada. Ada hanya perlu mengingat beberapa tag dasar berikut ini :
| Nama 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>...<h6> | Untuk membuat bagian heading pada artikel |
<p> | Untuk membuat paragraf |
<bold> | Untuk menampilkan teks dalam format tebal |
Untuk lebih jelasnya, Anda dapat mempelajari referensi tentang tag HTML secara lengkap di HTML Element Reference.
Tag <html>
Hierarki elemen teratas pada berkas HTML adalah elemen HTML-nya itu sendiri. Elemen ini digunakan untuk memberitahu kepada browser bahwa ini merupakan sebuah berkas HTML sekaligus menjadi root dari sebuah berkasnya itu. Seluruh elemen lainnya tentunya dituliskan pada konten elemen ini.
Tag <head>
Tag <head> pada berkas HTML berfungsi sebagai tempat disimpannya informasi dari dokumen HTML. Informasi dapat berupa elemen meta, style, atau link. Dan juga pada elemen ini judul dari dokumen HTML didefinisikan dengan menggunakan tag <title>. Berikut contoh elemen yang berada pada konten head:
<title><style><base><link><meta><script><noscript>
Pada HTML versi 4.01, tag <head> wajib ada dalam sebuah berkas HTML. Berikut contoh penulisan sebuah elemen <head> beserta contoh konten di dalamnya:
<head>
<meta charset="utf-8">
<title>Judul halaman</title>
<style> Style </style>
</head>Tetapi sejak HTML5, penggunaan dapat dihilangkan. Sehingga struktur dasar berkas HTML menjadi seperti ini:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Judul halaman</title>
<style> Style </style>
<body>
<h1>Heading Utama</h1>
<p>Sebuah Paragraph.</p>
</body>
</html>Tag <body>
Seluruh konten yang terdapat pada elemen ini akan ditampilkan pada halaman website. Maka dari itu, elemen ini digunakan untuk menampung seluruh konten atau elemen yang ditampilkan ke dalam jendela browser. Silakan coba tuliskan kode berikut, simpan dalam format HTML dan jalankan pada browser:
<html>
<head>
<title>Ini merupakan judul dari dokumen HTML</title>
</head>
<body>
<h1>header yang diletakan di dalam elemen body</h1>
<p>Ini merupakan sebuah paragraph yang juga diletakan pada sebuah konten body, sehingga konten ini dapat dilihat oleh pengguna pada jendela browser.</p>
</body>
</html>Maka seluruh konten yang dituliskan di dalam tag <body> akan tampil pada browser.
Kecuali jika kita ingin menuliskan sebuah notes pada berkas HTML, kita perlu gunakan commenting tag (<!-- -->). Semua yang dituliskan di antara tag komentar tidak akan memberikan pengaruh apa pun, termasuk pada tampilan di jendela browser. Pada HTML, tag komentar dituliskan seperti ini:
<!-- Ini merupakan sebuah komentar -->
<!-- Ini merupakan
sebuah komentar yang
terdiri lebih dari satu baris -->Sebuah komentar berguna untuk memberikan label dan mengorganisir sebuah dokumen yang panjang, terlebih ketika kita bekerja secara tim.
Elemen HTML
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 lalu tag yang berisi elemen tag heading dan elemen tag paragraf.
Atribut HTML
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 “Gedung Sekolah”>Tag memiliki atribut khusus yaitu (src) dan (alt) yang artinya browser harus menampilkan gambar.jpg dengan alt text “Gedung Sekolah”.
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:
| Nama Atribut | Digunakan Pada Tag |
|---|---|
src | <img>, <embed>, <audio>, <iframe> |
href | <a>, <link> |
action | <form> |
autoplay | <audio>, <video> |
Kelebihan dan Kekurangan HTML
Sama seperti hal teknis lainnya dalam dunia web, HTML juga punya kelebihan dan kekurangannya.
Kelebihan :
- Bahasa yang digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.
- Dijalankan secara alami di setiap web browser.
- Memiliki learning curve yang mudah.
- Open-source dan sepenuhnya gratis.
- Bahasa markup yang rapi dan konsisten.
- Standard web yang resmi di-maintain oleh World Wide Web Consortium (W3C).
- Mudah diintegrasikan dengan bahasa backend, seperti PHP dan Node.js.
Kekurangan :
- Paling sering digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.
- HTML tidak memungkinkan user untuk menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.
- Fitur-fitur baru tidak bisa digunakan secara cepat di sebagian browser.
- Terkadang perilaku browser susah untuk diprediksi (misalnya, browser lama tidak selalu bisa render tag yang lebih baru).
Sekarang Anda sudah mengetahui pengertian dan struktur dasar HTML. Selanjutnya Anda dapat mempelajari bahasa pemrograman lainnya, seperti CSS, Javascript, PHP, dan lainnya untuk menjadi web developer profesional.
