Dalam membangun struktur dasar website, HTML adalah bahasa yang selalu digunakan untuk membuat elemen-elemen seperti heading, teks, tautan, tabel, dan sebagainya. Susunannya mirip seperti coding, namun sebenarnya HTML bukanlah bahasa pemrograman, loh!
HTML pada dasarnya tidak memberikan fungsi dinamis pada struktur website. Oleh karena itu, HTML saat ini tidak dianggap sebagai bahasa pemrograman. Kendati demikian, HTML merupakan bahasa markup yang menjadi standar dan fondasi dari hampir semua halaman web yang ada di internet.
Yuk, baca artikel artikel ini sampai selesai untuk memahami lebih lanjut mengenai cara kerja, struktur, serta fungsi HTML dalam pengembangan web.
Apa itu HTML?
HTML adalah singkatan dari HyperText Markup Language, yakni sebuah bahasa markup yang dipakai untuk menyusun dan menampilkan konten di halaman web/aplikasi. Bahasa ini pertama kali dikembangkan oleh Tim Berners-Lee pada tahun 1991 dalam proyek “World Wide Web” atau “WWW”.
Di versi pertamanya, HTML hanya mendukung 18 tag dasar untuk menautkan dokumen dan memformat teks. Namun HTML terus dikembangkan dengan berbagai pembaruan seperti HTML4 dan HTML5. Kini, HTML menjadi standar pengembangan web yang mendukung sekitar 140 tag untuk membuat elemen baru.
Perlu diingat, HTML hanya berperan dalam pembuatan struktur dasar seperti tabel, teks, paragraf, link, dan sebagainya. Ini berbeda dengan bahasa pemrograman seperti Python atau JavaScript yang mampu menjalankan fungsi dan logika pemrograman. Oleh karena itu, HTML tidak bisa disebut sebagai bahasa pemrograman.
Cara Kerja HTML
HTML pada dasarnya bekerja menggunakan serangkaian elemen atau tag untuk membangun struktur dan semantik pada konten. File-nya memiliki ekstensi .html atau .htm yang bisa diakses melalui web browser seperti Chrome, Mozilla Firefox, Safari, dan banyak lagi. Lebih jelasnya, berikut cara kerja HTML:
- Pembuatan file HTML: File HTML umumnya memiliki ekstensi .html atau .htm dan dibuat di software text editor seperti Visual Studio Code. Dalam file ini, kamu akan menulis kode HTML yang terdiri dari elemen-elemen terstruktur, contohnya:
|
<!DOCTYPE html>
<html> <head> 
<title>Judul Halaman</title> </head> <body> <h1>Halo, Selamat Datang!</h1> <p>Ini adalah paragraf pertama dalam halaman web.</p> </body> </html> |
Berikut penjelasan mengenai tag pada kode di atas:
- <html> adalah elemen menandakan awal dan akhir dokumen HTML.
- <head> berisi informasi meta.
- <title> merupakan judul halaman yang masuk ke dalam tag <head>.
- <body> memuat konten yang akan ditampilkan di web browser. Di sini terdapat beberapa elemen seperti <h1> untuk judul utama dan <p> untuk paragraf (text).
Perlu diingat, elemen HTML terdiri dari tag pembuka dan tag penutup untuk menandai bagian konten tertentu, misalnya <h1>Belajar HTML Dasar</h1>. Ini merupakan contoh tag “heading 1” yang menandai sebuah judul utama.
1. Hierarki elemen: Elemen-elemen HTML disusun secara hierarkis, membentuk bagian-bagian seperti judul, paragraf, daftar, tautan, gambar, dan blok konten lainnya. Susunan hierarki ini membantu browser memahami struktur dan urutan tampilan konten.
2. HTML dibaca oleh web browser: Ketika membuka suatu halaman, browser seperti Chrome, Firefox, atau Edge akan membaca kode HTML lalu menampilkannya kepada pengguna sesuai dengan elemen-elemen HTML yang ditulis. Prosesnya kurang lebih seperti berikut:
- Request – Browser mengirimkan permintaan ke server tempat file HTML disimpan.
- Response – Server mengirimkan file HTML ke browser pengguna.
- Render – Browser akan membaca dan menerjemahkan kode HTML untuk menampilkan halaman sesuai dengan struktur yang ada dalam file HTML.
Fungsi HTML
HTML berperan penting dalam membangun dan menampilkan halaman web di internet. Bahasa markup ini memungkinkan website untuk memiliki struktur yang jelas, mulai dari judul, teks, gambar, hingga elemen interaktif seperti tautan dan formulir. Berikut beberapa fungsi HTML dalam pengembangan web:
1. Membuat website
Seperti yang telah dijelaskan bahwa HTML menjadi pondasi utama dalam pembuatan website. Sebab, hampir semua halaman web yang ada di internet terdiri dari elemen-elemen HTML yang terstruktur. Tanpa HTML, halaman website tidak akan memiliki bentuk serta tidak bisa diakses oleh pengguna.
Selain itu, dalam pembuatan website, HTML juga biasanya dipadukan dengan CSS dan JavaScript untuk memberikan visual yang lebih interaktif.
2. Menampilkan teks, gambar, dan multimedia
Dengan HTML, kamu dapat menyisipkan dan menampilkan berbagai jenis konten seperti teks, gambar, atau multimedia lainnya ke dalam halaman. Misalnya, elemen <p> untuk menyisipkan paragraf, <img> untuk gambar, dan <video> untuk menampilkan video.
3. Hyperlink
Salah satu kemampuan penting yang dimiliki oleh HTML adalah hyperlink atau membuat tautan. Ini memungkinkan pemilik situs untuk mengarahkan pengguna ke halaman atau website lain melalui tautan. Tag yang digunakan untuk menjalankan fungsi ini adalah <a>.
4. Membantu pembuatan website yang responsif
Sebenarnya, HTML tidak bertanggung jawab untuk membuat desain responsif. Tetapi, dengan elemen <meta viewport>, website masih dapat menyesuaikan tampilannya saat diakses pada berbagai perangkat. Selain itu, HTML juga bisa dikombinasikan dengan CSS dan JavaScript agar tampilannya tetap optimal di berbagai ukuran layar.
5. Penanda teks dan bagian website
HTML memungkinkan website untuk menandai teks dan bagian-bagian tertentu menggunakan tag yang sesuai. Misalnya seperti <b> untuk teks cetak tebal, <i> untuk teks miring, atau <header>, <footer>, dan <section> untuk bagian konten. Selain membantu pengorganisasian konten, hal ini juga dapat meningkatkan SEO (Search Engine Optimization) jika dilakukan dengan benar.
Struktur HTML
Untuk mengatur tampilan dan fungsionalitas halaman maka diperlukan HTML dengan struktur yang benar. Ini sangat penting karena berpengaruh terhadap kemampuan web browser dalam memahami dan menampilkan konten. Setidaknya, ada tiga bagian utama dalam struktur HTML, yakni tag, elemen, dan atribut. Berikut penjelasannya:
1. Tag
Tag adalah penanda awal dan akhir dari sebuah elemen. Tag sendiri terdiri dari tanda kurung siku (<>) yang mengapit sebuah kode tertentu yang berisi perintah atau instruksi. Ada pun tag ini memiliki dua jenis yang berbeda, di antaranya:
- Tag dengan penutup, seperti <p>…</p> untuk paragraf, <body>…</body> untuk tubuh halaman, dan <title>…</title> untuk judul.
- Tag tanpa penutup, seperti <br> untuk baris baru, <img> untuk menyisipkan gambar, dan <hr> untuk membuat garis horizontal.
|
Contoh tag:
<h1>Judul Utama</h1>, <a href=”https://example.com”>Tautan</a> |
2. Element
Element merupakan bagian yang lebih luas dari tag dan terdiri dari “tag pembuka, isi konten, serta tag penutup”. Contohnya seperti berikut:
|
<p>Ini adalah sebuah paragraf.</p>
<a href=”https://example.com”>Tautan ke Website</a> |
Selain itu, ada juga elemen yang bersarang (nested), seperti “<div><p>Paragraf</p></div>”. Contoh ini menunjukkan elemen <p> yang berada di dalam <div>.
3. Attribute
Atribut adalah informasi tambahan yang diberikan pada sebuah tag atau elemen. Tidak semua tag memiliki atribut, namun tag tertentu memerlukan atribut agar dapat berfungsi, seperti pada <a>, <img>, dan <video>.
|
Contoh atribut:
<a href=”https://example.com”>Tautan Website</a> (atribut href memberikan alamat tautan) <img src=”gambar.jpg” alt=”Deskripsi”> (atribut src memberikan sumber gambar, dan alt memberikan deskripsi teks alternatif) |
Sudah Tahu Apa itu HTML?
HTML adalah bahasa markup standar dalam pengembangan website yang digunakan untuk menyusun struktur halaman. Bahasa markup ini memungkinkan konten untuk dapat ditampilkan dengan benar di web browser. Namun perlu diingat, HTML berbeda dengan bahasa pemrograman yang memiliki logika pemrograman, HTML hanya bertugas untuk mengatur tata letak dan elemen dalam dokumen web.
Terlepas dari itu, jika ingin membangun website yang cepat, aman, dan andal, kamu bisa memilih Dewaweb untuk kebutuhan hosting dan domain. Dengan layanan Cloud Hosting yang didukung teknologi terkini, Dewaweb memastikan website kesayanganmu memiliki performa yang stabil dan optimal. Yuk, beli sekarang juga selagi masih ada Promo Paket Hosting, Diskon 25%.
