Jika kamu baru memulai perjalanan sebagai web developer, atau bahkan jika kamu sudah berpengalaman, mengenali dan menguasai tag HTML adalah hal yang sangat penting. HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk menyusun struktur halaman web, dan tag HTML merupakan bagian dasar yang akan membantumu mengatur konten di halaman tersebut. Dalam artikel ini, kita akan membahas beberapa tag HTML yang wajib dikuasai oleh setiap web developer, baik pemula maupun yang sudah berpengalaman.
baca juga:Open Source vs Software Berbayar: Pilih Mana?
Mengapa Memahami Tag HTML Itu Penting?
Sebelum melangkah lebih jauh, penting untuk memahami mengapa tag HTML memiliki peran krusial dalam pembuatan website. Tag HTML adalah elemen dasar yang digunakan untuk menyusun konten di halaman web, mulai dari teks, gambar, hingga tautan dan form. Tanpa pemahaman yang baik tentang tag-tag ini, kamu akan kesulitan membangun struktur website yang efisien dan terorganisir dengan baik.
Apa Saja Tag HTML yang Harus Dikuasai?
Berikut adalah beberapa tag HTML yang wajib kamu ketahui untuk memulai perjalananmu sebagai web developer:
1. Tag HTML Dasar: Struktur Halaman Web
Setiap halaman HTML memiliki struktur dasar yang harus dipatuhi. Berikut adalah tag HTML yang digunakan untuk membangun struktur dasar halaman web:
<!DOCTYPE html>: Menandakan bahwa dokumen ini menggunakan HTML5.<html>: Tag pembungkus untuk seluruh halaman web.<head>: Tempat di mana informasi meta dan judul halaman ditempatkan.<title>: Memberikan nama atau judul untuk halaman yang akan muncul di tab browser.<body>: Bagian utama dari halaman yang berisi konten yang akan terlihat oleh pengunjung, seperti teks, gambar, dan tautan.
Contoh struktur HTML dasar:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Selamat datang di website saya!</h1>
<p>Ini adalah halaman pertama saya yang saya buat dengan HTML.</p>
</body>
</html>
2. Tag untuk Menambahkan Teks: Judul dan Paragraf
Tag HTML yang digunakan untuk menampilkan teks sangat penting. Beberapa tag yang paling sering digunakan adalah:
<h1>hingga<h6>: Digunakan untuk membuat heading atau judul.<h1>adalah judul utama dan biasanya digunakan di bagian atas halaman.<p>: Tag untuk membuat paragraf. Ini adalah cara untuk menambahkan teks biasa di dalam halaman.<strong>dan<em>: Masing-masing digunakan untuk menambahkan penekanan pada teks dengan tebal atau miring.
Contoh penggunaan tag teks:
htmlCopyEdit<h1>Ini adalah Judul Utama</h1>
<h2>Ini adalah Subjudul</h2>
<p>Ini adalah paragraf pertama saya di website ini.</p>
<p><strong>HTML</strong> adalah bahasa dasar untuk membuat website.</p>
<p>Belajar <em>HTML</em> sangat menyenangkan!</p>
3. Tag untuk Menambahkan Gambar dan Tautan
Gambar dan tautan adalah elemen penting yang akan membuat website lebih menarik dan informatif. Berikut adalah tag yang digunakan untuk menambahkannya:
<img>: Digunakan untuk menampilkan gambar. Atributsrcmenunjukkan lokasi gambar, danaltmemberikan deskripsi alternatif jika gambar gagal dimuat.<a>: Digunakan untuk membuat tautan. Atributhrefberisi URL tujuan yang ingin kamu tautkan.
Contoh penggunaan tag gambar dan tautan:
htmlCopyEdit<img src="gambar.jpg" alt="Gambar Contoh">
<a href="https://www.example.com">Klik di sini untuk mengunjungi website lainnya</a>
4. Tag untuk Membuat List dan Tabel
List dan tabel sangat berguna untuk menyusun informasi secara terstruktur. HTML menyediakan tag untuk membuat keduanya.
<ul>: Digunakan untuk membuat unordered list (list tanpa urutan), dan setiap item dalam list ditandai dengan tag<li>.<ol>: Digunakan untuk membuat ordered list (list yang terurut).<table>: Digunakan untuk membuat tabel. Tabel terdiri dari tag<tr>untuk baris,<td>untuk data, dan<th>untuk header tabel.
Contoh penggunaan list dan tabel:
htmlCopyEdit<ul>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ul>
<ol>
<li>Langkah pertama</li>
<li>Langkah kedua</li>
<li>Langkah ketiga</li>
</ol>
<table border="1">
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>
5. Tag untuk Formulir dan Input Pengguna
Jika kamu ingin website yang lebih interaktif, kamu harus mengenal tag untuk membuat formulir. Formulir memungkinkan pengunjung untuk mengirimkan data melalui website.
<form>: Digunakan untuk membuat formulir.<input>: Digunakan untuk membuat berbagai jenis input, seperti teks, email, dan tombol.<button>: Digunakan untuk membuat tombol yang bisa diklik.
Contoh penggunaan formulir:
htmlCopyEdit<form action="/submit" method="POST">
<label for="name">Nama:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit">Kirim</button>
</form>
baca juga:Belajar Coding Itu Gampang, Teknologi Bisa Bantu!
Apa Lagi yang Harus Dikuasai oleh Web Developer?
Selain tag-tag dasar di atas, ada beberapa tag HTML lainnya yang perlu kamu pelajari lebih lanjut, seperti:
- Tag untuk Media
Seperti<video>dan<audio>untuk menampilkan konten multimedia di halaman web. - Tag untuk Menambahkan Ikon
Menggunakan tag<link>untuk menambahkan favicon (ikon kecil di tab browser). - Tag untuk Menyusun Layout
Tag seperti<div>dan<span>digunakan untuk menyusun layout halaman web, meskipun mereka bukan elemen visual langsung.
penulis: wilda juliansyah