tutorial pengembangan web terbaru

Atribut HTML


Atribut memberikan informasi tambahan tentang elemen HTML.

Atribut HTML adalah pengubah dari jenis elemen HTML. Atribut baik memodifikasi fungsi default jenis unsur atau menyediakan fungsionalitas untuk jenis elemen tertentu tidak dapat berfungsi dengan benar tanpa mereka. Dalam sintaks HTML, atribut ditambahkan ke tag HTML awal.


Atribut HTML

  • Elemen HTML dapat memiliki attributes
  • Atribut memberikan additional information tentang elemen
  • Atribut selalu ditentukan dalam the start tag
  • Atribut datang dalam pasangan nama / nilai seperti: name="value"

Deskripsi

HTML atribut umumnya muncul sebagai pasangan nama-nilai, yang dipisahkan oleh =, dan ditulis dalam tag awal sebuah elemen, setelah nama elemen:

<tag attribute="value">content to be modified by the tag</tag>

Di mana nama tag HTML jenis elemen, dan atribut adalah nama atribut, set ke nilai yang diberikan. nilai tersebut mungkin tertutup dalam tanda kutip tunggal atau ganda, meskipun nilai-nilai yang terdiri dari karakter tertentu dapat dibiarkan kuotasi di HTML (tapi tidak XHTML) .Leaving atribut nilai kuotasi dianggap tidak aman.

Meskipun sebagian besar atribut disediakan sebagai nama dan nilai-nilai dipasangkan, beberapa mempengaruhi elemen hanya dengan kehadiran mereka di tag awal dari elemen (seperti atribut ismap untuk elemen img).

Kebanyakan elemen dapat mengambil salah satu dari beberapa atribut umum:

Atribut id menyediakan identifikasi unik dokumen-lebar untuk element.This dapat digunakan sebagai pemilih CSS untuk memberikan sifat presentasi, oleh browser untuk memusatkan perhatian pada elemen tertentu, atau dengan script untuk mengubah isi atau presentasi dari elemen. Ditambahkan ke URL halaman, URL langsung menargetkan elemen tertentu dalam dokumen, biasanya sub-bagian halaman. Sebagai contoh, ID "Atribut".

Atribut class menyediakan cara untuk mengklasifikasi unsur yang sama. Hal ini dapat digunakan untuk tujuan semantik, atau untuk keperluan presentasi. Semantik, misalnya, kelas yang digunakan dalam Microformats. Presentationally, misalnya, dokumen HTML mungkin menggunakan kelas sebutan = "notasi" untuk menunjukkan bahwa semua elemen dengan nilai kelas ini adalah bawahan teks utama dari dokumen. elemen seperti mungkin berkumpul dan disajikan sebagai catatan kaki pada halaman bukannya muncul di tempat di mana mereka terjadi pada kode HTML. Penggunaan presentasi lain akan sebagai pemilih CSS.

Seorang penulis dapat menggunakan gaya kode non-attributal sifat presentasi untuk elemen tertentu. Hal ini dianggap praktik yang lebih baik untuk menggunakan id elemen atau kelas atribut untuk memilih elemen dengan stylesheet, meskipun kadang-kadang ini bisa terlalu rumit untuk sebuah aplikasi sederhana dan spesifik atau ad hoc properti bergaya.

Atribut title digunakan untuk melampirkan penjelasan subtextual ke elemen. Dalam kebanyakan browser atribut ini ditampilkan sebagai apa yang sering disebut sebagai tooltip.

Unsur singkatan, abbr, dapat digunakan untuk menunjukkan berbagai atribut:

<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr>

Contoh ini menampilkan sebagai HTML; di kebanyakan browser, menunjuk kursor pada singkatan harus menampilkan judul teks "Hypertext Markup Language."

Kebanyakan elemen juga mengambil bahasa terkait atribut lang dan dir.


The lang Atribut

Bahasa dokumen dapat dinyatakan dalam <html> tag.

Bahasa tersebut dinyatakan dalam lang atribut.

Mendeklarasikan bahasa adalah penting untuk aplikasi aksesibilitas (screen readers) dan mesin pencari:

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Dua huruf pertama menentukan bahasa (en) . Jika ada dialek, menggunakan dua huruf lebih (US) .


The title Atribut

Paragraf HTML didefinisikan dengan <p> tag.

Dalam contoh ini, <p> elemen memiliki atribut judul. Nilai atribut adalah " About w3im " :

