Tutorial HTML Part 2 : Tag, Element dan Atribut
Java Script HTML

Tutorial HTML Part 2 : Tag, Element dan Atribut
Admin
Admin
ID • 2 years ago • 9 min read • 4619 views
Tutorial HTML Part 2 : Tag, Element dan Atribut

Tutorial HTML Part 2 : Tag, Element dan Atribut

id • 9 min read • 4619 views

Tutorial HTML Part 2 : Tag, Element dan Atribut

 

HTML adalah bahasa markup yang digunakan untuk membuat dan menampilkan halaman web di internet. HTML terdiri dari berbagai macam komponen yang disebut tag, elemen, dan atribut. Tag adalah tanda yang digunakan untuk memberi perintah atau informasi kepada browser tentang bagaimana menampilkan konten web. Elemen adalah bagian dari dokumen HTML yang dibatasi oleh tag pembuka dan tag penutup. Atribut adalah informasi tambahan yang diberikan pada tag atau elemen untuk mengatur sifat atau perilaku dari elemen tersebut. Dalam artikel ini, kita akan belajar lebih lanjut tentang apa itu tag, elemen, dan atribut dalam HTML, serta bagaimana cara menggunakannya dengan benar dan efektif.

 

Table of Contents

Pengertian Tag

Tag dalam HTML merupakan elemen-elemen kunci yang memainkan peran integral dalam merangkai struktur dan konten sebuah halaman web. Setiap tag, yang ditulis dalam kurung sudut seperti <...>, terdiri dari nama tag dan mungkin juga atribut yang memberikan informasi tambahan. Penting untuk diingat bahwa tag selalu ditulis berpasangan, terdiri dari tag pembuka dan tag penutup, meskipun ada beberapa pengecualian yang tidak memerlukan tag penutup.

Nama tag itu sendiri membawa makna dan fungsi spesifik. Misalnya, tag <html> digunakan untuk memulai dokumen HTML secara keseluruhan, sementara <head> dan <body> membentuk bagian kepala dan tubuh dokumen, masing-masing. Tag <h1> sampai <h6> digunakan untuk membuat heading dengan tingkat kepentingan yang berbeda-beda.

Bagaimana dengan paragraf? Di sinilah tag <p> masuk ke dalam permainan, memungkinkan kita untuk membuat dan mengorganisir teks dalam bentuk paragraf. Jangan lupa tag komentar <!-- --> yang memungkinkan kita menambahkan komentar di dalam kode HTML tanpa mempengaruhi tampilan halaman web.

Menariknya, jika kita merenung sejenak, dulu HTML hanya memiliki 18 tag. Namun, seiring berjalannya waktu dan tuntutan pengembangan web, jumlah tag meningkat pesat, mencapai sekitar 250 tag saat ini. Meskipun begitu, tidak perlu terlalu khawatir untuk menghafal semuanya. Fokus pada pemahaman tag-tag dasar seperti <html>, <head>, <body>, <h1> sampai <h6>, <p>, dan <!-- --> adalah kunci utama.

Penting untuk diingat bahwa pemahaman dan penggunaan tag ini adalah fondasi yang kokoh dalam perjalanan pembelajaran HTML. Dengan menguasai tag-tag dasar, kita dapat membangun pengetahuan yang solid dan membuka pintu bagi pemahaman lebih lanjut terhadap tag-tag yang lebih canggih. Jadi, mari terus eksplorasi dunia tag HTML dan terus tingkatkan kemampuan pengembangan web kita!

 

Tips Menulis HTML yang benar 

Menuliskan tag HTML dengan benar adalah langkah krusial dalam memastikan validitas dan keterbacaan kode. Berikut beberapa saran yang perlu diperhatikan agar dapat menulis tag dengan tepat:

  1. Tag-tag Wajib:

   Pastikan untuk menyertakan tag-tag yang wajib ada dalam setiap dokumen HTML. Ini tidak hanya menjaga validitas kode tetapi juga memastikan struktur dokumen yang benar. Tag seperti <!DOCTYPE html>, <html>, <head>, <title>, dan <body> memiliki peran penting dalam pembentukan dokumen HTML.

  1. Gunakan Huruf Kecil:

 Disarankan untuk menggunakan huruf kecil saat menuliskan nama tag. Meskipun beberapa tag, seperti <!DOCTYPE html>, dapat ditulis dengan huruf besar, menggunakan huruf kecil secara konsisten membuat kode lebih mudah dibaca, rapi, dan terhindar dari potensi kesalahan.

   Contoh yang disarankan:

  

 ```html
   <body>
       <p>Belajar tentang tag di HTML</p>
   </body>
   ```

 

   Contoh yang sebaiknya dihindari:

   

```html
   <BODY>
       <P>Belajar tentang tag di HTML</P>
   </BODY>
   ```

 

   Perlu dicatat bahwa untuk tag <!DOCTYPE html>, huruf besar dapat digunakan atau huruf kecil (khusus untuk dokumen XHTML).

 

  1. Pastikan Menutup Tag dengan Benar:

 Kode HTML seringkali terdiri dari tag yang bersarang satu sama lain. Penting untuk memastikan bahwa setiap tag tertutup dengan benar untuk menghindari kesalahan validasi. Perhatikan penutupan tag pada setiap hierarki untuk memastikan struktur dokumen tetap sesuai.

