Setelah tau apa itu HTML dan sudah Memilih Text Editor yang nyaman untuk ngoding. Sekarang waktunya kalian untuk mengenal apa itu Tag, Element dan Attribute dalam HTML.
Kenapa Tag, Element dan Attribute harus dibahas? Karena Tag, Element dan Attribute ini merupakan dasar dalam belajar HTML. Jadi wajib bagi kalian untuk mengetahui tiga hal ini.
Oke langsung aja yang pertama kita bahas adalah Tag.
Apa itu Tag HTML?
Tag adalah sebuah kode yang digunakan untuk memberikan arahan pada browser web, seperti apa format dan konten yang akan ditampilakan pada website.
Tag HTML berisi tiga bagian utama yaitu, tag pembuka, konten, dan tag penutup. Tetapi ada beberapa tag HTML yang tidak ada tag penutup, seperti <hr> dan <br>.
Yang membedakan antara tag pembuka dan tag penutup adalah, terdapat slash pada tag penutup. Seperti contoh berikut:
<h1>Tutorial HTML</h1>Kumpulan Tag HTML yang biasa digunakan
Berikut ini adalah tag-tag yang paling sering digunakan, dan pasti kalian temukan di dunia web programing :
| Tag | Fungsi |
|---|---|
| <!– ….–> | Untuk membuat komentar atau keterangan |
| <!DOCTYPE html> | Untuk Mendefinisikan tipe document |
| <a> | Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain |
| <p> | Untuk membuat paragraf |
| <h1> sampai <h6> | Untuk membuat heading satu |
| <body> | Untuk mendefinisikan body/isi dokument html |
| <head> | Untuk mendefinisikan bagian kepala dokumen html |
| <title> | Untuk memdefiniskan judul halaman |
| <div> | Untuk mendefinisikan halaman |
| <link> | Untuk mendefinisikan hubungan antar dokumen |
| <script> | Untuk mendefinisikan client-side script |
| <table> | Untuk mendefinisikan tabel |
| <th> | Untuk mendefinisikan sel header di dalam sebuah tabel |
| <td> | Untuk mendefinisikan sel di dalam sebuah tabel |
| <tr> | Untuk membuat baris di dalam sebuah tabel |
| <ul> | Untuk mendefinisikan daftar dalam format bullet |
| <li> | Untuk mendefinisikan list |
Apa itu Element HTML?
Element pada HTML merupakan keseluruhan komponen mulai dari tag awal, isi atau objek yang berada tag, tag akhir, hingga Attribute.
Beberapa elemen HTML tidak memiliki konten (isi tag) seperti elemen <br>. Element ini disebut juga dengan element kosong. Element kosong adalah element yang tidak memiliki tag akhir.
HTML Element HTML dapat berisi elemen lain. Jadi tidak terpaku hanya tag awal, isi tag dan juga tag akhir.
Contoh berikut berisi empat elemen HTML (<html>, <body>, <h1> dan <p>):
<!DOCTYPE html>
<html>
<body>
<h1>Judul Pertama Saya</h1>
<p>Paragraf pertama saya.</p>
</body>
</html> Elemen <html> adalah elemen root dan mendefinisikan seluruh dokumen HTML. Ini memiliki tag awal <html> dan tag akhir </html>.
Kemudian, di dalam elemen <html> ada elemen <body>. Elemen <body> yang mendefinisikan isi dokumen. Ini memiliki tag awal <body> dan tag akhir </body>.
Kemudian, di dalam elemen <body> ada dua elemen lainnya: <h1> dan <p>. Elemen <h1> mendefinisikan heading. Ini memiliki tag awal <h1> dan tag akhir </h1>. Elemen <p> mendefinisikan sebuah paragraf. Ini memiliki tag awal <p> dan tag akhir </p>.
Apa itu Attribute HTML?
Attributeadalah informasi tambahan tentang elemen HTML, yang digunakan di dalam tag pembuka. Contoh informasi yang dimaksud adalah berupa instruksi untuk memberikan font color, background color, font widht, dll.
Semua elemen HTML dapat memiliki attribute. Attributebiasanya ditulis dalam bentuk nama/nilai seperti: nama=”nilai”.
Tidak semua tag membutuhkan attribute di dalamnya, tapi bagi kalian yang terjun ke dunia web programing akan sering melihat tag yang terdapat Attribute didalamnya.
Lalu banyak attribute yang hanya bisa digunakan pada tag-tag tertentu saja. misalkan penggunaan attribute href yang hanya bisa digunakan pada tag <a> saja.
Berikut contoh penulisan attribute pada HTML :
Attribute href
Tag <a> mendefinisikan hyperlink. Attribute href menentukan URL halaman yang dituju tautan, seperti contoh berikut:
<a href="https://mohsai.com">Mohsai.com</a>Attribute src
Tag <img> digunakan untuk menyematkan gambar di halaman HTML. attribute src menentukan jalur ke gambar yang akan ditampilkan, seperti contoh berikut:
<img src="logo.png">Attribute width dan height
Tag <img> juga biasanya terdapat attribute width dan height, untuk menentukan lebar dan tinggi gambar (dalam piksel), seperti contoh berikut:
<img src="tutorial-hmtl.jpg" width ="500" height="300">Attribute alt
Attribute alt yang diperlukan untuk tag <img> menentukan teks alternatif untuk gambar, jika gambar karena alasan tertentu tidak dapat ditampilkan. Hal ini dapat disebabkan oleh koneksi yang lambat, atau kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar, seperti contoh berikut:
<img src="icon.png" alt="mohsai">Lihat apa yang terjadi jika kami mencoba menampilkan gambar yang tidak ada:
<img src="logo.png" alt="mohsai">Attribute style
Attribute style digunakan untuk menambahkan gaya ke element, seperti warna, font, ukuran, dan lainnya. Seperti contoh berikut:
<p style="color:red;">Ini adalah paragraf merah.</p>Attribute lang
Kalian harus selalu menyertakan attribute lang di dalam tag <html>, untuk mendeklarasikan bahasa halaman Web. Ini dimaksudkan untuk membantu mesin pencari dan browser.
Contoh berikut menentukan bahasa Indonesia sebagai bahasa:
<!DOCTYPE html>
<html lang="id">
<body>
...
</body>
</html> Attribute title
Atribut title mendefinisikan beberapa informasi tambahan tentang suatu elemen. Nilai attribute title akan ditampilkan sebagai tooltip saat Anda mengarahkan mouse ke elemen, seperti contoh berikut:
<p title="I'm a tooltip">Ini adalah paragraf.</p>Semoga artikel tentang Belajar HTML – Mengenal Tag, Element, attribute. Jika kalian masih ada yang kurang paham atau ada hal yang ingin ditanyakan, jangan sungkan untuk beratanya di kolom komentar. Kalian juga bisa membagikan artikel ini.
Tutorial Selanjutnya, akan membahas tentang:
#4. Tutorial membuat judul dengan HTML Heading