Contoh

<p title="About w3ii">
w3ii is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
Cobalah sendiri "

Bila Anda memindahkan mouse di atas elemen, judul akan ditampilkan sebagai tooltip.


The href Atribut

Link HTML didefinisikan dengan <a> tag. Alamat link ditentukan dalam href atribut:

Contoh

<a href="http://www.w3ii.com">This is a link</a>
Cobalah sendiri "

Anda akan belajar lebih banyak tentang link dan <a> tag nanti dalam tutorial ini.


ukuran Atribut

Gambar HTML didefinisikan dengan <img> tag.

Nama file dari sumber ( src ) , dan ukuran gambar ( width dan height ) semua disediakan sebagai atribut:

Contoh

<img src="w3ii.jpg" width="104" height="142">
Cobalah sendiri "

Ukuran gambar ditentukan dalam pixel: width = "104" berarti 104 layar pixel.

Anda akan belajar lebih banyak tentang gambar dan <img> tag kemudian dalam tutorial ini.


The alt Atribut

The alt atribut menentukan sebuah teks alternatif yang akan digunakan, ketika sebuah elemen HTML tidak dapat ditampilkan.

Nilai atribut dapat dibaca oleh "screen readers" . Dengan cara ini, seseorang "listening" untuk halaman web, yaitu orang buta, bisa "hear" elemen.

Contoh

<img src="w3ii.jpg" alt="w3ii.com" width="104" height="142">
Cobalah sendiri "

Kami Sarankan: Selalu Gunakan huruf kecil Atribut

HTML5 standar tidak memerlukan kasus nama atribut yang lebih rendah.

The title atribut dapat ditulis dengan huruf besar atau lebih rendah seperti Title dan / atau TITLE .

W3C merekomendasikan huruf kecil di HTML4, dan menuntut huruf kecil untuk jenis dokumen ketat seperti XHTML.

huruf kecil adalah yang paling umum. huruf kecil lebih mudah untuk mengetik.
Pada w3ii kita selalu menggunakan huruf kecil nama atribut.


Kami Sarankan: Selalu Penawaran Nilai Atribut

HTML5 standar tidak memerlukan tanda kutip di nilai atribut.

The href atribut, ditunjukkan di atas, dapat ditulis sebagai:

Contoh

<a href=http://www.w3ii.com>
Cobalah sendiri "

W3C recommends kutipan di HTML4, dan menuntut kutipan untuk jenis dokumen ketat seperti XHTML.

Kadang-kadang perlu untuk menggunakan tanda kutip. Ini tidak akan ditampilkan dengan benar, karena mengandung spasi:

Contoh

<p title=About w3ii>
Cobalah sendiri "

Menggunakan tanda kutip adalah yang paling umum. Menghilangkan tanda kutip dapat menghasilkan kesalahan.
Pada w3ii kita selalu menggunakan tanda kutip nilai atribut.


Quotes tunggal atau ganda?

kutipan gaya ganda adalah yang paling umum dalam HTML, tapi gaya tunggal juga dapat digunakan.

Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip ganda, maka perlu menggunakan tanda kutip tunggal:

<p title='John "ShotGun" Nelson'>

Atau sebaliknya:

<p title="John 'ShotGun' Nelson">

Bab Ringkasan

  • Semua elemen HTML dapat memiliki atribut
  • HTML title atribut memberikan tambahan "tool-tip" informasi
  • HTML href atribut menyediakan informasi alamat untuk link
  • HTML width dan height atribut memberikan informasi ukuran untuk gambar
  • HTML alt atribut menyediakan teks untuk pembaca layar
  • Pada w3ii kita selalu menggunakan lowercase HTML atribut nama
  • Pada w3ii kami selalu quote atribut dengan tanda kutip ganda

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »


Atribut HTML

Di bawah ini adalah daftar abjad dari beberapa atribut yang sering digunakan dalam HTML:

Atribut Deskripsi
alt Menentukan teks alternatif untuk gambar
disabled Menentukan bahwa elemen masukan harus dinonaktifkan
href Menentukan URL (web address) untuk link
id Menentukan sebuah id unik untuk elemen
src Menentukan URL (web address) untuk gambar
style Menentukan gaya CSS inline untuk suatu elemen
title Menentukan informasi tambahan tentang elemen (displayed as a tool tip)

Sebuah daftar lengkap dari semua atribut untuk setiap elemen HTML, terdaftar di kami: HTML Tag Referensi .