Apa itu HTML? Definisi, Kegunaan, Struktur & Cara Membuat

Sobat MinDi tertarik belajar sebagai web developer? Tertarik berkecimpung pada pekerjaan yang berkaitan dengan pemrograman komputer? 

Ada banyak istilah atau bahasa pemrograman dasar yang harus Sobat MinDi pelajari, salah satunya adalah HTML (HyperText Markup Language). Lantas apa itu?

HTML adalah bahasa pemrograman standar untuk membuat dan menyusun halaman web yang berfungsi untuk menstrukturkan konten seperti teks, gambar, dan tautan. HTML merupakan materi dasar untuk developer pemula.

Penasaran mengenai HTML lebih lanjut? Apa saja fungsi dan struktur dasar HTML? Bagaimana cara membuat HTML secara dasar? Yuk simak penjelasan lengkapnya pada artikel ini.

Apa itu HTML?

Tunggu dulu Sobat MinDi, sebelum kita membahas lebih dalam tentang HTML (HyperText Markup Language), pertama-tama yuk pahami dulu apa itu HTML melalui beberapa pengertian berikut ini.

Dilansir dari GeeksforGeeks, HTML, yang merupakan singkatan dari HyperText Markup Language, adalah bahasa yang digunakan untuk membuat halaman web. HTML menggunakan tag dan atribut HTML untuk menjelaskan struktur dan format sebuah halaman web. 

HTML terdiri dari berbagai elemen yang berfungsi untuk memberi tahu mesin pencari cara menampilkan konten halaman. Tag HTML mendefinisikan bagian-bagian berbeda dari konten, seperti heading (judul), daftar, gambar, tautan, dan elemen lainnya.

Dengan menggunakan tag dan atribut ini, HTML membantu web developer untuk menyusun dan menyajikan konten secara terstruktur, sehingga memudahkan mesin pencari dan browser untuk memahami dan menampilkan halaman tersebut dengan benar.

Bagaimana Sejarah HTML?

HTML (HyperText Markup Language) pertama kali dikembangkan oleh Tim Berners-Lee pada akhir 1980-an dan awal 1990-an saat bekerja di CERN, sebuah organisasi penelitian fisika di Swiss. 

Tujuan dibuatnya HTML pada pertama kalinya adalah untuk mempermudah para ilmuwan berbagi dokumen dengan mudah melalui internet. Versi pertama HTML, yang dikenal sebagai HTML 1.0, dirilis pada tahun 1993. 

Sejak itu, HTML terus berkembang melalui berbagai versi, dengan penambahan elemen, atribut, dan kemampuan baru untuk mendukung desain dan fungsi web yang semakin kompleks. 

HTML 4.01, dirilis pada tahun 1999, menjadi standar utama untuk waktu yang lama sebelum HTML5 diperkenalkan pada tahun 2014 dengan fitur-fitur canggih seperti dukungan untuk multimedia tanpa perlu plugin tambahan. 

Hingga saat ini, HTML5 masih menjadi versi terbaru dan paling banyak digunakan dan tetap menjadi andalan developer dalam pembuatan halaman web yang lebih interaktif dan responsif.

Apa saja Fungsi HTML?

HTML memiliki banyak kegunaan dalam proses pembuatan website. Lantas apa saja fungsi HTML secara lengkap? Yuk simak penjelasannya berikut ini.

Berikut adalah fungsi HTML berdasarkan penjelasan dari builtin berikut ini.

1. Menyusun Struktur Halaman Web

HTML digunakan untuk memberikan struktur pada sebuah halaman web, termasuk teks, gambar, dan konten lainnya. 

Melalui elemen dan tag, HTML memastikan bahwa setiap bagian dari halaman memiliki tempat dan fungsi yang jelas, sehingga browser dapat menampilkan konten tersebut dengan cara yang terorganisir dan mudah diakses.

2. Menampilkan Format Visual

HTML berfungsi mendefinisikan format visual dari sebuah halaman web. Ini mencakup penentuan gaya teks, paragraf, daftar, tabel, dan elemen visual lainnya yang membentuk tampilan keseluruhan halaman web.HTML bekerja bersama CSS untuk memberikan gaya dan tata letak yang lebih rinci.

3. Memberikan Konteks untuk Mesin Pencari

HTML menyediakan konteks yang penting bagi mesin pencari mengenai isi dan struktur halaman web. 

Tag dan atribut HTML membantu mesin pencari memahami konten dan relevansi halaman, yang sangat penting untuk pengindeksan dan peringkat dalam hasil pencarian.

4. Menetapkan Bagian-bagian Halaman

HTML digunakan untuk mendefinisikan dan menetapkan berbagai bagian dari halaman web, seperti header, footer, artikel, navigasi, dan lainnya. 

