Apakah kamu tertarik ingin menjadi Web Developer? Jika iya, kamu berada di tempat yang tepat. Karena dalam artikel ini, kita akan membahas tentang tag HTML dilengkapi fungsi dan contoh penggunaannya. HTML sendiri merupakan salah satu keterampilan yang wajib kamu kuasai sebagai seorang web developer. Tapi sebelum itu, apa itu HTML?
HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. Untuk membuat halaman web yang menarik, kamu perlu mengetahui tag HTML yang berguna untuk memformat dan mengorganisir konten di halaman webmu.
Yuk langsung saja, berikut ini adalah beberapa tag HTML yang penting untuk dipelajari dan bisa langsung kamu praktekkan sendiri.
Daftar Isi
Tag HTML dilengkapi Fungsi dan Contoh Penggunaannya
Tag Dasar HTML yang Termasuk ke dalam Fundamental
Tag Dasar HTML adalah kumpulan elemen atau tag yang digunakan sebagai fondasi atau dasar dalam membuat halaman web menggunakan bahasa pemrograman HTML (Hypertext Markup Language).
| No | Nama Tag | Fungsi |
| 1 | <! DOCTYPE html> | Deklarasi untuk mendefinisikan dokumen menjadi HTML |
| 2 | <html> | Tag pembuka untuk membuat dokumen HTML |
| 3 | <head> | Informasi meta tentang dokumen |
| 4 | <title> | Membuat judul halaman yang nantinya akan ditampilkan di browser |
| 5 | <body> | Tempat dibuatnya semua konten website menggunakan HTML |
Berikut adalah contoh penggunaan tag dasar HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Judul pertamaku</h1>
<p>Paragraf pertamaku.</p>
</body>
</html>
Tag HTML Membuat Judul
Tag <h1> hingga <h6> digunakan untuk membuat judul dengan tingkat kepentingan yang berbeda.
| No | Nama Tag | Fungsi |
|---|---|---|
| 1 | <h1> s/d <h6> | Membuat judul atau judul heading |
| 2 | <hr> | Memisahkan konten dengan garis pemisah |
Berikut adalah contoh penggunaan tag-tag heading dalam kode HTML:
<!DOCTYPE html>
<html>
<body>
<h1>Ini adalah judul 1</h1>
<p>Ini adalah beberapa teks.</p>
<hr>
<h2>Ini adalah judul 2</h2>
<p>Ini adalah teks lainnya.</p>
<hr>
<h2>Ini adalah judul 2</h2>
<p>Ini adalah teks lainnya.</p>
</body>
</html>
Tag HTML untuk Membuat Paragraf
Tag <p> berfungsi untuk mengelompokkan teks menjadi paragraf terpisah, dan secara otomatis menambahkan jarak antara paragraf satu dan paragraf berikutnya.
| No | Nama Tag | Fungsi |
|---|---|---|
| 1 | <p> | Membuat paragraf |
| 2 | <br> | Membuat baris baru |
| 3 | <pre> | Memformat teks atau kalimat |
Contoh penggunaanya tag paragraf sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Tag HTML</title>
</head>
<body>
<p>Ini adalah contoh paragraf pertama.</p>
<p>Ini adalah contoh paragraf kedua.</p>
Ini adalah baris pertama.<br>
Ini adalah baris kedua.
<pre>
Ini adalah teks yang
ingin ditampilkan
dengan format yang konsisten.
</pre>
</body>
</html>
Tag Style
Tag <style> dalam HTML digunakan untuk menentukan gaya atau tampilan visual dari elemen-elemen dalam dokumen HTML. Dengan menggunakan tag <style>, Kamu dapat mengaplikasikan aturan CSS (Cascading Style Sheets) secara internal dalam halaman web, yang akan mempengaruhi tampilan dan layout elemen-elemen HTML di dalamnya.
| No | Nama Tag | Fungsi |
|---|---|---|
| 1 | <style> | Atribut untuk elemen styling pada HTML |
| 2 | background-color | Memberikan warna latar belakang |
| 3 | color | Memberi warna pada teks |
| 4 | font-family | Mengubah font pada teks |
| 5 | font-size | Mengatur ukuran font |
| 6 | text-align | Mengatur perataan teks |
Contoh penggunaan sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Tag Style HTML</title>
</head>
<body>
<h1 style="color: crimson;">Judul Halaman</h1>
<p style="background-color: yellow;">Teks dengan latar belakang kuning.</p>
<p style="color: green;">Teks dengan warna hijau.</p>
<p style="font-family: 'Courier New', monospace;">Teks dengan jenis font Courier New.</p>
<p style="font-size: 20px;">Teks dengan ukuran font 20px.</p>
<p style="text-align: right;">Teks yang diperatakan ke kanan.</p>
</body>
</html>
Tag Formating
Tag Formating dalam HTML digunakan untuk mengubah atau memformat tampilan teks pada halaman web. Tag ini memungkinkan Kamu untuk memberikan gaya tertentu pada teks, seperti membuatnya tebal, miring, atau menekankan pentingnya teks tersebut. Selain itu, tag-formatting juga digunakan untuk menandai bagian teks yang memiliki arti khusus, seperti istilah teknis atau kutipan.
| No | Nama Tag | Fungsi |
|---|---|---|
| 1 | <b> | Membuat teks tebal |
| 2 | <strong> | Membuat teks penting |
| 3 | <i> | Membuat teks miring |
| 4 | <em> | Membuat teks ditekankan |
| 5 | <mark> | Membuat teks ditandai |
| 6 | <small> | Membuat teks kecil |
| 7 | <del> | Teks dihapus |
| 8 | <ins> | Teks dimasukan |
| 9 | <sub> | Teks subscript |
| 10 | <sup> | Teks superscript |
Contoh Penggunaannya:
<!DOCTYPE html>
<html>
<body>
<p><b>Teks ini tebal</b></p>
<p><i>Teks ini miring</i></p>
<p><sup>Teks ini superscript</sup> dan <sub>Teks ini subscript</sub></p>
</body>
</html>
Tag Gambar
Tag Gambar dalam HTML direpresentasikan oleh elemen <img>, digunakan untuk menampilkan gambar dalam halaman web. Elemen ini memiliki berbagai atribut yang memungkinkan kita untuk mengontrol tampilan dan interaksi gambar.
| No | Nama Tag | Fungsi |
|---|---|---|
| 1 | <img> | Elemen untuk mendefinisikan gambar |
| 2 | src | Atribut untuk menentukan URL gambar |
| 3 | alt | Mendefinisikan teks alternatif gambar |
| 4 | width | Menentukan lebar gambar |
| 5 | height | Menentukan tinggi gambar |
| 6 | float | Properti untuk mengapungkan gambar pada teks |
| 7 | <map> | Elemen untuk mendefinisikan gambar peta |
| 8 | <area> | Elemen untuk mendefinisikan area atau daerah gambar pada peta |
| 9 | <picture> | Elemen untuk menampilkan gambar yang berbeda untuk perangkat yang berbeda |
Contoh penggunaan tag gambar:
<!DOCTYPE html>
<html>
<body>
<h2>Contoh Penggunaan Tag Gambar</h2>
<img src="gambar.jpg" alt="Deskripsi Gambar" width="300" height="200">
</body>
</html>Tag Form
Tag Form dalam HTML digunakan untuk membuat formulir interaktif yang mengumpulkan input dari pengguna. Formulir ini dapat mencakup berbagai jenis input seperti teks, angka, pilihan, dan banyak lagi.
| No | Nama Tag | Fungsi |
|---|---|---|
| 1 | <form> | Membuat formulir untuk mengumpulkan input pengguna |
| 2 | <input> | Membuat elemen input seperti teks, angka, dan lainnya |
| 3 | <textarea> | Elemen untuk mendefinisikan area input teks panjang |
| 4 | <label> | Memberikan label pada elemen input untuk deskripsi |
| 5 | <fieldset> | Mengelompokkan elemen-elemen dalam sebuah form |
| 6 | <select> | Membuat input dengan pilihan dalam list dropdown |
| 7 | <optgroup> | Mengelompokkan beberapa pilihan dalam daftar pilihan |
| 8 | <option> | Mendefinisikan opsi yang bisa dipilih dalam dropdown |
| 9 | <button> | Membuat tombol untuk mengirimkan formulir |
| 10 | <datalist> | Membuat daftar pilihan untuk input teks |
| 11 | <output> | Menampilkan hasil dari perhitungan atau proses |
Berikut adalah contoh penggunaannya:
<!DOCTYPE html>
<html>
<body>
<h2>Contoh Penggunaan Tag Form</h2>
<form action="/submit.php" method="post">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="pesan">Pesan:</label><br>
<textarea id="pesan" name="pesan" rows="4" cols="50"></textarea><br><br>
<button type="submit">Kirim</button>
</form>
<h2>Contoh Penggunaan Tag Select dan Option</h2>
<label for="buah">Pilih Buah Favorit:</label>
<select id="buah" name="buah">
<option value="apel">Apel</option>
<option value="jeruk">Jeruk</option>
<option value="mangga">Mangga</option>
</select>
</body>
</html>
Tag Tabel
Tag Tabel dalam HTML digunakan untuk membuat struktur tabel pada halaman web. Tabel ini dapat berisi baris dan kolom yang berisi data, teks, atau elemen lainnya.
| No | Nama Tag | Fungsi |
|---|---|---|
| 1 | <table> | Membuat elemen utama tabel pada halaman web |
| 2 | <tr> | Membuat baris dalam tabel |
| 3 | <td> | Membuat sel (kolom) dalam tabel |
| 4 | <th> | Membuat sel (kolom) judul pada tabel |
| 5 | <caption> | Membuat judul tabel |
| 6 | border | Atribut untuk mengatur garis tabel |
| 7 | border-collapse | Atribut untuk mengatur batas garis antar sel dalam tabel |
| 8 | padding | Atribut untuk mengatur ruang padding pada sel dalam tabel |
| 9 | text-align | Atribut untuk mengatur perataan teks dalam sel |
| 10 | border-spacing | Atribut untuk mengatur jarak spasi antar garis dalam tabel |
| 11 | colspan | Atribut untuk menggabungkan beberapa kolom dalam satu sel |
| 12 | rowspan | Atribut untuk menggabungkan beberapa baris dalam satu sel |
| 13 | id | Atribut untuk memberikan identifikasi pada tabel atau sel |
Berikut adalah contoh penggunaan tag tabel:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h2>Contoh Penggunaan Tag Tabel</h2>
<table>
<caption>Data Mahasiswa</caption>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Nilai</th>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>92</td>
</tr>
</table>
</body>
</html>
Tag List / Daftar
Tag Daftar/ List dalam HTML digunakan untuk membuat berbagai jenis daftar dalam halaman web, termasuk daftar dengan bullet points, daftar dengan nomor, dan daftar deskripsi.
| No | Nama Tag | Fungsi |
|---|---|---|
| 1 | <ul> | Membuat daftar dengan simbol seperti bullet points |
| 2 | <ol> | Membuat daftar dengan nomor, huruf, atau angka romawi |
| 3 | <li> | Menentukan item dalam daftar |
| 4 | <dl> | Mendefinisikan daftar deskripsi |
| 5 | <dt> | Mendefinisikan istilah dalam daftar deskripsi |
| 6 | <dd> | Menggambarkan istilah dalam daftar deskripsi |
| 7 | type | Atribut untuk menentukan jenis penomoran pada daftar berurutan |
Contoh penggunaan tag daftar:
<!DOCTYPE html>
<html>
<body>
<h2>Contoh Penggunaan Tag Daftar/ List</h2>
<h3>Daftar dengan Bullet Points</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Daftar dengan Nomor</h3>
<ol>
<li>Langkah 1</li>
<li>Langkah 2</li>
<li>Langkah 3</li>
</ol>
<h3>Daftar Deskripsi</h3>
<dl>
<dt>HTML</dt>
<dd>Bahasa markup untuk membuat halaman web</dd>
<dt>CSS</dt>
<dd>Bahasa untuk mengatur tampilan dan gaya halaman web</dd>
</dl>
</body>
</html>
Penutup
Semoga artikel ini bermanfaat bagi Kamu yang ingin mempelajari dasar-dasar tag HTML. Dengan menguasai tag-tag tersebut, Kamu akan memiliki pondasi yang kuat dalam membangun halaman web yang menarik dan fungsional. Ingatlah bahwa HTML adalah bahasa markup yang esensial dalam pengembangan web, dan memahaminya adalah langkah awal yang penting jika Kamu ingin menjadi Web Developer.
Terima kasih telah membaca artikel ini. Selamat belajar dan semoga sukses dalam perjalanan Kamu sebagai seorang Web Developer!
