66 Tag HTML: Fungsi dan Contoh Lengkapnya
Cari tahu apa saja tag HTML yang sering digunakan lengkap dengan contohnya di sini!
Software Engineering
RevoU Staff
Saat memasuki dunia pengembangan web, salah satu konsep kunci yang akan kamu temui adalah tag HTML.
Dalam membuat website, tag HTML adalah elemen penting untuk membangun struktur dan tampilan konten halaman web. Tag mengatur elemen-elemen seperti judul, paragraf, gambar, dan video.
Setiap elemen dalam halaman web didefinisikan menggunakan tag HTML tertentu. Memahami penggunaan tag HTML ini krusial menjadi dasar dari tampilan dan struktur konten pada halaman web.
Mari kita selami lebih dalam!
Pengertian HTML Tag
Tag HTML adalah elemen dasar yang digunakan untuk membangun struktur dan format konten di halaman web.
Bayangkan kamu sedang membaca sebuah buku. Ada judul, paragraf, gambar, dan mungkin juga kutipan di dalamnya. Di dunia web, setiap komponen tersebut direpresentasikan dengan tag HTML tertentu.
Sebagai contoh, judul direpresentasikan dengan tag < h1 > sampai < h6 >, sementara paragraf dengan tag < p >. Ada banyak juga tag lainnya yang membantu kita mengatur dan menampilkan konten web lebih rapi.
Fungsi Tag HTML
Tag HTML bukanlah sekedar kode yang ditulis di dalam dokumen HTML. Sebaliknya, tag HTML memiliki fungsi yang sangat penting dalam pembuatan laman web. Berikut beberapa fungsi utama dari tag HTML:
Struktur dokumen: seperti yang dijelaskan oleh FreeCodeCamp, tag HTML membantu dalam menyusun struktur dokumen HTML. Mulai dari header sampai footer, setiap bagian dari halaman web dikelilingi oleh tag tertentu. Hal ini membantu browser dalam menafsirkan dan menampilkan konten secara tepat.
Format konten: tag HTML tidak hanya menyusun, tapi juga memformat konten. Misalnya, tag seperti < b > untuk tebal, < i > untuk miring, dan < u > untuk bergaris bawah membantu kita untuk menonjolkan bagian tertentu dari teks.
Menyisipkan media: tag HTML seperti < img > dan < video > memungkinkan kita untuk menyertakan gambar atau video dalam laman web. Fungsi ini membuat laman web menjadi lebih interaktif dan menarik.
Pembuatan link: tag HTML juga ada yang digunakan untuk membuat hyperlink, sehingga kamu dapat berpindah dari satu halaman ke halaman lain. Dengan fungsi ini, web menjadi dinamis dan saling terhubung.
Integrasi dengan CSS dan JavaScript: tag HTML juga berguna sebagai jembatan dengan CSS dan JavaScript. Kita bisa menambahkan gaya dan fungsi interaktif ke halaman web. Proses ini juga membantu dalam meningkatkan user experience.
Aksesibilitas: menurut TutorialsTonight, dengan menggunakan tag seperti < alt > pada gambar, kita dapat menjadikan laman web lebih mudah diakses oleh orang-orang yang memiliki keterbatasan.
Search Engine Optimization (SEO): tag HTML membantu mesin pencari seperti Google dalam mengenali dan menilai konten laman web, sehingga memungkinkan laman tersebut muncul dalam hasil pencarian yang relevan.
Tag HTML Dasar
Berikut sejumlah tag HTML dasar yang sering digunakan dalam pengembangan web:
Contoh penggunaan kode:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Web Sederhana</title>
</head>
<body>
<h1>Selamat Datang di Web Sederhana Saya</h1>
<p>Ini adalah contoh penggunaan tag HTML dasar.</p>
<a href="https://www.example.com">Klik di sini</a> untuk mengunjungi situs contoh.
<br>
<p>Jika Anda ingin mempelajari lebih lanjut,
silakan kunjungi <a href="https://www.learnhtml.com">LearnHTML</a>.</p>
</body>
</html>Output:
Tag HTML untuk Formatting
Tag HTML untuk formatting dipakai untuk mengatur tampilan teks dan konten lain di halaman web. Berikut beberapa tag formatting yang umum digunakan:
Contoh penggunaan kode:
<!DOCTYPE html>
<h2>Penawaran Spesial</h2>
<p>Kini tersedia promo <strong>diskon 20%</strong> untuk semua produk!</p>
<p>Jangan lewatkan kesempatan ini untuk memperoleh perangkat berkualitas.</p>
<p><u>Berlaku hingga akhir bulan ini.</u></p>
</body>
</html>Output:
Tag HTML untuk Membuat Image
Dalam HTML, tag yang khusus digunakan untuk menyisipkan gambar adalah tag < img >. Tag ini memungkinkan kamu menambahkan gambar dalam berbagai format (seperti JPEG, PNG, GIF) ke dalam halaman web.
Berikut penjelasan tentang bagaimana tag ini digunakan:
Tag HTML untuk Gambar:
Tag < img > adalah tag kosong. Artinya, tag ini tidak memiliki tag penutup. Atribut-atribut utama yang digunakan bersamanya adalah:
Contoh penggunaan kode:
<!DOCTYPE html>
<p>Temukan teknologi masa depan dalam genggaman Anda.</p>
<h2>Produk Terbaru</h2>
<div class="product">
<img src="phone.jpg" alt="Smartphone Futura X1"
width="300" height="200" title="Futura X1">
<h3><a href="product1.html">Futura X1 Smartphone</a></h3>
<p>Alami masa depan dengan Futura X1 yang baru.</p>
</div>
</body>
</html>Output:
Tag HTML untuk Membuat Link
Dalam HTML, tag yang digunakan untuk membuat link (tautan) adalah tag < a >. Tag ini memungkinkan kamu menghubungkan satu halaman dengan halaman lain, baik dalam situs yang sama maupun ke website lain.
Berikut cara menggunakannya:
Tag HTML untuk link: < a >
Tag < a > memiliki beberapa atribut utama yang dapat digunakan, seperti:
Contoh penggunaan kode:
<!DOCTYPE html>
<h2>Artikel Terbaru</h2>
<div class="article">
<h3><a href="article1.html" target="_blank" rel="nofollow">
Inovasi Terbaru di Dunia Smartphone</a></h3>
<p>Temukan fitur-fitur revolusioner dalam smartphone masa depan.</p>
<p class="read-more"><a href="article1.html">Baca selengkapnya...</a></p>
</div>
</body>
</html>Output:
Tag HTML untuk Membuat List
Tag HTML untuk membuat list memungkinkan kamu menyusun informasi dalam format yang terstruktur dan mudah dibaca. Ada tiga jenis list utama dalam HTML, yaitu daftar berurutan, daftar tak berurutan. dan daftar deskripsi.
Berikut tag yang digunakan untuk membuat masing-masing jenis list tersebut:
Daftar berurutan (ordered list)
Contoh penggunaan kode:
<!DOCTYPE html>
<h2>Top 5 Berita Terpopuler</h2>
<ol>
<li><a href="news1.html">Revolution X: Smartphone Masa Depan</a></li>
<li><a href="news2.html">Inovasi Baterai Quantum: Masa Depan Energi</a></li>
<li><a href="news3.html">Kota Pintar: Transformasi Urban</a></li>
<li><a href="news4.html">Kecerdasan Buatan Mengubah Industri</a></li>
<li><a href="news5.html">Era 5G: Masa Depan Komunikasi</a></li>
</ol>
</body>
</html>Output:
Daftar tak berurutan (unordered list)
Contoh penggunaan kode:
<!DOCTYPE html>
<h2>Tren Teknologi Terkini</h2>
<ul>
<li><a href="trend1.html">Kecerdasan Buatan Mendominasi</a></li>
<li><a href="trend2.html">Transportasi Otonom Merambah Kota</a></li>
<li><a href="trend3.html">Era Internet of Things Telah Dimulai</a></li>
<li><a href="trend4.html">Kota Pintar dan Penggunaan Data</a></li>
</ul>
</body>
</html>Output:
Daftar deskripsi (description list)
Contoh penggunaan kode:
<!DOCTYPE html>
<h2>Istilah Teknologi Populer</h2>
<dl>
<dt>Artificial Intelligence</dt>
<dd>Ilmu komputer yang fokus pada penciptaan
sistem yang memiliki kecerdasan seperti manusia.</dd>
<dt>Internet of Things</dt>
<dd>Konsep menghubungkan perangkat di seluruh dunia melalui
internet untuk berkomunikasi dan berbagi data.</dd>
<dt>Blockchain</dt>
<dd>Teknologi penyimpanan data terdesentralisasi yang digunakan dalam
kriptokurensi dan aplikasi lainnya.</dd>
</dl>
</body>
</html>Output:
Tag HTML untuk Membuat Form and Input
Berikut beberapa tag HTML yang sering digunakan saat membuat form dan input dalam desain web:
Contoh penggunaan kode:
<!DOCTYPE html>
<h1>Pendaftaran Workshop Desain Grafis</h1>
<form action="submit.php" method="post">
<label for="name">Nama Lengkap:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="experience">Pengalaman:</label>
<input type="radio" id="beginner" name="experience" value="beginner">
<label for="beginner">Pemula</label>
<input type="radio" id="intermediate" name="experience" value="intermediate">
<label for="intermediate">Menengah</label>
<input type="radio" id="advanced" name="experience" value="advanced">
<label for="advanced">Mahir</label>
<label for="comment">Harapan dari Workshop:</label>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea>
<input type="submit" value="Daftar">
</form>
</body>
</html>Output:
Tag HTML untuk Membuat Table
Berikut tag yang akan kamu gunakan saat membuat tabel:
Contoh penggunaan kode:
<h2>Daftar Produk Teknologi</h2>
<table>
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="product1.html">Smartphone Quantum X</a></td>
<td>Rp5.999.000</td>
</tr>
<tr>
<td>2</td>
<td><a href="product2.html">Laptop Infinity Z</a></td>
<td>Rp12.499.000</td>
</tr>
<tr>
</tbody>
</table>
</body>
</html>Output:
Tag HTML untuk Style dan Programming
Tag HTML untuk style dan programming membantu kamu dalam mengatur tampilan dan fungsi dari halaman web. Berikut beberapa tag penting dalam kategori ini:
Tag untuk style
Contoh penggunaan kode:
<html>
<head>
<title>TechNews - Berita Teknologi</title>
<link rel="stylesheet" href="styles.css">
<style>
body{font:Arial,sans-serif;background:#f5f5f5;margin:0;padding:0;}
h1{color:#333;text-align:center;margin:20px 0;}
.article{background:#fff;padding:20px;margin:10px;border-radius:
5px;box-shadow:0 2px 5px rgba(0,0,0,.1);}
</style>
</head>
<body>
<h1>Selamat Datang di TechNews</h1>
<div class="article">
<h2>Judul Artikel Pertama</h2>
<p>Isi artikel pertama tentang perkembangan terbaru di dunia teknologi.</p>
</div>
<div class="article">
<h2>Judul Artikel Kedua</h2>
<p>Artikel kedua membahas inovasi terbaru dalam industri gadget.</p>
</div>
</body>
</html>Output:
Tag untuk programming
Contoh penggunaan kode:
<!DOCTYPE html>
<html>
<head>
<title>TechBlog - Blog Teknologi</title>
<link rel="stylesheet" href="styles.css">
<script>
function t() { var e = document.getElementById("comments");
e.style.display = "none" === e.style.display ? "block" : "none"; }
</script>
</head>
<body>
<h2>Judul Artikel</h2>
<p>Isi artikel tentang teknologi terbaru.</p>
<button onclick="t()">Komentar</button>
<div id="comments" style="display:none">
<h3>Komentar</h3>
<p>Komentar 1: Artikel ini informatif!</p>
<p>Komentar 2: Saya suka artikel ini!</p>
</div>
</body>
</html>Output:
FAQ (Frequently Ask Question)
Apa itu atribut dalam Tag HTML?
Atribut adalah informasi tambahan yang bisa kamu tambahkan dalam tag HTML untuk mengontrol perilakunya. Sebagai contoh, atribut src dalam tag < img > dipakai untuk menentukan sumber gambar.
Apa bedanya tag HTML dengan element HTML?
Tag HTML adalah kode yang digunakan untuk membuka dan menutup elemen. Di sisi lain, elemen HTML adalah seluruh unit yang terdiri dari tag pembuka, konten, dan tag penutup. Contoh dari elemen adalah < p >Ini adalah paragraf< /p >, dengan < p > sebagai tag pembuka dan < /p > sebagai tag penutup.
Apa perbedaan tag < b >, < strong >, < i >, dan < em >?
Dalam HTML, keempat tag tersebut digunakan untuk memberikan penekanan pada teks, namun masing-masing memiliki perbedaan dalam penggunaan dan makna.
< b > dan < i >: secara visual, tag ini dipakai untuk mengubah style teks. Tag < b > akan membuat teks menjadi tebal (bold), sementara tag < i > membuat teks menjadi miring (italic). Penggunaan tag ini lebih ke arah styling saja dan tidak menambah makna semantik atau penekanan khusus pada konten tersebut.
< strong > dan < em >: sama seperti < b > dan < i >, tag < strong > akan membuat teks tebal dan < em > akan membuat teks miring. Namun, berbeda dengan sebelumnya, penggunaan tag ini juga menekankan makna semantik. Elemen yang diberi tag < strong > atau < em > biasanya menjadi ide pokok dalam konten. Browser atau teknologi asistif lainnya dapat menginterpretasikan penekanan ini dalam cara yang berbeda.
Penutup
Tag HTML adalah alat yang membentuk kata-kata dan kalimat, membantu kita mengkomunikasikan pesan visual ke pengunjung situs. Dari menyusun teks dan gambar sampai menciptakan interaksi yang dinamis, tag HTML bertindak sebagai bahan baku yang mengubah konsep menjadi kenyataan dalam tampilan browser.