Home » Apa Itu HTML dan Bagaimana Cara Kerjanya?

Apa Itu HTML dan Bagaimana Cara Kerjanya?

MinTek
October 20, 2023

HTML adalah bahasa pemrograman yang digunakan untuk membuat dan mengatur konten halaman web. Mengutip dari Niagahoster, pemahaman yang kuat terhadap HTML sangat penting bagi mereka yang ingin menjadi web developer terampil.

Dalam artikel Staditek ini, kami akan memberikan penjelasan komprehensif tentang HTML, fungsi, cara kerja, hingga tag dalam HTML beserta fungsinya. Yuk, simak, pembahasan staditek ini!

Apa Itu HTML dan Sejarahnya?

HTML merupakan singkatan dari Hypertext Markup Language. Definisi dari HTML adalah bahasa markup yang digunakan untuk membangun halaman web.

Dalam HTML, tag-tag khusus digunakan untuk mendefinisikan struktur halaman, memasukkan elemen-elemen seperti teks dan gambar, serta memberikan format dan tata letak pada situs web.

Tag-tag ini, ketika diinterpretasikan oleh browser, menghasilkan halaman web yang dapat diakses oleh pengguna.

Bahasa pemrograman ini adalah campuran antara teks dan simbol yang disimpan dalam sebuah file. Pembuatan file HTML mengikuti standar atau format tertentu yang terdokumentasikan dalam standar kode internasional atau ASCII (American Standard Code for Information Interchange).

Seiring dengan pemahaman tentang apa itu HTML, penting juga untuk mengetahui sejarah singkat di balik kelahiran dan perkembangan bahasa ini.

Sejarah HTML dimulai ketika Tim Berners-Lee, seorang ilmuwan yang bekerja di European Organization for Nuclear Research (CERN), mengembangkannya pada tahun 1990. Pada awalnya, markup language diciptakan oleh perusahaan Amerika Serikat, IBM.

Tim Berners-Lee, yang juga dikenal sebagai penemu World Wide Web (WWW), mengembangkan HTML pada tahun 1991 untuk membantu para ilmuwan di CERN berbagi dokumen secara lebih efisien.

Pada tahun 1993, HTML pertama kali resmi dirilis ke publik dan mengalami berbagai perubahan dan perkembangan sejak saat itu.

HTML5 adalah versi terbaru yang paling canggih dan populer saat ini. Dalam era modern, sekitar 87,4 persen situs web telah beralih ke penggunaan HTML5.

HTML memiliki keterkaitan yang erat dengan World Wide Web (WWW) karena HTML digunakan sebagai dasar untuk membuat halaman web yang akan ditampilkan di WWW.

Sehingga, sejarah penggunaan HTML tak dapat dipisahkan dari perkembangan World Wide Web dan kontribusi pentingnya dalam membangun tampilan situs web.

Fungsi HTML

HTML berfungsi sebagai alat untuk mengelola tampilan halaman web, termasuk mengorganisir teks seperti paragraf dan heading serta menambahkan tautan dan gambar. Beberapa fungsi HTML lainnya termasuk:

1. Membentuk Struktur Halaman Web

Peran utama HTML adalah membangun kerangka kerja halaman web. Ini mencakup pembuatan elemen-elemen seperti header, footer, navigasi, dan konten lainnya. HTML berperan sebagai fondasi dasar untuk struktur halaman web.

Ini penting karena struktur HTML akan membantu dalam penerapan bahasa pemrograman lainnya, seperti CSS dan JavaScript, yang digunakan untuk mengatur tampilan dan fungsionalitas halaman web.

2. Menambahkan Konten pada Website

Selain membuat struktur, HTML memungkinkan Anda untuk menyisipkan gambar, memasukkan teks, membuat tabel, dan memasukkan media lainnya ke dalam halaman web.

Misalnya, Anda dapat menggunakan tag `<p>` untuk menambahkan paragraf dan tag `<img>` untuk menyisipkan gambar.

