HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat dan menyusun konten di web.
Dalam artikel ini, kita akan membahas tag-tag dasar HTML yang penting untuk dipahami, serta fungsinya dalam membangun struktur halaman web.
Mari kita mulai dengan tag-tag dasar yang sering digunakan dalam dokumen HTML.
1. !DOCTYPE
Tag <!DOCTYPE> adalah deklarasi yang digunakan untuk menentukan jenis dokumen HTML yang digunakan. Ini adalah tag pertama yang harus ada di setiap dokumen HTML.
Dengan mendeklarasikan jenis dokumen, browser dapat memahami cara merender halaman dengan benar. Untuk HTML5, deklarasi ini sangat sederhana:
<!DOCTYPE html>2. html
Tag <html> adalah elemen root dari dokumen HTML. Semua konten HTML lainnya harus berada di dalam tag ini. Tag ini menandakan bahwa dokumen tersebut adalah dokumen HTML. Berikut adalah contoh penggunaannya:
<html lang="id">
<!-- Konten lainnya -->
</html>3. head
Tag <head> berisi informasi metadata tentang dokumen, seperti judul, karakter set, dan link ke stylesheet.
Meskipun konten dalam tag ini tidak ditampilkan di halaman web, informasi ini sangat penting untuk SEO dan pengaturan halaman. Contoh penggunaan tag <head> adalah sebagai berikut:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>4. title
Tag <title> digunakan untuk mendefinisikan judul halaman yang akan ditampilkan di tab browser. Judul ini juga berperan penting dalam SEO, karena mesin pencari menggunakan informasi ini untuk memahami konten halaman. Contoh penggunaannya:
<title>Belajar HTML Dasar</title>5. body
Tag <body> mendefinisikan bagian utama dari dokumen HTML, di mana semua konten yang akan ditampilkan kepada pengguna berada. Ini termasuk teks, gambar, tautan, dan elemen lainnya. Berikut adalah contoh penggunaan tag <body>:
<body>
<h1>Selamat Datang di Panduan HTML</h1>
<p>Ini adalah paragraf pertama Anda.</p>
</body>6. h1 hingga h6
Tag heading (<h1> hingga <h6>) digunakan untuk mendefinisikan judul dan subjudul dalam dokumen.
<h1> adalah yang paling penting dan biasanya digunakan untuk judul utama, sedangkan <h6> adalah yang paling tidak penting.
Penggunaan tag heading yang tepat membantu mesin pencari memahami struktur konten. Contoh penggunaannya:
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>7. p
Tag <p> digunakan untuk mendefinisikan paragraf dalam dokumen HTML. Setiap paragraf akan memiliki jarak di atas dan di bawahnya secara otomatis. Berikut adalah contoh penggunaan tag <p>:
<p>Ini adalah paragraf yang menjelaskan tentang HTML.</p>8. br
Tag <br> digunakan untuk menyisipkan jeda baris dalam teks. Ini berguna ketika Anda ingin memecah teks menjadi beberapa baris tanpa membuat paragraf baru. Contoh penggunaannya:
<p>Ini adalah kalimat pertama.<br>Ini adalah kalimat kedua di baris baru.</p>9. hr
Tag <hr> digunakan untuk membuat garis horizontal yang menandakan perubahan tema atau konten dalam dokumen. Ini sering digunakan untuk memisahkan bagian-bagian dalam halaman. Contoh penggunaannya:
<h2>Bagian Pertama</h2>
<p>Konten bagian pertama.</p>
<hr>
<h2>Bagian Kedua</h2>
<p>Konten bagian kedua.</p>10. Komentar
Tag komentar <!--...--> digunakan untuk menambahkan komentar dalam kode HTML. Komentar ini tidak akan ditampilkan di halaman web, tetapi dapat membantu pengembang untuk memberikan catatan atau penjelasan dalam kode. Contoh penggunaannya:
<!-- Ini adalah komentar yang tidak akan ditampilkan di halaman -->
<p>Ini adalah konten yang akan ditampilkan.</p>Kesimpulan
Memahami tag-tag dasar HTML adalah langkah pertama yang penting dalam pengembangan web. Dengan menggunakan tag-tag ini dengan benar, Anda dapat membangun struktur halaman yang baik dan meningkatkan pengalaman pengguna.
Selain itu, penggunaan tag yang tepat juga berkontribusi pada SEO, membantu mesin pencari memahami konten halaman Anda. Untuk informasi lebih lanjut tentang tag HTML, Anda dapat mengunjungi W3Schools.
Dengan panduan ini, Anda sekarang memiliki pemahaman yang lebih baik tentang tag HTML dasar. Selamat belajar dan semoga sukses dalam perjalanan pengembangan web Anda!