HTML (Hypertext Markup Language) merupakan sebuah bahasa pemrograman yang dipakai dalam pembuatan halaman web. Salah satu fitur utama dari HTML adalah tag, yang digunakan untuk mengelompokkan dan memformat konten di dalam dokumen HTML. Ada banyak macam-macam tag HTML yang tersedia, masing-masing dengan fungsi dan tujuan yang berbeda.
Dalam artikel ini, kami akan menjelajahi beberapa macam tag HTML yang paling umum digunakan dan bagaimana cara menggunakannya untuk membuat halaman web yang efektif dan efisien. Namun sebelumnya telah dibahas artikel tentang fungsi tag HTML yang penting untuk dipahami sebelum membaca artikel ini. Dalam artikel ini, akan dijelaskan lebih detail mengenai berbagai tag HTML yang dapat digunakan untuk membuat halaman web yang menarik dan interaktif.
Macam-Macam Tag HTML
Berikut ini beberapa macam tag HTML yang biasa digunakan dalam pembuatan website.
1. Tag Dasar HTML yang Termasuk ke dalam Fundamental
Tag dasar HTML yang termasuk dalam fundamental atau dasar adalah tag yang umum digunakan pada setiap halaman web. Berikut adalah beberapa tag dasar HTML beserta contoh penggunaannya:
- <!DOCTYPE html>: Tag ini digunakan untuk menentukan tipe dokumen HTML. Contoh: `<!DOCTYPE html>`
- <html>: Tag ini digunakan untuk menandai awal dan akhir halaman web. Contoh: `<html>…</html>`
- <head>: Tag ini digunakan untuk menyediakan informasi meta pada dokumen HTML, seperti judul dan metadata. Contoh: `<head><title>Judul Halaman</title></head>`
- <title>: Tag ini digunakan untuk menentukan judul halaman web. Contoh: `<title>Judul Halaman</title>`
- <body>: Tag ini digunakan untuk menentukan isi halaman web. Contoh: `<body>…</body>`
2. Tag HTML untuk Judul
Tag HTML yang digunakan untuk membuat judul pada halaman web adalah tag <title>. Tag ini diletakkan di dalam tag <head> pada dokumen HTML dan digunakan untuk menentukan judul halaman yang akan ditampilkan pada tab browser. Contohnya seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<!– isi halaman web –>
</body>
</html>
Pada contoh di atas, tag <title> digunakan untuk menentukan judul halaman web dengan teks “Judul Halaman”. Ketika halaman web dibuka pada browser, maka judul tersebut akan ditampilkan pada tab browser.
Baca juga: Memahami Fungsi Tag HTML Pada Website
3. Tag HTML untuk Paragraf
Tag HTML yang digunakan untuk membuat paragraf pada halaman web adalah tag <p>. Tag ini digunakan untuk menandai awal dan akhir dari sebuah paragraf pada dokumen HTML. Contohnya seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<p>Ini adalah contoh paragraf.</p>
<p>Ini adalah paragraf kedua.</p>
<!– isi halaman web –>
</body>
</html>
Pada contoh di atas, tag <p> digunakan untuk menandai awal dan akhir dari paragraf pertama dan kedua pada halaman web. Setiap teks yang diletakkan di antara tag <p> dan </p> akan dianggap sebagai satu paragraf pada halaman web.
4. Tag Style
Tag HTML <style> digunakan untuk menentukan gaya atau tampilan dari elemen HTML pada halaman web. Tag ini diletakkan di dalam tag <head> pada dokumen HTML dan biasanya digunakan bersamaan dengan Cascading Style Sheets (CSS). Dengan menggunakan tag <style>, kita dapat menentukan warna, ukuran, jenis huruf, dan banyak lagi gaya yang ingin diterapkan pada elemen HTML. Contohnya seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
p {
font-size: 16px;
color: blue;
}
h1 {
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<h1>Ini adalah judul halaman</h1>
<p>Ini adalah contoh paragraf.</p>
<!– isi halaman web –>
</body>
</html>
Pada contoh di atas, tag <style> digunakan untuk menentukan gaya pada elemen <p> dan <h1>. Dalam hal ini, <p> akan diberi ukuran huruf 16px dan warna biru, sedangkan <h1> akan diberi ukuran huruf 24px dan warna merah.
Baca juga: Meta Description: Pengertian, Manfaat dan Cara Membuatnya
5. Tag Formatting
Terdapat tag HTML yang digunakan untuk memformat atau mengatur tampilan elemen pada halaman web, seperti tag <b> untuk teks tebal, <i> untuk teks miring, <u> untuk teks bergaris bawah, dan masih banyak lagi.
Dalam HTML, tag-tag tersebut disebut dengan tag formatting atau tag style. Tag-tag tersebut digunakan untuk memberikan efek tertentu pada teks atau elemen HTML yang diaplikasikan. Contohnya, tag <b> akan memberikan efek tebal pada teks yang diberikan, sedangkan tag <i> akan memberikan efek miring pada teks yang diberikan.
Berikut ini adalah beberapa contoh tag formatting yang sering digunakan pada HTML:
- <b> untuk teks tebal
- <i> untuk teks miring
- <u> untuk teks bergaris bawah
- <s> untuk teks yang ingin dibuat coret
- <sup> untuk membuat teks menjadi superscript (teks kecil di atas teks biasa)
- <sub> untuk membuat teks menjadi subscript (teks kecil di bawah teks biasa)
- <small> untuk membuat teks menjadi lebih kecil
- <big> untuk membuat teks menjadi lebih besar
- <em> untuk memberikan penekanan pada teks
- <strong> untuk memberikan penekanan yang lebih kuat pada teks
Tag formatting tersebut dapat digunakan pada hampir semua elemen HTML, seperti <p>, <h1>, <span>, dan lain sebagainya.
6. Tag Gambar
Tag HTML <img> digunakan untuk menampilkan gambar pada halaman web. Tag ini tidak memerlukan tag penutup dan harus selalu memiliki atribut src yang menunjukkan lokasi atau URL gambar yang ingin ditampilkan.
Berikut adalah sintaks dari tag gambar:
<img src=”url_gambar” alt=”teks_alternatif” width=”lebar” height=”tinggi”>
- src: atribut yang wajib ada dan digunakan untuk menunjukkan lokasi atau URL gambar.
- alt: atribut opsional yang berisi teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat atau jika pengguna menggunakan pembaca layar.
- width: atribut opsional yang digunakan untuk menentukan lebar gambar dalam piksel.
- height: atribut opsional yang digunakan untuk menentukan tinggi gambar dalam piksel.
Contoh penggunaan:
<img src=”https://example.com/gambar.jpg” alt=”Ini adalah gambar” width=”300″ height=”200″>
Pada contoh di atas, tag gambar akan menampilkan gambar yang berada pada URL https://example.com/gambar.jpg dengan teks alternatif “Ini adalah gambar”. Gambar tersebut juga akan diberikan lebar 300 piksel dan tinggi 200 piksel.
7. Tag Form
Tag form dalam HTML (<form>) digunakan untuk membuat sebuah formulir atau kumpulan elemen yang memungkinkan pengguna memasukkan data atau informasi ke dalam halaman web. Tag Form mengelompokkan berbagai elemen seperti input, select, checkbox, radio button, dan tombol ke dalam satu kesatuan yang dapat dikirimkan atau diproses dengan metode HTTP seperti GET atau POST.
Berikut adalah sintaks dari tag form:
<form action=”url_proses” method=”GET/POST”>
<!– Elemen formulir –>
</form>
- action: atribut wajib yang menentukan alamat URL tempat data formulir akan dikirimkan atau diproses.
- method: atribut opsional yang menentukan metode pengiriman data formulir, yaitu GET atau POST. Metode GET mengirimkan data formulir sebagai query string di URL, sedangkan metode POST mengirimkan data sebagai bagian dari body HTTP request.
Baca juga: Yuk, Kenali Perbedaan HTTP dan HTTPS!
Beberapa elemen umum yang digunakan dalam tag Form adalah sebagai berikut:
- <input>: digunakan untuk memungkinkan pengguna memasukkan data seperti teks, angka, atau pilihan melalui checkbox atau radio button. Atribut type pada input menentukan jenis input yang ingin digunakan, misalnya text untuk input teks, number untuk input angka, checkbox untuk input checkbox, dan lain-lain.
- <textarea>: digunakan untuk memasukkan teks atau informasi lebih panjang.
- <select>: digunakan untuk membuat menu dropdown atau pilihan dengan beberapa opsi yang dapat dipilih pengguna.
- <button>: digunakan untuk membuat tombol yang dapat digunakan pengguna untuk mengirimkan data formulir.
Contoh penggunaan tag form:
<form action=”https://example.com/proses” method=”POST”>
<label for=”nama”>Nama:</label>
<input type=”text” id=”nama” name=”nama”><br><br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”><br><br>
<label for=”pesan”>Pesan:</label>
<textarea id=”pesan” name=”pesan”></textarea><br><br>
<label for=”jenis-kelamin”>Jenis Kelamin:</label>
<input type=”radio” id=”pria” name=”jenis-kelamin” value=”pria”>
<label for=”pria”>Pria</label>
<input type=”radio” id=”wanita” name=”jenis-kelamin” value=”wanita”>
<label for=”wanita”>Wanita</label><br><br>
<button type=”submit”>Kirim</button>
</form>
Pada contoh di atas, tag form digunakan untuk membuat sebuah formulir yang akan mengirimkan data ke URL https://example.com/proses dengan metode POST. Formulir tersebut terdiri dari beberapa elemen seperti input teks untuk nama dan email, textarea untuk pesan, radio button untuk jenis kelamin, dan tombol submit untuk mengirimkan data formulir.
Di era digital yang makin berkembang, penggunaan Layanan Public Cloud menjadi makin penting dalam mempercepat transformasi digital bisnis. Deka Prime dari Cloudeka dapat menjadi pilihan penyedia layanan Public Cloud yang tepat.
Cloudeka menyediakan beragam layanan awan, seperti IaaS, PaaS, dan SaaS, dengan harga yang bersaing dan fitur yang lengkap. Selain itu, Cloudeka juga menyediakan dukungan teknis yang andal dan layanan manajemen awan yang terintegrasi. Jangan ragu untuk mencoba Layanan Public Cloud dari Cloudeka agar dapat mempercepat transformasi digital bisnis Anda. Untuk informasi lebih lanjut tentang layanan yang ditawarkan, jangan ragu untuk menghubungi kami sekarang.