Dengan menggunakan elemen semantik seperti `<header>`, `<footer>`, `<article>`, dan `<nav>`, HTML membantu menciptakan halaman web yang lebih terstruktur dan mudah dipahami baik oleh pengguna maupun mesin pencari. 

Selain itu, pada HTML5, ada beberapa peningkatan kemampuan termasuk API canggih, penyimpanan sisi klien melalui localStorage dan IndexedDB, dukungan untuk entri data, penggunaan aplikasi offline melalui caching, dan bahkan pengembangan game.

Beberapa fungsi HTML tersebut sangat penting untuk pembuatan website yang responsive, user friendly, dan SEO friendly.

Cara Kerja HTML

Penasaran mengenai bagaimana cara kerja HTML? Yuk simak pembahasannya berikut ini.

HTML bekerja dengan cara memberitahu browser bahwa konten akan ditampilkan di halaman web. Ketika sebuah halaman web dimuat, browser membaca dokumen HTML yang berisi berbagai elemen, yang terdiri dari tag pembuka, konten, dan tag penutup. 

Setiap elemen memberikan struktur dan format pada konten, seperti teks, gambar, dan tautan. Atribut yang ditambahkan pada elemen memberikan informasi tambahan, seperti URL untuk tautan atau sumber gambar. 

Browser menggunakan informasi ini untuk menampilkan halaman dengan tata letak yang sesuai, memastikan konten terlihat terorganisir dan dapat diakses oleh pengguna. 

Singkatnya, HTML adalah bahasa pemrograman yang mengatur bagaimana konten web ditampilkan di browser.

Apa saja Struktur Dasar HTML?

Saat mulai belajar HTML, Sobat MinDi harus memahami struktur dasar HTML yang membantu proses kerjanya. Lantas apa saja struktur dasar HTML yang wajib dipelajari?

1. Tag

Tag adalah komponen dasar HTML yang digunakan untuk membuat elemen. Tag ditulis dalam kurung sudut `< >` dan terdiri dari tag pembuka dan tag penutup. Misalnya, tag `<p>` digunakan untuk membuat paragraf, tag `<h1>` digunakan untuk membuat heading tingkat satu, dan tag `<a>` digunakan untuk membuat tautan. 

Tag pembuka biasanya ditulis sebagai `<tagname>`, sedangkan tag penutup ditulis sebagai `</tagname>`. Beberapa tag, seperti `<img>` untuk gambar dan `<br>` untuk baris baru, tidak memerlukan tag penutup. 

Tag memberitahu browser tentang proses menampilkan konten yang berada di antara tag pembuka dan penutup.

2. Elemen

Elemen HTML adalah kombinasi dari tag pembuka, konten, dan tag penutup. Elemen adalah unit dasar dari dokumen HTML yang menentukan struktur dan isi halaman web. 

Contoh elemen adalah `<p>This is a paragraph.</p>`, di mana `<p>` adalah tag pembuka, "This is a paragraph." adalah konten, dan `</p>` adalah tag penutup.

Elemen dapat berisi teks, elemen lain, atau atribut. Elemen juga bisa bersarang, yang berarti satu elemen bisa berisi elemen lain di dalamnya. 

Sebagai contoh, elemen `<div><p>This is a paragraph inside a div.</p></div>` menunjukkan elemen `<p>` yang berada di dalam elemen `<div>`. 

Dengan menggunakan elemen yang bersarang, developer dapat membuat struktur dokumen yang kompleks dan terorganisir dengan baik.

3. Atribut

Atribut adalah informasi tambahan yang diberikan pada elemen HTML untuk memberikan lebih banyak detail tentang elemen tersebut. Atribut ditempatkan di dalam tag pembuka dan biasanya terdiri dari pasangan nama-nilai (name-value pair). 

Contoh atribut adalah `href` dalam tag `<a>` yang digunakan untuk menentukan URL tujuan tautan, `src` dalam tag `<img>` yang digunakan untuk menentukan sumber gambar, dan `class` yang dapat digunakan di berbagai tag elemen untuk menetapkan kelas CSS yang diterapkan pada elemen tersebut. 

Dengan memahami struktur dasar HTML meliputi tag, elemen, dan atribut, kita dapat membuat dan mengatur konten halaman web secara efektif menggunakan HTML.  

Melalui pemahaman tersebut, seorang developer dapat membangun halaman web yang terstruktur dan mudah dibaca, baik oleh pengguna maupun mesin pencari. 

Baca Juga: Shortcut Belajar NextJS Typescript dengan basic HTML, CSS dan JS

Contoh Struktur HTML Dasar

Setelah memahami tentang struktur dasar HTML, yuk langsung saja simak contoh struktur HTML berikut ini, agar Sobat MinDi makin memahaminya!

