Mengenal Element, Tag dan Atribut dalam HTML

Dalam tutorial ini kamu akan belajar tentang mengenal Element, Tag dan Atribut dalam HTML

Tag, elemen dan atribut adalah hal yang penting untuk dipahami dalam belajar HTML.

Ketiga komponen ini memiliki arti dan kegunaan masing-masing.

Dalam tutorial ini kamu akan belajar mengenal dan cara penulisan tag, element dan atribut yang benar dalam HTML.


Tag HTML

Tag HTML merupakan penanda yang terletak di awal dan di akhir sebuah element.

Penggunaan Tag memiliki tujuan tertentu. Misal untuk membuat link kita bisa menggunakan tag <a> .. </a>.

Untuk membuat judul pada halaman HTML (Heading) kita bisa menggunakan tag <h1> .. </h1>.

Membuat paragraf kita bisa menggunakan tag <p> .. </p>.

dan masih banyak lagi tag yang tersedia pada HTML yang akan kamu pelajari dalam tutorial selanjutnya di seri tutorial HTML dasar ini.

Cara Penulisan Tag HTML

Tag HTML biasanya terdiri dari sebuah awalan, isi, dan penutup, 

Contoh Tag HTML

Contoh tag HTML umum meliputi:

  • <html>: Menandai awal dan akhir dari dokumen HTML.
  • <head>: Bagian dari dokumen yang berisi informasi tentang dokumen, seperti judul dan tautan ke stylesheet.
  • <title>: Menentukan judul halaman web yang akan ditampilkan di bilah judul browser.
  • <body>: Bagian dari dokumen yang berisi konten yang akan ditampilkan di halaman web.
  • <p>: Menandai sebuah paragraf.
  • <a>: Membuat tautan (link) ke halaman web lain atau ke bagian lain dari halaman yang sama.
  • <img>: Menyisipkan gambar ke dalam halaman web.
  • <div>: Menandai sebuah bagian dari halaman web yang dapat diatur tata letak dan gaya penampilannya melalui CSS.
  • <span>: Menandai sebagian teks yang dapat diatur tata letak dan gaya penampilannya melalui CSS tanpa memengaruhi struktur dokumen.

Ini hanya beberapa contoh tag HTML. Ada banyak tag lainnya yang digunakan untuk berbagai tujuan dalam membangun halaman web.

Apa Itu Elemen HTML?

Elemen HTML adalah unit dasar dalam struktur halaman web. Elemen ini biasanya terdiri dari tag pembuka, konten, dan tag penutup. Sebagai contoh, tag <p> digunakan untuk membungkus paragraf dalam halaman HTML.

Secara umum, elemen HTML dapat dikelompokkan menjadi dua bagian utama: konten (yang dapat berupa teks atau elemen lain) dan atribut (yang memberikan informasi tambahan tentang elemen tersebut).

Struktur Elemen HTML

Setiap elemen HTML memiliki struktur dasar yang mencakup tag pembuka, konten, dan tag penutup. Berikut adalah struktur umum elemen HTML:

<tag_pembuka>konten</tag_penutup>

Misalnya, pada elemen paragraf:

<p>Ini adalah sebuah paragraf</p>

Dalam contoh di atas, <p> adalah tag pembuka, dan </p> adalah tag penutup. Konten yang ada di antara kedua tag ini adalah teks yang akan ditampilkan di halaman web.

Atribut dalam HTML

Atribut adalah bagian dari elemen HTML yang memberikan informasi lebih lanjut tentang elemen tersebut. Atribut ditempatkan di dalam tag pembuka dan biasanya terdiri dari pasangan nama dan nilai.

Atribut digunakan untuk mengubah perilaku elemen, seperti memberi ID atau kelas pada elemen untuk styling, menautkan file eksternal, atau menentukan sumber gambar.

Contoh Atribut pada Elemen HTML

Berikut adalah beberapa contoh penggunaan atribut dalam elemen HTML:

1. Atribut href pada Elemen <a>

Atribut href digunakan untuk menentukan tujuan tautan (link). Berikut adalah contohnya:

<a href="https://www.codingan.id">Kunjungi Codingan.id</a>

Pada contoh ini, href menentukan URL tujuan yang akan diakses ketika pengguna mengklik tautan.

2. Atribut src pada Elemen <img>

Atribut src digunakan untuk menentukan sumber gambar. Berikut adalah contohnya:

<img src="gambar.jpg" alt="Deskripsi Gambar">

Atribut src menunjukkan lokasi gambar, sementara alt memberikan deskripsi alternatif jika gambar gagal dimuat.

3. Atribut class pada Elemen HTML

Atribut class digunakan untuk memberi nama kelas pada elemen yang dapat digunakan dalam CSS untuk styling. Berikut adalah contoh penggunaannya:

<p class="highlight">Teks ini diberi gaya dengan class</p>

Atribut class ini membantu dalam memilih elemen tertentu untuk styling dengan menggunakan CSS.

Penutupan

Elemen HTML, tag, dan atribut adalah bagian yang tak terpisahkan dalam membangun halaman web yang efektif. Memahami cara kerja elemen, serta cara menggunakan atribut yang tepat, sangat penting untuk pengembangan web yang baik dan optimal.

Dengan terus belajar dan berlatih, Anda akan dapat membuat halaman web yang lebih dinamis, interaktif, dan mudah dikelola menggunakan HTML.