Cara menggunakan apa saja atribut html

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.

Table of Contents

  • Apa itu Tag HTML?
  • Kumpulan Tag HTML yang biasa digunakan
  • Apa itu Element HTML?
  • Apa itu Attribute HTML?
  • Attribute href
  • Attribute src
  • Attribute width dan height
  • Attribute alt
  • Attribute style
  • Attribute lang
  • Attribute title
  • Apa saja atribut dalam HTML?
  • Apa yang dimaksud dengan atribut HTML dan berikan contohnya?
  • Apa saja struktur HTML?
  • Manakah yang termasuk atribut untuk link?

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?
    • Kumpulan Tag HTML yang biasa digunakan
  • Apa itu Element HTML?
  • Apa itu Attribute HTML?
    • Attribute href
    • Attribute src
    • Attribute width dan height
    • Attribute alt
    • Attribute style
    • Attribute lang
    • Attribute title

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:

<h2>Tutorial HTML</h2>

Kumpulan Tag HTML yang biasa digunakan

Berikut ini adalah tag-tag yang paling sering digunakan, dan pasti kalian temukan di dunia web programing :

TagFungsi
<!– ….–> 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
<h2> 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>, <h2> dan <p>):

 <!DOCTYPE html>
 <html>
   <body>
     <h2>Judul Pertama Saya</h2>
     <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: <h2> dan <p>. Elemen <h2> mendefinisikan heading. Ini memiliki tag awal <h2> dan tag akhir </h2>. 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

Apa saja atribut dalam HTML?

Atribut href. Atribut href dipakai pada link (tag a). ... .

Atribut src. Atribut src dipakai pada image (tag img). ... .

Atribut width dan height. Atribut width dan height dipakai pada tag img. ... .

Atribut sytle. Atribut style dapat dipakai pada hampir semua tag HTML. ... .

Atribut title. ... .

Cara Penulisan Atribut..

Apa yang dimaksud dengan atribut HTML dan berikan contohnya?

Atribut HTML adalah informasi tambahan yang disisipkan pada tag html, kegunaanya untuk memberikan informasi tambahan pada suatu elemen, seperti: tinggi, lebar, style, href dan lain lain.

Apa saja struktur HTML?

Setiap halaman HTML sudah pasti mempunyai struktur dasar yang terdiri dari : tag Doctype, tag html, tag head, dan tag body.

Atribut-atribut untuk Link.

_blank akan membuka link pada jendela atau tab baru;.

_self akan membuka link pada halaman itu sendiri (default target);.

_top menuju bagian paling atas pada halaman;.

_parent membuka link pada frame induk;.

nama-frame akan membuka link pada <iframe> dengan nama tertentu;.

Apa saja atribut dalam HTML?

Atribut href. Atribut href dipakai pada link (tag a). ... .
Atribut src. Atribut src dipakai pada image (tag img). ... .
Atribut width dan height. Atribut width dan height dipakai pada tag img. ... .
Atribut sytle. Atribut style dapat dipakai pada hampir semua tag HTML. ... .
Atribut title. ... .
Cara Penulisan Atribut..

Apa yang dimaksud dengan atribut HTML dan berikan contohnya?

Atribut HTML adalah informasi tambahan yang disisipkan pada tag html, kegunaanya untuk memberikan informasi tambahan pada suatu elemen, seperti: tinggi, lebar, style, href dan lain lain.

Apa kegunaan atribut style pada HTML?

Style di HTML merupakan atribut yang berfungsi untuk menambahkan Style pada sebuah elemen HTML, seperti merubah warna, font, ukuran, dan lain-lain.

Bagaimana cara penulisan tag HTML yang benar?

Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku ( <...> ), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut. Contoh: <p> , <a> , <body> , <head> , dan sebagainya. Tag selalu ditulis berpasangan.