3. Mengelola Format dan Tata Letak

HTML juga memberikan kemampuan untuk mengontrol format dan tata letak konten di halaman web. Ini mencakup pemilihan jenis huruf, pengaturan warna teks, dan pengaturan tata letak konten.

Anda dapat menggunakan tag seperti ‘<bold>’ untuk teks cetak tebal dan ‘<italic>’ untuk teks miring. Dengan menggunakan kode HTML yang sesuai, Anda dapat menciptakan tampilan konten yang menarik dan mudah dibaca.

4. Mengarahkan Pengguna ke Halaman Website Lain

HTML juga berfungsi sebagai alat untuk mengarahkan pengguna ke halaman web lain dengan menggunakan tautan.

Tautan ini dapat ditempatkan dalam teks tertentu, yang sering disebut sebagai anchor text. Untuk membuat hyperlink dalam HTML, Anda dapat menggunakan tag ‘<a>’.

Dengan hyperlink, pengunjung dapat dengan mudah mengakses informasi yang terkait dengan halaman yang sedang mereka baca, dan Anda juga dapat mengarahkan mereka ke halaman tujuan tertentu.

Bagaimana Cara Kerja HTML

Dalam istilah yang lebih sederhana, HTML berfungsi dengan cara menyusun halaman web melalui penggunaan tag-tag khusus.

Setiap tag ini memiliki peran dan fungsi tertentu, memungkinkan Anda untuk membuat struktur dan tampilan konten sesuai kebutuhan.

Kemudian, browser akan menginterpretasikan tag-tag ini untuk menampilkan halaman web yang sesuai. Secara lebih teknis, prosesnya adalah sebagai berikut.

Pertama, Anda membuat dokumen HTML menggunakan aplikasi pengedit HTML.

Setelah itu, Anda menyimpan dokumen tersebut dengan format .html atau .htm. Dalam sebuah situs web, biasanya terdiri dari beberapa halaman, seperti halaman utama, halaman kontak, dan halaman blog, yang masing-masing memiliki dokumen HTML sendiri.

Dokumen HTML ini kemudian dapat diakses dengan menggunakan web browser seperti Google Chrome, Safari, atau Mozilla Firefox.

Browser akan membaca dan merender dokumen HTML ini ke dalam tampilan halaman web.

Dengan demikian, ketika orang mengakses situs web melalui internet, mereka dapat dengan mudah membaca konten yang ditampilkan.

Agar dokumen HTML dapat diakses secara online oleh banyak orang, Anda perlu menyewa layanan hosting dan mengunggah file situs web Anda ke sana.

Tag dalam HTML dan Fungsinya

Berikut adalah daftar tag-tag HTML beserta penjelasan dan fungsinya:

1. Basic

<!DOCTYPE>: Digunakan untuk menentukan tipe dokumen.
<html>: Membuat dokumen HTML.
<title>: Membuat judul halaman.
<body>: Membuat tubuh halaman.
<h1> to <h6>: Membuat heading dengan tingkat kepentingan yang berbeda.
<p>: Membuat paragraf.
<br>: Memasukkan baris putus.
<hr>: Membuat garis pemisah dalam konten.
<!–…–>: Membuat komentar dalam kode HTML.

2. Formatting

