Di artikel yang sudah lalu kita sudah membahas tentang elemen html5 beserta demo fungsi-fungsinya. Elemen baru seperti header,footer,aside,nav dan main akan membuat struktur dokumen html lebih semantic atau “memiliki arti”. Elemen ini juga akan membantu mesin dengan mudah memahami sesi pada dokumen html
Tapi spesifikasi html sangat luas, jika kita mengunjungi https://www.w3.org/ dimana dokumentasi html berada, kamu akan menemui ratusan halaman dokumentasi pada tiap elemen.
Elemen sederhana
Elemen sederhana atau samp mendefinisikan keluaran dari system computer, sebuah program atau script.
Elemen tersebut dikenalkan pada html3. Elemen ini akan sangat berguna untuk membuat tutorial atau panduan computer.
Contoh dibawah ini menunjukan bagaimana kami membungkus error yang terjadi via terminal
If you type dir in Terminal, it will output command not found: dir.
Semua browser termasuk IE5, mendukung elemen ini dan mereka akan menampilkan monospace typeface seperti code dan pre elemen
Keyboard input elemen
Keyboard input elemen atau kbd adalah sebuah elemen yang mendefinisikan inputan user. Sama seperti samp elemen, kbd umumnya digunakan dalam teknologi artikel yang berkaitan dengan computer.
Katakana kamu ingin menginstruksikan pembaca untuk memilih karakter tertentu pada field input. Kamu dapat membuat karakter teks kbd seperti
To confirm deletion of your account, type DELETE.
Kbd juga dapat digunakan untuk merepresentasikan tombol keyboard yang sebenarnya
Press Enter to create a new line.
Tapi ketika digunakan bersama samp elemn itu akan merepresentasikan masukan yang terjadi pada layar, ini contohnya
Click Agree to proceed.
Kbd elemen secara ekplisit mendeskripsikan inputan keyboard, kita juga dapat menggunakan itu untuk tipe inputan yang lain, seperti voice input.
Jika kamu menulis tutorial atau buku panduan di siri,google voice atau Cortana semua itu memberikan kita komunikasi dengan perangkat menggunakan perintah suara.
Seperti ini contohnya
…the Ok Google hotword isn’t actually disabled according to region
and can be easily enabled in just two steps.
Sama seperti samp, kbd juga mengeluarkan monospace typeface berdasarkan default.
Saran styling
Elemen ini akan menbantu mesin memahami konten dengan baik. Tapi sejak di render menggunakan monospace typeface, pembaca akan kesulitan membedakannya. Dalam kasus ini kita akan menambahkan styling untuk membuat tampilan lebih kece.
Kami akan menambahkan class, sebagai contoh button-input jika itu merepresentasikan tombol keyboard atau tombol aplikasi
Nah ini CSS yang dipake
[php].button-input {
border: 1px solid #333;
background: linear-gradient(#aaa 0%, #555 100%); /* W3C */
color: #fff;
padding: 3px 8px;
border-radius: 3px;
box-shadow: 0px 2px 0px 0px #111;
}[/php]
Styling di atas akan tampak seperti
Variable elemen
Variable elemen atau var, seperti namanya yaitu merepresentasikan sebuah variable karakter.
Elemen ini mungkin berguna untuk menulis tutorial atau artikel yang berkaitan dengan matematik
Contohnya var y = Math.sqrt(16);
Conoth di atas, kita membungkus rumus dengan elemen code.
Mendefinisikan elemen
Mendefinisikan elemen atau dfn digunakan unutk memperjelas kalimat jargon atau kata mutiara
Yang paling utama digunakan unutk komunitas atau pun perindustrian. Contohnya Industry pengembangan web pasti banyak jargon-jargon yang dipake yang bisa dijadikan takeline gitu
Dan dibawah ini contoh kodenya
Breadcrumbs or breadcrumb trail is a navigation aid
used in user interfaces. It allows users to keep track of their locations within programs or documents.
The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.
Tampilannya akan seperti ini
Menandai elemen
Menamdai elemen baru dikenalkan pada html5. Singkatnya penandaan ini untuk memperjelas teks yang ingin diberikan perhatian ke pembaca
Contohnya
Kesimpulan
Alih-alih menggunakan elemen generik seperti div atau span, lebih baik untuk membungkus konten Anda dalam elemen lebih semantik seperti yang tercantum di atas , sehingga mesin – baik itu aplikasi , bot , atau perangkat membaca – bisa lebih memahami isi . Mudah-mudahan , artikel ini bisa menjadi referensi yang baik untuk memulai .
