Bagi Anda yang tertarik menjadi Front-end Web Developer, salah satu keterampilan dasar yang wajib Anda kuasai adalah struktur HTML. HTML adalah fondasi dari semua halaman web yang Anda lihat setiap hari.
Melalui artikel ini, Anda akan mendapatkan panduan lengkap, mulai dari pengenalan HTML, jenis-jenis elemen yang sering digunakan, hingga tips membuat struktur HTML yang baik dan rapi.
Mengenal Apa Itu HTML
Sebelum masuk ke pembahasan lebih teknis, Anda perlu tahu apa itu HTML. HyperText Markup Language atau HTML adalah bahasa pemrograman yang digunakan untuk membuat struktur halaman web.
HTML bukan bahasa pemrograman seperti JavaScript, melainkan bahasa markup yang bertugas memberi “kerangka” dan menandai bagian-bagian konten di halaman web.
Misalnya, saat Anda membuka sebuah website, HTML akan menentukan mana bagian judul, paragraf, gambar, atau link.
Penasaran bagaimana HTML bekerja dalam pembuatan website?
Pelajari lebih dalam dengan Kursus Front-end Web Developer di ITBOX dan kuasai pembuatan halaman web dari dasar.
Jadi, tanpa HTML, halaman web tidak akan punya struktur yang jelas dan sulit untuk dibaca browser atau manusia.
Jenis-jenis Elemen HTML
Sekarang Anda sudah tahu apa itu HTML, mari kita lihat elemen-elemen dasar yang sering Anda temui dan gunakan saat membuat halaman web.
1. HTML Header
Header digunakan untuk judul dan subjudul. Contohnya:
<h1>Ini Judul Utama</h1>
<h2>Subjudul</h2>
2. HTML Paragraph
Digunakan untuk menulis teks biasa atau paragraf:
<p>Ini adalah paragraf pertama saya di halaman web.</p>
3. HTML List
Ada dua jenis list, ordered (berurutan) dan unordered (tidak berurutan):
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
</ul>
<ol>
<li>Langkah pertama</li>
<li>Langkah kedua</li>
</ol>
4. HTML Table
Untuk menampilkan data dalam bentuk tabel:
<table border=”1″>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Ani</td>
<td>25</td>
</tr>
</table>
5. HTML Link
Link menghubungkan halaman satu ke halaman lain:
<a href=”https://www.itbox.com”>Kunjungi ITBOX</a>
6. HTML Gambar
Untuk menampilkan gambar di halaman web:
<img src=”gambar.jpg” alt=”Deskripsi gambar”>
Elemen Utama dalam Struktur HTML
Setelah Anda mengenal berbagai elemen dasar. Mari kita lihat elemen utama yang membentuk struktur dasar HTML secara keseluruhan.
1. <!DOCTYPE html>: Mendefinisikan tipe dokumen
Bagian paling atas yang harus ada di setiap halaman HTML. Ini memberitahu browser bahwa halaman menggunakan HTML5, versi terbaru HTML.
<!DOCTYPE html>
2. <html>: Elemen root
Seluruh konten HTML diletakkan di dalam tag <html>. Tag ini adalah akar dari dokumen HTML.
<html>
<!– Semua elemen lain ada di sini →
</html>
3. <head>: Bagian metadata dan pengaturan halaman
Bagian ini berisi informasi penting yang tidak terlihat langsung di halaman, seperti pengaturan karakter, judul, dan link ke file CSS atau JavaScript.
<head>
<meta charset=”UTF-8″>
<title>Judul Halaman</title>
</head>
4. <title>: Judul halaman yang muncul di tab browser
Judul halaman yang muncul di tab browser atau hasil pencarian Google, biasanya terletak di dalam <head>.
<title>Belajar Struktur HTML</title>
5. <body>: Konten utama halaman
Semua isi yang ingin ditampilkan ke pengguna, seperti teks, gambar, dan link, dimasukkan dalam <body>.
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah konten halaman.</p>
</body>
Ambil Kursus Front-end Web Developer di ITBOX dan kuasai HTML serta teknik pengembangan web lainnya!
Tips Membuat Struktur HTML yang Baik
Kalau Anda ingin membuat kode HTML yang rapi dan mudah dipahami, perhatikan beberapa tips berikut ini:
1. Selalu Mulai dengan Deklarasi DOCTYPE
Deklarasi ini wajib ada agar browser dapat membaca halaman dengan benar sesuai standar HTML5.
2. Gunakan Tag yang Semantik dan Sesuai Fungsi
Misalnya, gunakan <header> untuk bagian atas halaman, <nav> untuk navigasi, dan <footer> untuk bagian bawah. Ini membantu SEO dan aksesibilitas.
3. Pastikan Tag Dibuka dan Ditutup dengan Benar
HTML adalah bahasa markup, jadi setiap tag pembuka harus punya tag penutup yang sesuai agar halaman tidak error.
4. Gunakan Indentasi untuk Keterbacaan Kode
Menyusun kode dengan rapi dan indentasi yang konsisten memudahkan Anda dan orang lain membaca dan mengedit kode nantinya.
Belajar Jadi Front-end Web Developer di ITBOX
Menguasai struktur HTML adalah langkah pertama yang sangat penting untuk memulai karier sebagai Front-end Web Developer.
Dengan memahami elemen-elemen dasar dan cara membuat struktur yang baik, Anda akan memiliki fondasi kuat untuk belajar teknologi web lainnya.
ITBOX menawarkan Kursus Front-end Web Developer yang dirancang untuk membantu Anda mempelajari bidang ini secara komprehensif.
Di kursus ITBOX, Anda akan mendapatkan pembelajaran dari dasar hingga mahir dengan metode praktis dan mudah dipahami, cocok untuk pemula hingga yang ingin memperdalam skill.
