Beranda / Edukasi / HTML

Belajar Mengenal Tag, Element, dan Attribute HTML

Posting Komentar

Saat pertama kali belajar HTML, banyak orang mengira semua kode HTML itu sama. Padahal, ada tiga istilah yang wajib dipahami sejak awal, yaitu tag HTML, element HTML, dan attribute HTML. Ketiganya saling berkaitan dan menjadi pondasi utama dalam membuat sebuah halaman web.

Kalau Anda memahami perbedaan ketiganya sejak awal, proses belajar HTML akan jauh lebih mudah. Artikel ini akan membahas pengertian, fungsi, contoh, hingga perbedaan tag, element, dan attribute HTML berdasarkan dokumentasi resmi HTML Living Standard dan referensi dari MDN Web Docs.

Adi Prayitno
Ilustrasi Tag, Element, dan Attribute HTML

Mengapa Harus Memahami Tag, Element, dan Attribute?

HTML (HyperText Markup Language) merupakan bahasa markup yang digunakan untuk menyusun struktur halaman web. Hampir seluruh website di internet dibangun menggunakan HTML sebagai fondasinya.

Sebelum mempelajari CSS maupun JavaScript, Anda perlu memahami tiga komponen utama HTML berikut.

  • Tag HTML
  • Element HTML
  • Attribute HTML

Ketiganya adalah dasar yang akan terus digunakan ketika membuat website, mulai dari halaman sederhana hingga aplikasi web modern.

Apa Itu Tag HTML?

Tag HTML adalah kode yang digunakan untuk memberi tahu browser mengenai jenis informasi yang sedang ditulis.

Umumnya tag ditulis menggunakan tanda kurung siku (< >).

Contoh:

<h1>Belajar HTML</h1>

Pada contoh tersebut terdapat tag:

<h1>

dan

</h1>

Tag pembuka diawali dengan nama tag.

Tag penutup diawali dengan tanda garis miring (/).

Browser akan membaca pasangan tag tersebut sebagai sebuah heading atau judul.

Contoh Tag HTML yang Paling Sering Digunakan

Berikut beberapa tag HTML yang wajib diketahui pemula.

Tag Fungsi
<html> Awal dokumen HTML
<head> Informasi halaman
<title> Judul halaman
<body> Isi halaman
<h1> Judul utama
<p> Paragraf
<a> Link
<img> Menampilkan gambar
<ul> Daftar
<li> Item daftar
<div> Membuat blok/container

Apa Itu Element HTML?

Element HTML adalah keseluruhan bagian yang terdiri dari:

  • Tag pembuka
  • Isi (content)
  • Tag penutup

Contoh:

<p>Halo Dunia</p>

Jika dijabarkan:

Tag pembuka

<p>

Isi

Halo Dunia

Tag penutup

</p>

Seluruh bagian tersebut disebut element HTML, bukan hanya tag-nya saja.

Visual sederhananya:

Element
│
├── Tag Pembuka
├── Content
└── Tag Penutup

Apa Itu Attribute HTML?

Attribute adalah informasi tambahan yang diberikan kepada sebuah tag HTML.

Attribute selalu ditulis di dalam tag pembuka.

Contoh:

<a href="https://example.com">Kunjungi Website</a>

Pada contoh di atas:

href

merupakan attribute.

Sedangkan

https://example.com

merupakan nilai (value) dari attribute tersebut.

Attribute membantu browser mengetahui bagaimana suatu element harus bekerja.

Struktur Attribute HTML

Penulisannya seperti berikut.

namaAttribute="nilai"

Contoh:

<img src="gambar.jpg" alt="Pemandangan">

Pada kode di atas terdapat dua attribute.

  • src
  • alt

Attribute HTML yang Sering Digunakan

Berikut beberapa attribute yang paling umum digunakan.

Attribute Fungsi
href Tujuan link
src Lokasi gambar
alt Deskripsi gambar
id Identitas unik element
class Nama kelas CSS
style CSS langsung pada element
title Tooltip saat mouse diarahkan
width Lebar element
height Tinggi element

Perbedaan Tag, Element, dan Attribute

Agar lebih mudah dipahami, berikut perbedaannya.

Tag Element Attribute
Penanda HTML Keseluruhan bagian HTML Informasi tambahan
Ditulis dalam < > Tag + isi + tag penutup Ditulis pada tag pembuka
Contoh: <p> <p>Halo</p> class="judul"

Singkatnya:

  • Tag adalah penandanya.
  • Element adalah keseluruhan isi beserta tag.
  • Attribute adalah informasi tambahan pada tag.

Contoh Penggunaan Ketiganya

Perhatikan contoh berikut.

<a href="https://example.com" target="_blank">
Belajar HTML
</a>

Penjelasannya:

Tag pembuka

<a>

Attribute

href
target

Content

Belajar HTML

Tag penutup

</a>

Seluruh bagian tersebut adalah sebuah element HTML.

Kesalahan yang Sering Dilakukan Pemula

Saat baru belajar HTML, beberapa kesalahan berikut cukup sering terjadi.

  • Lupa menutup tag.
  • Menganggap tag dan element adalah hal yang sama.
  • Menulis attribute di luar tag pembuka.
  • Tidak memberikan nilai pada attribute yang membutuhkannya.
  • Salah menempatkan tanda kutip pada value attribute.

Menghindari kesalahan-kesalahan kecil ini akan membuat kode HTML lebih rapi dan mudah dipelihara.

Hubungan Tag, Element, dan Attribute

Ketiganya dapat diibaratkan sebagai satu kesatuan.

  • Tag membentuk kerangka.
  • Element adalah objek yang ditampilkan browser.
  • Attribute memberikan sifat atau karakter tambahan pada element tersebut.

Tanpa tag tidak ada element.

Tanpa attribute, element tetap bisa berjalan, tetapi fiturnya menjadi lebih terbatas.

Baca Juga

Untuk memperdalam pemahaman HTML, Anda juga dapat membaca artikel berikut.

Kesimpulan

Memahami tag HTML, element HTML, dan attribute HTML adalah langkah penting sebelum mempelajari HTML lebih jauh. Tag berfungsi sebagai penanda, element merupakan keseluruhan struktur HTML yang ditampilkan browser, sedangkan attribute memberikan informasi tambahan agar element memiliki fungsi tertentu.

Dengan memahami konsep dasar ini, Anda akan lebih mudah mengikuti materi HTML berikutnya seperti heading, paragraf, gambar, hyperlink, tabel, formulir, hingga HTML5 Semantic Elements.

Jika artikel ini membantu proses belajar Anda, jangan lupa tinggalkan komentar apabila masih ada bagian yang ingin ditanyakan. Bagikan juga artikel ini kepada teman yang sedang belajar HTML agar semakin banyak yang bisa Belajar, Berbagi, dan Terus Berkembang bersama Adi Prayitno

Referensi

  • WHATWG HTML Living Standard
  • MDN Web Docs: HTML Elements
  • W3C HTML Documentation

Posting Komentar untuk "Belajar Mengenal Tag, Element, dan Attribute HTML"

Silahkan berkomentar dengan bijak untuk kritik dan saran.
Spam link aktif akan segera saya hapus , Terimakasih.