<acronym>: Membuat akronim (tidak disupport lagi di HTML5).
<abbr>: Membuat singkatan.
<address>: Membuat kontak alamat.
<b>: Membuat teks cetak tebal.
<bdi>: Mengisolasi teks yang diformat dengan arah yang berbeda (tag baru HTML5).
<bdo>: Mengganti arah teks.
<big>: Membuat teks besar (tidak disupport lagi di HTML5).
<blockquote>: Membuat kutipan.
<center>: Membuat teks menjadi terpusat (tidak disupport lagi di HTML5).
<cite>: Membuat judul karya.
<code>: Membuat potongan kode komputer.
<del>: Membuat teks yang telah dihapus.
<dfn>: Membuat istilah definisi.
<em>: Membuat penekanan teks (tidak disupport lagi di HTML5).
<font>: Membuat gaya teks seperti font, warna, dan ukuran (tidak disupport lagi di HTML5).
<i>: Membuat teks dalam mood tertentu.
<ins>: Membuat teks yang telah dimasukkan.
<kbd>: Membuat input dari keyboard.
<mark>: Membuat teks yang disorot/tandai (tag baru HTML5).
<meter>: Membuat pengukuran skalar.
<pre>: Membuat teks terformat.
<progress>: Menampilkan kemajuan tugas (tag baru HTML5).
<q>: Membuat kutipan pendek.
<rp>: Menentukan tampilan untuk browser yang tidak mendukung ruby (tag baru HTML5).
<rt>: Membuat anotasi/pengucapan karakter (untuk tipografi Asia Timur).
<ruby>: Membuat anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5).
<s>: Membuat teks yang tidak lagi benar.
<samp>: Membuat contoh keluaran dari program komputer.
<small>: Membuat teks kecil.
<strike>: Membuat teks yang dicoret tengah (tidak disupport lagi di HTML5).
<strong>: Membuat teks penting.
<sub>: Membuat teks subskrip (seperti dalam penulisan kimia).
<sup>: Membuat teks superskrip (seperti dalam penulisan akar kuadrat).
<time>: Membuat tanggal/waktu (tag baru HTML5).
<tt>: Membuat teks teletipe (tidak disupport lagi di HTML5).
<u>: Membuat teks dengan gaya yang berbeda dari teks biasa.
<var>: Membuat sebuah variabel.
<wbr>: Membuat garis putus yang mungkin.

3. Forms

<form>: Membuat formulir input pengguna.
<input>: Membuat kontrol input.
<textarea>: Membuat kontrol input multibaris (textarea).
<button>: Membuat tombol yang dapat diklik.
<select>: Membuat daftar drop-down.
<optgroup>: Membuat kelompok pilihan dalam daftar drop-down.
<option>: Membuat pilihan dalam daftar drop-down.
<label>: Membuat label untuk elemen input.
<fieldset>: Mengelompokkan unsur terkait dalam formulir.
<legend>: Digunakan untuk membuat keterangan (caption) untuk elemen-elemen seperti `<fieldset>`, `<figure>`, atau `<details>`.
<datalist>: Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5).
<keygen>: Digunakan untuk membuat kolom input generator pasangan kunci (tag baru HTML5).
<output>: Membuat hasil penghitungan (tag baru HTML5).

4. Frames

<frame>: Membuat jendela (frame) dalam sebuah set bingkai (frameset) (tidak disupport lagi di HTML5).
<frameset>: Membuat satu set bingkai (frameset) (tidak disupport lagi di HTML5).
<noframes>: Membuat konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5).
<iframe>: Membuat bingkai (iframe).

5. Images

<img>: Membuat elemen gambar.
<map>: Membuat peta gambar (image map).
<area>: Membuat area dalam peta gambar (image map).
<canvas>: Digunakan untuk menggambar grafik dengan bantuan scripting (JavaScript) (tag baru HTML5).
<figcaption>: Membuat keterangan (caption) untuk elemen `<figure>` (tag baru HTML5).
<figure>: Menentukan konten mandiri (tag baru HTML5).

6. Audio/Video

<audio>: Membuat elemen suara (audio) (tag baru HTML5).
<source>: Menentukan sumber media ganda untuk elemen media (seperti `<video>` dan `<audio>`) (tag baru HTML5).
<track>: Membuat trek teks untuk elemen media (seperti `<video>` dan `<audio>`) (tag baru HTML5).
<video>: Membuat elemen video (tag baru HTML5).

7. Links

