Halo semuanya, pada artikel alafgani.web.id kali ini akan membahas berbagai jenis tag pada HTML, mari langsung saja kita lihat kumpulan Tag HTML sekaligus penjelasanyannya yang sudah terangkum berikut ini.
Apa Itu Tag HTML?
Tag HTML adalah elemen atau kode yang digunakan dalam bahasa markup HTML untuk memberikan instruksi dan membangun struktur halaman web.
Tag HTML mengelilingi dan memberikan makna pada konten yang ada di dalamnya. Setiap tag HTML memiliki sintaksis khusus yang terdiri dari tanda kurung sudut (<>) dan biasanya terdiri dari tag pembuka dan tag penutup.
Tag pembuka ditandai dengan menggunakan tanda kurung sudut (<) diikuti dengan nama tag, dan diakhiri dengan tanda kurung sudut penutup (>). Tag penutup serupa, tetapi memiliki tanda garis miring (/) setelah tanda kurung sudut pembuka, sebelum nama tag.
Kumpulan Tag HTML
<html>: Menandai awal dan akhir dari dokumen HTML.<head>: Berisi informasi metadata tentang dokumen seperti judul, link stylesheet, dll.<title>: Menentukan judul dokumen yang akan ditampilkan di bilah judul browser.<meta>: Menyediakan informasi tambahan tentang dokumen, seperti karakter encoding dan deskripsi.<link>: Menghubungkan dokumen HTML dengan file eksternal, seperti stylesheet.<script>: Menyisipkan skrip JavaScript ke dalam halaman HTML.<style>: Menyisipkan gaya CSS di dalam dokumen HTML.<body>: Berisi konten utama yang akan ditampilkan di halaman web.<h1>sampai<h6>: Membuat judul atau heading dengan tingkat kepentingan yang berbeda.<p>: Membuat paragraf teks.<a>: Membuat tautan atau hyperlink.<img>: Menyisipkan gambar.<ul>: Membuat daftar tak-berurutan (unordered list).<ol>: Membuat daftar berurutan (ordered list).<li>: Menandai item dalam daftar.<table>: Membuat tabel.<tr>: Menandai baris dalam tabel.<td>: Menandai sel dalam tabel.<th>: Menandai sel kepala (header) dalam tabel.<form>: Membuat formulir input.<input>: Menampilkan berbagai jenis input seperti teks, tombol, dsb.<textarea>: Menampilkan area teks dengan lebih banyak ruang.<button>: Membuat tombol.<select>: Membuat dropdown atau pilihan.<option>: Menandai opsi dalam elemen<select>.<label>: Memberikan label untuk elemen input.<fieldset>: Membuat grup elemen dalam bentuk kelompok.<legend>: Menyediakan judul untuk elemen<fieldset>.<div>: Membuat blok konten terpisah untuk pengelolaan gaya CSS.<span>: Membuat konten inline terpisah untuk pengelolaan gaya CSS.<header>: Menandai bagian kepala atau header dari halaman.<footer>: Menandai bagian kaki halaman.<nav>: Menandai bagian navigasi.<article>: Menandai konten artikel independen.<section>: Menandai bagian dalam dokumen.<aside>: Menandai konten yang berhubungan dengan konten utama.<audio>: Menyisipkan audio.<video>: Menyisipkan video.<iframe>: Menyisipkan dokumen atau halaman web lain.<canvas>: Menyediakan elemen untuk menggambar grafis dengan JavaScript.<svg>: Menyisipkan grafik vektor dalam XML.<hr>: Membuat garis horizontal.<br>: Membuat baris baru.<strong>: Membuat teks penting dengan penekanan visual.<em>: Membuat teks yang diemphasiskan.<blockquote>: Menandai kutipan panjang.<abbr>: Menandai singkatan.<cite>: Menandai sumber kutipan.<code>: Menampilkan kode komputer.<pre>: Menampilkan teks yang dijaga formatnya.<sup>: Membuat teks eksponen atas.<sub>: Membuat teks eksponen bawah.<hr>: Membuat garis horizontal.<mark>: Menyoroti teks untuk penekanan visual.<time>: Menandai informasi waktu atau tanggal.<progress>: Menampilkan kemajuan tugas.<meter>: Menampilkan ukuran dalam bentuk pemberian.<details>: Membuat kotak yang dapat dibuka/tutup untuk konten tersembunyi.<summary>: Menyediakan teks ringkasan untuk elemen<details>.<ruby>: Menandai teks yang dijelaskan dengan anotasi Ruby (biasanya dalam bahasa Asia).<rt>: Menandai anotasi Ruby untuk elemen<ruby>.<bdo>: Mengubah arah teks.<wbr>: Menandai titik potong potensial dalam teks panjang.<iframe>: Menyisipkan halaman web lain di dalam dokumen.<datalist>: Menyediakan opsi pilihan untuk elemen input tipe “text”.
Contoh
Inilah contoh implementasi dari Kumpulan Tag HTML yang sudah disebutkan di atas:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Contoh Tag HTML</title> </head> <body> <header> <h1>Selamat Datang di Website Kami</h1> <nav> <a href="#">Beranda</a> <a href="#">Tentang Kami</a> <a href="#">Kontak</a> </nav> </header> <section> <h2>Artikel Terbaru</h2> <article> <h3>Judul Artikel Pertama</h3> <p>Ini adalah artikel pertama yang menarik.</p> </article> <article> <h3>Judul Artikel Kedua</h3> <p>Ini adalah artikel kedua yang informatif.</p> </article> </section> <aside> <h3>Artikel Terpopuler</h3> <ul> <li><a href="#">10 Tips Sukses dalam Bisnis Online</a></li> <li><a href="#">Panduan Pemula untuk Fotografi</a></li> <li><a href="#">Rahasia Kecantikan Alami</a></li> </ul> </aside> <footer> <p>Hak Cipta © 2023 Nama Perusahaan. All rights reserved.</p> <a href="#">Kebijakan Privasi</a> </footer> <img src="gambar.jpg" alt="Gambar Contoh"> <audio src="audio.mp3" controls> Your browser does not support the audio element. </audio> <iframe src="https://www.contohwebsite.com" width="800" height="600"></iframe> <blockquote> <p>Ini adalah contoh kutipan teks dari sumber lain.</p> </blockquote> </body> </html>
Penutup
Tag HTML memberikan peran penting dalam membangun struktur dan mengatur konten di halaman web.Dengan menggunakan tag-tag ini, kamu dapat membangun struktur yang jelas dan memperkaya konten halaman web kamu. Misalnya, kamu dapat menambahkan judul, paragraf, tautan, gambar, daftar, tabel, formulir, dan banyak lagi. Kamu juga dapat menyisipkan konten multimedia seperti audio dan video.
Penggunaan tag HTML yang tepat akan membantu meningkatkan aksesibilitas, SEO, dan pengalaman pengguna pada halaman web kamu.Dengan memahami dan menggunakan tag-tag ini secara efektif, kamu dapat membangun halaman web yang profesional, interaktif, dan mudah dinavigasi.Tentunya, masih ada banyak tag HTML lainnya yang dapat kamu eksplorasi dan gunakan sesuai kebutuhan.
Sekarang kamu sudah mengetahui Kumpulan Tag Html yang sudah disebutkan di atas. Jadi selamat mencoba ya!
Daftar Materi Belajar HTML:
- Pengertian HTML Lengkap dengan Fungsi, Struktur, dan Contoh Penerapannya
- Menampilkan Gambar pada HTML Lengkap
- Heading dan Contohnya
- Menampilkan Gambar pada HTML Lengkap
- Tag HTML Beserta Penjelasan dan Contohnya
- Paragraf HTML dan Contohnya
- List Pada HTML dan Contohnya
- Hyperlink HTML dan Contohnya
- Table HTML dan Contohnya
- Form Attribut dan Contohnya
- Baris baru HTML
- Iframe dan Contohnya
- Class dan Id HTML
- Menghubungkan HTML dan CSS
- Ebook HTML Lengkap
Lihat Semua materi belajar html diatas, untuk menguasai HTML dengan Cepat!
Menyukai Kucing, Terkadang ngopi dikala Hujan, Menyukai Blog dan Website. Sekarang berfokus kepada SEO.
