Belajar HTML Global Attributes
Global attribute adalah HTML atribut yang secara umum dapat digunakan pada semua elemen HTML.
Deskripsi
Mengenai Global Attributes
Global Attributes merupakan attribute yang digunakan untuk semua element HTML, meskipun atribut tersebut tidak memiliki peranan (pengaruh) terhadap beberapa element.
Global Attribute bisa saja digunakan pada sebuah element yang bukan standar. Artinya, element yang tidak sesuai dengan standard tetap dapat menggunakan attribute global ini walaupun tidak valid. Contoh, saya menulis <elemenku> dan jelas sekali elemen ini tidak ada (tidak valid) tetapi, HTML attribute dapat digunakan pada element tersebut. Sehingga, jika ditulis <elemenku hidden>Hai Semuanya<elemenku>, maka tulisan "Hai Semuanya" akan di-hidden (sembunyikan). Attribute hidden merupakan salah satu dari HTML Global Attribute yang digunakan untuk menyembunyikan element.
HTML Global Attribute
Atribut Global di dalam HTML
accesskey="tombol pintas dari papan kunci"
class="nama class"
contenteditable="true | false | inherit"
contextmenu="id dari sebuah menu"
data-*="attribute data yang ditentukan oleh user"
dir="ltr | rtl | auto"
draggable="true | false | auto"
dropzone="copy | move | link"
hidden="hidden"
id="nama id"
itemid="microdata dalam format URL"
itemprop="value tertentu yang berkaitan dengan microdata"
itemref="id yang berisi microdata"
itemscope="jangkauan item pada sebuah microdata"
itemtype="tipe microdata dalam format URL"
lang="kode bahasa"
spellcheck="true | false"
style="kode css style"
tabindex="nomor index"
title="judul untuk sebuah element"
translate="yes | no"
/* Untuk microdata, dapat dipelajari melalui http://schema.org */
Penjelasan & Contoh
Macam-macam Global Attribute
Menentukan shortcut key (tombol pintas) pada keyboard untuk mengaktifkan elemen atau fokus pada element. Dalam penggunaan tombol pintas, berbeda-beda pada setiap browser.
Menuju <a href="https://www.google.com" accesskey="g">google.com</a>
Dari hasil kode HTML diatas, untuk menuju google.com, bagi pengguna browser Chrome, IE, dan Safari (Webkit) gunakan kombinasi keyboard Alt + g yang mana g adalah value dari accesskey yang kita tentukan, dan untuk pengguna Firefox adalah Alt + Shift + g
class attribute digunakan untuk menentukan nama class pada sebuah element. Penggunaannya boleh lebih dari satu nama class dalam satu element. Silahkan, pelajari juga CSS Class Selector .
<div class="container">
<p class="artikel intro"> Intro Artikel </p>
</div>
Atribut contenteditable digunakan untuk menentukkan sebuah elemen HTML apakah dapat diedit secara langsung atau tidak. Pilihan value-nya adalah sebagai berikut:
- true atau tanpa value (kosong), yang menunjukkan bahwa element dapat diedit;
- false, yang menunjukkan bahwa element tidak dapat diedit.
<p>Paragraf ini tidak bisa diedit.</p>
<p contenteditable="true">Paragraf ini bisa diedit, silahkan klik aku!</p>
contextmenu attribute adalah atribut HTML yang digunakan untuk memberikan menu konteks (context menu) pada sebuah element ketika ada interaksi dari user, seperti mengklik kanan dengan mouse. Value dari contextmenu merupakan nama id yang terdapat pada HTML tag <menu> sebagai rujukan daftar menu yang akan diintegrasikan pada atribut contexmenu tersebut.
<div contextmenu="ukuranFont" id="ubahFont">
Klik kanan pada kotak ini, Temukan menu tambahan untuk memperbesar dan memperkecil font. Telah dicoba pada browser mozilla firefox terbaru dan berjalan lancar.
<menu type="context" id="ukuranFont">
<menuitem label="Perbesar Ukuran Font" onclick="perbesarFont()"></menuitem>
<menuitem label="Perkecil Ukuran Font" onclick="perkecilFont()"></menuitem>
</menu>
</div>
div#ubahFont{
width: 100%;
height: 100%;
border: 1px solid #555;
padding: 1em;
}
function perbesarFont(){
document.getElementById("ubahFont").style.fontSize="larger";
}
function perkecilFont(){
document.getElementById("ubahFont").style.fontSize="smaller";
}
data-* attribute digunakan untuk menyisipkan nama attribute yang dapat kita tentukan sendiri setelah kata "data-". Nama attribute tidak boleh mengandung huruf kapital dan jarak (spasi). Ini, biasanya digunakan pada sebuah aplikasi atau halaman khusus yang mana akan dieksekusi oleh javascript.
<p data-artikel="Artikel Bebas">Ini adalah: </p>
Contoh Data Attribute yang diterapkan pada CSS style:
/* attribute selector */
p[data-artikel]:after {
/* tambahkan konten setelah </p> yang diambil dari value "data-artikel" */
content: attr(data-artikel);
color: green;
}
Ini adalah:
dir attribute digunakan untuk menentukan arah tulisan konten/teks pada sebuah element. Contohnya, Bahasa Indonesia ditulis dari kiri ke kanan, sedangkan Bahasa Arab ditulis dari kanan ke kiri.
<p >Allah Maha Besar</p>
<p lang="ar" dir="rtl">اللهُ أَكْبَرُ</p>
Allah Maha Besar
اللهُ أَكْبَرُ
Pada contoh diatas, tulisan Allah Maha Besar (Bahasa Indonesia) berada disisi kiri, tepatnya dari kiri ke kanan (left-to-right). Sedangkan, tulisan Bahasa Arab berada disisi kanan (right-to-left)
draggable attribute digunakan untuk menentukan apakah sebuah element dapat di-drag (diseret dan dipindahkan) atau tidak.
dropzone attribute digunakan untuk menentukan jenis konten apa yang dapat di-drop pada sebuah element. Adapun value-nya adalah sebagai berikut:
copy, menunjukkan tindakan mendrop element yang menghasilkan salinan (copy) element yang di-drag.move, menunjukkan element yang di-drag akan dipindahkan ke lokasi element yang di-drop.link, akan menghasilkan sebuah link yang akan merujuk pada data yang di-drag.
hidden attribute digunakan untuk menyembunyikan sebuah element. Element yang disembunyikan tersebut dengan maksud sudah tidak relevan dengan konten sekitarnya.
id merupakan attribute unik yang mana dalam sebuah dokumen (halaman web) hanya terdapat satu nama id dan tidak boleh lebih dari satu nama id yang sama.
lang attribute digunakan untuk menentukan bahasa apa yang ditulis pada sebuah konten di dalam element.
Berikut contoh ucapan "Aku Cinta Kamu" dalam Berbagai Bahasa yang menggunakan attribut lang dengan value sesuai dengan kode bahasa masing-masing.
<p lang="id">Aku Cinta Kamu</p> <!-- Bahasa Indonesia -->
<p lang="jv">Aku Tresno Karo Koe</p> <!-- Bahasa Jawa -->
<p lang="su">Abdi bogoh ka Anjeun</p> <!-- Bahasa Sunda -->
<p lang="en">I Love You</p> <!-- Bahasa Inggris (English)-->
<p lang="ar" dir="rtl">أَناَ أُحِبُّكْ</p> <!-- Bahasa Arab (Arabic)-->
<p lang="zh">我愛你 (góa ài lì)</p> <!-- Chinese (Taiwanese) -->
<p lang="fr">Je t'aime, Je t'adore</p> <!-- Bahasa Prancis (French) -->
<p lang="ja">好きです (suki desu)</p> <!-- Bahasa Jepang (Japanese) -->
<p lang="de">Ich liebe dich</p>
spellcheck attribute digunakan untuk menentukan apakah sebuah text harus dicek kebenaran atas ejaan dan tata bahasa (grammar)-nya atau tidak.
<p>Perbedaan Teks area dengan spellcheck <strong>true</strong> dan <strong>false</strong></p>
<textarea >Click Me! I loooove you. spellcheck='true'
</textarea>
<textarea spellcheck="false">Click Me! I loooove you. spellcheck="false"
</textarea>
<p>
Secara default, pada sebuah textarea browser akan mengecek ejaan tulisan. Jika salah, maka ditandai dengan warna garis merah bawah. pada textarea dengan spellcheck="false" artinya, jangan ditandai (garis merah bawah) meskipun salah ejaan.
</p>
Perbedaan Teks area dengan spellcheck true dan false
Secara default, pada sebuah textarea browser akan mengecek ejaan tulisan. Jika salah, maka ditandai dengan warna garis merah bawah. pada textarea dengan spellcheck="false" artinya, jangan ditandai (garis merah bawah) meskipun salah ejaan.
style merupakan attribute HTML yang digunakan untuk menyisipkan style (CSS) khusus untuk element itu sendiri, juga dinamakan inline style.
tabindex digunakan untuk menentukan urutan penggunaan tab pada sebuah papan tombol (keyboard) dalam mengakses sebuah element.
title digunakan sebagai judul informasi tambahan pada sebuah element. Biasanya ketika pointer menyentuh / berada diatas element tersebut maka akan muncul sebuah teks sesuai dengan value yang ditulis pada attribute title tersebut.
translate digunakan untuk menentukan apakah sebuah konten dari element harus diterjemahkan (translate) atau tidak.
SHARE