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.

mengenal apa itu tag, atribut dan elemen html

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

Hai perkenalkan, nama saya adalah Moses Fahmi Pratama, penulis sekaligus programer yang menulis dan mengembangkan blog ini. Bagi anda yang merasa terbantu akan kehadiran blog ini, anda dapat melakukan donasi kepada penulis melalui tombol Nih Buat Jajan dibawah ini 🤗

Nih buat jajan

Akhir kata saya ucapkan banyak terimakasih, atas donasi anda 🙏😊

Comments