Berikut adalah contoh sederhana dari struktur HTML dasar:

Dalam contoh di atas:

1. <!DOCTYPE html> adalah deklarasi tipe dokumen.
2. <html> adalah elemen root yang mencakup seluruh konten HTML.
3. <head> berisi meta-informasi tentang dokumen, seperti <title>.
4. <body> berisi konten yang akan ditampilkan di halaman web, seperti heading, paragraf, dan tautan.

 Cara Membuat HTML secara Mudah bagi Pemula

Sobat MinDi ingin memulai membuat HTML? Bingung harus mulai dari mana? Yuk simak cara membuat HTML bagi pemula versi MinDi berikut ini, simak step by stepnya ya!

1. Siapkan Teks Editor

Langkah pertama adalah menyiapkan teks editor untuk menulis kode HTML. Kamu bisa menggunakan teks editor sederhana yang sudah ada di komputer, seperti Notepad di Windows atau TextEdit di Mac. 

Untuk pengalaman yang lebih baik, kamu bisa mendownload editor kode khusus seperti Visual Studio Code atau Sublime Text, yang menawarkan fitur tambahan seperti penyorotan sintaks dan auto-completion.

2. Buat Dokumen HTML Dasar

Mulailah dengan membuat dokumen HTML dasar. Buka teks editor dan ketikkan kode berikut:

Simpan file ini dengan ekstensi `.html`, misalnya `index.html`.

3. Buka di Browser

Setelah menyimpan file, buka browser (seperti Chrome, Firefox, atau Edge) dan buka file HTML yang telah kamu buat. 

Caranya bisa dengan klik kanan pada file dan pilih "Open with" lalu pilih browser, atau bisa juga drag dan drop file langsung ke jendela browser. 

Sobat MinDi akan melihat halaman web sederhana dengan teks "Hello, World!" dan paragraf "This is my first webpage."

4. Pelajari Tag Dasar HTML

   Pelajari beberapa tag HTML dasar yang sering digunakan:

1. `<h1>` hingga `<h6>` untuk judul atau heading
2. `<p>` untuk paragraf
3. `<a href="URL">` untuk membuat tautan
4. `<img src="image.jpg" alt="Description">` untuk menampilkan gambar
5. `<ul>`, `<ol>`, dan `<li>` untuk membuat daftar (unordered list, ordered list, dan list item)

5. Modifikasi dan Eksperimen

Cobalah untuk memodifikasi dan bereksperimen dengan kode HTML yang telah kamu buat. Tambahkan lebih banyak elemen, ubah teks, tambahkan gambar, atau buat tautan ke halaman lain. 

Praktik langsung adalah cara terbaik untuk belajar. Kamu bisa mencari referensi tambahan atau contoh kode di situs web seperti W3Schools atau MDN Web Docs untuk memahami lebih lanjut cara kerja HTML.

Dengan mengikuti langkah-langkah ini, Sobat MinDi akan dapat membuat dan memahami dasar-dasar HTML dengan mudah dan cepat. Teruslah berlatih dan bereksperimen untuk meningkatkan kemampuanmu dalam membuat halaman web.

Baca Juga: Belajar HTML: Pahami Materi HTML untuk Pemula Web Developer

Ingin Belajar HTML lebih lanjut? Yuk Ikuti Bootcamp Dibimbing.id

Sobat MinDi, itulah beberapa penjelasan mengenai HTML yang perlu dipelajari dan dipahami, ingat bahwa belajar HTML merupakan langkah awal dalam pengembangan website.

Kesimpulannya, HTML adalah bahasa markup standar yang digunakan untuk membuat dan menstrukturkan konten halaman web di internet.

Ingin belajar lebih lanjut tentang HTML dalam pengembangan website?

Yuk ikuti bootcamp web developer dibimbing.id, sebuah bootcamp terbaik dengan pembelajaran inovatif dan intensif. Bootcamp ini didampingi oleh mentor profesional dan terbaik yang bakal bantu kamu jadi web developer sukses.

Belum memiliki pengalaman tentang pengembangan web sama sekali?

Tenang saja, dibimbing.id siap bimbing kamu mulai dari nol, dengan kurikulum terlengkap, update serta beginner friendly. 

Sebanyak 94% alumni bootcamp dibimbing.id telah berhasil mendapatkan kerja sesuai bidang mereka. Nah, jangan khawatir nganggur setelah lulus bootcamp ya, dibimbing.id juga menyediakan job connect ke 570+ hiring partner khusus buat Sobat MinDi.

Tunggu apalagi? buruan konsultasi di sini, apapun tujuan karirmu dibimbing.id siap #BimbingSampeJadi karir impianmu.

Reference:

1. HTML Introduction - Buka
2. What Is HTML? (Definition, Uses, Syntax, Examples) - Buka