Dengan mengikuti saran-saran ini, kamu dapat menghasilkan kode HTML yang lebih konsisten, valid, dan mudah dipahami. Kedisiplinan dalam penulisan tag akan menjadi dasar yang kuat untuk pengembangan web yang lebih efisien dan mudah dipelajari. Selamat belajar dan mengembangkan keterampilanmu dalam HTML!

 

Pengertian Elemen

Elemen dalam HTML memainkan peran sentral dalam membangun struktur dan konten sebuah dokumen web. Mereka bukan hanya sekadar komponen, melainkan fondasi dari representasi visual dan hierarki informasi yang ingin disampaikan kepada pengguna.

Dalam terminologi HTML tree, elemen sering kali disebut sebagai "node," membentuk struktur pohon yang merepresentasikan relasi dan tata letak elemen-elemen dalam dokumen. Ada tiga jenis node utama dalam diagram HTML tree, yaitu node elemen, node atribut, dan node teks.

 

  1. Node Elemen:

   Elemen merupakan hasil konkret dari tag pembuka, isi tag, dan tag penutup. Ini adalah elemen-elemen seperti `<p>`, `<h1>`, atau `<div>`. Setiap elemen memiliki peran uniknya dalam menentukan struktur dan presentasi konten. Misalnya, `<p>` untuk paragraf atau `<h1>` hingga `<h6>` untuk heading.

 

  1. Node Atribut:

   Atribut memberikan informasi tambahan terkait elemen. Mereka ditempatkan di dalam tag pembuka dan memberikan elemen karakteristik khusus. Sebagai contoh, dalam `<a href="https://www.example.com">Link</a>`, atribut `href` menyediakan URL yang terkait dengan tautan tersebut.

 

  1. Node Teks:

   Node teks mengandung konten atau teks yang muncul di dalam elemen. Setiap elemen dapat memiliki konten tekstual yang berbeda, dan node teks mewakili bagian ini dalam diagram HTML tree. Sebagai contoh, pada elemen `<p>Hello World!</p>`, "Hello World!" adalah node teks.

Memahami peran dan interaksi antara elemen, atribut, dan teks adalah kunci untuk merancang dokumen HTML yang efektif. Dengan memanfaatkan struktur hierarkis elemen-elemen ini, pengembang web dapat mengatur dan menyampaikan informasi secara jelas dan terstruktur kepada pengguna. Semakin dalam pemahaman terhadap konsep ini, semakin efektif pula kemampuan pengembang dalam mengoptimalkan tampilan dan fungsionalitas halaman web. Jadi, lanjutkan eksplorasi dan praktik dalam memahami elemen-elemen HTML secara lebih mendalam!

 

Pengertian Atribut

Atribut dalam HTML merupakan komponen kunci yang memberikan informasi tambahan atau memodifikasi perilaku dari suatu elemen. Mereka adalah kata kunci khusus yang terletak di dalam tag pembuka elemen dan sering disebut sebagai "modifier" karena dapat mengubah atau menentukan berbagai aspek dari elemen tersebut.

Pentingnya atribut terlihat ketika kita menghadapi elemen-elemen tertentu yang memerlukan atribut tertentu untuk berfungsi dengan benar. Sebagai contoh, tag <a> (link) membutuhkan atribut href untuk menentukan URL tujuan dari link tersebut. Begitu pula dengan tag <img>, yang memerlukan atribut src untuk menentukan gambar yang akan ditampilkan.

Contoh konkret dari penggunaan atribut adalah sebagai berikut:

 

```html
<a href="https://petanikode.com">Divisidev.com</a>
```

 

Pada contoh di atas, tag <a> (link) menggunakan atribut href untuk menetapkan halaman tujuan dari link tersebut, yakni " https://divisidev.com ".

Atribut tidak hanya terbatas pada satu, melainkan bisa lebih dari satu pada suatu elemen. Misalnya:

 

```html
<img src="gambar.jpg" width="100" height="100" />
```

 

Dalam contoh ini, tag <img> (gambar) menggunakan beberapa atribut, seperti src untuk menentukan gambar yang akan ditampilkan, dan width serta height untuk mengatur ukuran gambar.

Pemahaman yang baik tentang atribut memberikan fleksibilitas dan kontrol yang lebih besar dalam merancang dan mengelola elemen-elemen HTML. Oleh karena itu, menguasai penggunaan atribut adalah langkah penting dalam memperdalam kemampuan pengembangan web. Mari terus eksplorasi dan praktik untuk lebih memahami peran serta aplikasi atribut dalam dunia HTML!

Series: HTML
Published on March 03, 2024
Last updated on June 03, 2026
Tutorials
Java Script HTML
Previous Tutorial HTML Part 1 : Pengenalan
Next Skill-Skill Yang Perlu Dimiliki Programer

If you like this post and want to support us, you can support us via buymeacoffee or trakteer.

trakteer divisidev divisidev: buy me a coffee