<a>: Membuat tautan hyperlink.
<link>: Membuat hubungan antara dokumen dan sumber daya eksternal, sering digunakan untuk tautan ke lembar gaya (style sheet).
<nav>: Membuat tautan navigasi (tag baru HTML5).

8. Lists

<ul>: Membuat daftar tak berurutan (unordered list).
<ol>: Membuat daftar berurutan (ordered list).
<li>: Membuat item dalam daftar.
<dir>: Membuat daftar direktori (tidak disupport lagi di HTML5).
<dl>: Membuat daftar definisi.
<dt>: Membuat istilah (item) dalam daftar definisi.
<dd>: Menjelaskan item dalam daftar definisi.
<menu>: Membuat deskripsi item dalam daftar definisi.
<command>: Membuat tombol perintah yang dapat diminta oleh pengguna (tag baru HTML5).

9. Tables

<table>: Digunakan untuk membuat tabel.
<caption>: Membuat keterangan (caption) untuk tabel.
<th>: Membuat sel header (header cell) dalam tabel.
<tr>: Membuat baris dalam tabel.
<td>: Membuat sel dalam tabel.
<thead>: Mengelompokkan isi header dalam sebuah tabel.
<tbody>: Mengelompokkan isi tubuh dalam sebuah tabel.
<tfoot>: Mengelompokkan isi footer dalam sebuah tabel.
<col>: Menentukan properti kolom untuk setiap kolom dalam elemen `<colgroup>`.
<colgroup>: Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat.

10. Style/Sections

<style>: Membuat informasi gaya (style) untuk dokumen.
<div>: Membuat sebuah bagian dalam dokumen.
<span>: Membuat sebuah bagian dalam dokumen.
<header>: Membuat header untuk dokumen atau bagian (tag baru HTML5).
<footer>: Membuat footer untuk dokumen atau bagian (tag baru HTML5).
<hgroup>: Mengelompokkan elemen heading (seperti `<h1>` sampai `<h6>`) (tag baru HTML5).
<section>: Membuat bagian dalam dokumen (tag baru HTML5).
<article>: Membuat sebuah artikel (tag baru HTML5).
<aside>: Membuat konten lain selain dari konten halaman (tag baru HTML5).
<details>: Membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5).
<dialog>: Membuat sebuah kotak dialog atau jendela (tag baru HTML5).
<summary>: Membuat judul terlihat untuk elemen `<details>` (tag baru HTML5).
Meta Info
<head>: Digunakan untuk membuat informasi tentang dokumen.
<meta>: Membuat metadata tentang dokumen HTML.
<base>: Menentukan URL dasar atau target untuk semua URL relatif dalam dokumen.
<basefont>: Menentukan standar warna, ukuran, dan jenis huruf untuk semua teks dalam dokumen (tidak disupport lagi di HTML5).

11. Programming

<script>: Digunakan untuk membuat script di sisi klien.
<noscript>: Membuat konten alternatif bagi pengguna yang tidak mendukung script di sisi klien.
<applet>: Digunakan untuk membuat sebuah Java applet yang ditanam (tidak disupport lagi di HTML5).
<embed>: Membuat wadah untuk aplikasi eksternal yang bukan HTML (tag baru HTML5).
<object>: Digunakan untuk membuat sebuah objek yang ditanam.
<param>: Membuat parameter untuk objek.

Kesimpulan

HTML adalah bahasa pemrograman dasar yang digunakan untuk membuat halaman web. Dengan menggunakan elemen-elemen HTML, Anda dapat mendefinisikan struktur dan konten halaman web, serta mengatur tampilan dan interaktivitas.

Browser web kemudian membaca dan menafsirkan dokumen HTML untuk menghasilkan tampilan halaman web yang dapat diakses oleh pengguna.

HTML terus berkembang, dan HTML5 adalah versi terbaru yang menghadirkan banyak fitur baru untuk pengembang web. Untuk menjadi pengembang web yang sukses, memahami HTML adalah langkah pertama yang penting.