Balajar HTML 3: mengenal tag, atribut dan elemen dalam html
Sebelumnya kita telah belajar mengenai pengertian html dan struktur dasar dari html. Sekarang yang akan kita bahas adalah mengenal tag, atribut dan elemen dalam html.
Kita tahu HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat dan menampilkan halaman web di browser. HTML terdiri dari berbagai komponen yang disebut tag, atribut dan elemen. Apa itu tag, atribut dan elemen dalam HTML? Bagaimana cara menggunakannya? Mari kita bahas satu per satu.
Tag HTML
Tag HTML adalah kode yang digunakan untuk memberi tanda atau label pada konten web. Tag HTML biasanya ditulis dengan tanda kurung sudut (< dan >) dan memiliki nama tertentu. Contoh tag HTML adalah <p>
, <h1>
, <img>
, <a>
, dan lainnya.
Tag HTML dapat dibagi menjadi dua jenis: tag pembuka (<tag>
) dan tag penutup (</tag>
). Tag pembuka digunakan untuk memulai suatu elemen atau bagian konten web. Tag penutup digunakan untuk mengakhiri suatu elemen atau bagian konten web. Contoh:
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
Dalam contoh di atas, <p>
adalah tag pembuka dan </p>
adalah tag penutup untuk elemen paragraf. Ada juga beberapa tag HTML yang tidak memerlukan tag penutup karena hanya memiliki satu fungsi saja. Tag ini disebut sebagai tag tunggal atau self-closing. Contoh: <img src=“gambar.jpg” alt=“Gambar”>
<br>
<hr>
Dalam contoh di atas, <img>
, <br>
, dan <hr>
adalah tag tunggal yang digunakan untuk menampilkan gambar, membuat baris baru, dan membuat garis horizontal.
Atribut HTML
Atribut HTML adalah informasi tambahan yang dapat ditambahkan pada tag HTML untuk memberikan detail atau fungsi lebih lanjut pada elemen atau konten web. Atribut HTML biasanya ditulis dengan format nama=“nilai” setelah nama tag dalam tanda kurung sudut. Contoh:
<a href=“https://www.google.com” target=“_blank”>Klik di sini</a>
<img src=“gambar.jpg” alt=“Gambar” width=“300” height=“200”>
Dalam contoh di atas, href
, target
, src
, alt
, width
, dan height
adalah nama atribut.
Sedangkan https://www.google.com
, _blank
, gambar.jpg
, Gambar
, 300
, dan 200
adalah nilai atribut.
- Atribut href digunakan untuk menentukan alamat URL dari link.
- Atribut target digunakan untuk menentukan cara membuka link (dalam hal ini _blank berarti membuka link di tab baru).
- Atribut src digunakan untuk menentukan lokasi file gambar.
- Atribut alt digunakan untuk menampilkan teks alternatif jika gambar tidak dapat ditampilkan.
- Atribut width dan height digunakan untuk menentukan ukuran gambar.
Elemen HTML
Elemen HTML adalah keseluruhan bagian konten web yang dibuat dengan menggunakan pasangan tag pembuka dan penutup atau tag tunggal beserta atribut-atributnya jika ada. Elemen HTML dapat bersarang atau berada di dalam elemen lainnya untuk membuat struktur halaman web yang kompleks. Contoh:
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Judul Utama</h1>
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
<a href="https://www.google.com" target="_blank">Klik di sini</a>
<img src="gambar.jpg" alt="Gambar" width="300" height="200">
</body>
</html>
Dalam contoh di atas, <html></html>
adalah elemen root atau akar yang mencakup seluruh halaman web. <head></head>
adalah elemen head yang berisi informasi tentang halaman web seperti judul. <title></title>
adalah elemen title yang berisi judul halaman web. <body></body>
adalah elemen body yang berisi konten utama halaman web seperti teks, gambar, dan link. <h1></h1>
adalah elemen heading atau judul tingkat satu. <p></p>
adalah elemen paragraph atau paragraf. <a></a>
adalah elemen anchor atau link. <img />
adalah elemen image atau gambar.
Kesimpulan
Tag, atribut dan elemen adalah komponen dasar dari HTML yang digunakan untuk membuat dan menampilkan halaman web di browser. Tag adalah kode yang memberi tanda pada konten web.
Atribut adalah informasi tambahan yang ditambahkan pada tag untuk memberikan detail atau fungsi lebih lanjut.
Elemen adalah keseluruhan bagian konten web yang dibuat dengan menggunakan tag dan atribut.
Dengan memahami dan menguasai tag, atribut dan elemen dalam HTML, Anda dapat membuat halaman web yang sesuai dengan keinginan dan kebutuhan Anda serta meningkatkan kualitas SEO halaman web Anda.
Kalimat Penutup
Demikianlah artikel tentang “mengenal tag, atribut dan elemen dalam HTML”. Semoga artikel ini dapat memberikan wawasan baru bagi Anda yang ingin belajar HTML. Jika Anda memiliki pertanyaan atau saran terkait dengan topik ini, silakan tinggalkan komentar di bawah ini. Kami akan senang mendengar pendapat Anda. Terima kasih telah membaca sampai akhir. 😊
Selanjutnya belajar apa?
Untuk selanjutnya baca artikel berikut, untuk mulai membuat paragraf dengan html.
Pelajari : 📖 Belajar html 04: membuat paragraf di html
- Mengenal Sejarah HTML dan versinya
- Belajar HTML 1: Pengertian HTML dan Struktur Dasarnya
- Belajar HTML 2: memilih text editor
- Balajar HTML 3: mengenal tag, atribut dan elemen dalam html
- Belajar HTML 4: membuat paragraf di html
- Belajar HTML 5: cara membuat heading di html
- Belajar HTML 6: cara membuat list pada html
- Belajar HTML 7: Cara membuat tabel dengan html
- Belajar HTML 8: Cara membuat hyperlink dengan html sangat mudah
- Belajar HTML 9: Cara menampilkan gambar di HTML
- Belajar HTML 10: Cara membuat form di HTML
- Belajar HTML 11: Menampilkan Video di HTML