Kategori
Web Accessibility Web Standards

Tag semantik HTML5 level teks

Diperbarui 30 November 2017 oleh Dani Iswara

Bahasa penulisan web terkini, HTML5, mendukung pemakaian tag yang semantik. Berikut ini beberapa contoh penggunaannya di level teks.

Dalam rangka peralihan dari XHTML 1.1 ke HTML5, sedikit demi sedikit perbedaan itu mulai tercerahkan. Ada beberapa elemen atau tag baru beserta fungsinya. Sebagian besar masih terasa tidak jauh berbeda.

Tautan, a. Jika disertai atribut href, tautan/’hyperlink’ yang diakses akan menuju ke sisi lain halaman atau membuka halaman lain. Tanpa atribut href mestinya menandakan tautan sedang Anda akses.
Contoh: Kembali ke atas. Atau tetap di halaman ini.

Penekanan, em. Memberi makna penekanan/’emphasis’ pada kata tertentu.
Contoh: Tampilannya kelihatan miring. Otaknya tentu tidak.

Penekanan penting, strong. Maknanya lebih penting dibanding em di atas.
Contoh: Wujudnya tegak, terlihat ukurannya lebih tebal dan besar.

Komentar tambahan, small. Berupa kalimat pendek untuk komentar tambahan. Ukuran teksnya lebih kecil.
Contoh: Kos di Renon, fasilitas lengkap..

Elemen s, s. Untuk menyatakan teks yang sudah tidak akurat. Disertai pembaruannya. Tetapi bukan untuk mengedit teks. Jadi berbeda dengan fungsi del.
Contoh: Harga diskon Rp 25.000 Rp 20.000.

Sitasi, cite. Digunakan untuk merujuk pembuat karya kreatif. Bisa nama penulis, penemu, pembuat film, tautan organisasi dan sebagainya.
Contoh: Puisi “Aku” karya Chairil Anwar dibawakan dengan baik.

Kuotasi pendek, q. Untuk mencantumkan kuotasi/’quote’ beberapa kata atau kalimat yang berupa kutipan dari sumber lain.
Contoh: Dalam kitab Sutasoma disebutkan Bhinneka Tunggal Ika Tan Hana Dharma Mangrwa.

Memberi definisi, dfn. Dipakai untuk mendefinisikan/’define’ suatu istilah.
Contoh: Semantik menurut KBBI versi V:

  1. n Ling ilmu tentang makna kata dan kalimat; pengetahuan mengenai seluk-beluk dan pergeseran arti kata
  2. n Ling bagian struktur bahasa yang berhubungan dengan makna ungkapan atau struktur makna suatu wicara.

Singkatan, abbr. Jika perlu menyampaikan singkatan bisa memakai elemen ini. Tetapi untuk kepentingan dokumen siap cetak sebaiknya hindari elemen ‘abbreviation’.
Contoh: Sekarang kita sedang belajar HTML5. Standar ini dibuat oleh ‘World Wide Web Consortium’ (W3C).

Data, data. Bersama dengan atribut value, elemen data memuat informasi yang bisa dibaca oleh mesin dan manusia. Formatnya menyesuaikan dengan standar ‘microformat’ atau ‘microdata’.
Contoh:

<ul class="motor"><li data-models="150cc, injeksi, bebek, ayago, manual">underbone</li></ul>

Waktu, time. Mikroformat ini berhubungan dengan waktu dan dapat dibaca mesin. Ditambah atribut datetime yang valid sesuai standar internasional.
Contoh: Gunung Agung diperkirakan meletus lebih besar tanggal !

Kode komputer, code. Bisa berupa nama berkas, program komputer atau kode HTML.
Contoh: Tag strike dianggap sudah usang.

Variabel, var. Elemen ini digunakan dalam penulisan kalimat matematika, fisika atau parameter tertentu. Lebih tepat jika dipakai bersamaan dengan dengan MathML.
Contoh: E = m c2

Contoh ‘output’, samp. Bentuk ‘sample’ maksudnya contoh ‘output’ dari pemrograman komputer. Bisa berupa pesan galat, info teknis atau bahasa mesin lainnya.
Contoh: Unfortunately the process.com.android.phone has stopped.

Input ‘keyboard’, kbd. Input pengguna via papan ketik, layar sentuh, perintah suara atau gerakan bisa disampaikan dengan elemen ini.
Contoh: Tekan tombol Share untuk membagi.

Superscript‘ dan ‘Subscript‘, sup, sub. Selain sering digunakan dalam kalimat matematika, bisa juga diaplikasikan pada tipografi untuk rujukan/referensi ilmiah.
Contoh:
x2 + xy
Contoh lain:
2H2O + O2 ? 2H2O2

Elemen ‘italic’, ‘bold’ dan ‘underline’. Ini mungkin elemen yang paling familiar bagi kebanyakan pengguna yang terbiasa mengetik. Kode i, b, u lebih berfungsi visual. Menjadi tidak aksesibel bagi pengguna difabel yang kurang jelas penglihatannya. Gunakan elemen tersebut hanya saat benar-benar diperlukan. Jika memungkinkan lebih baik memakai em, strong atau mark.
Tidak perlu contoh ya.

Penanda, mark. ‘Highlight’ ditujukan sebagai penanda pada bagian tertentu suatu blok kalimat atau paragraf. Fungsinya mirip dengan penekanan kata pada em dan strong.
Contoh: Berbeda-beda tetapi tetap satu juga.

Anotasi ‘ruby’, ruby. Ini mestinya butuh bahasan tersendiri. Ringkasnya, ruby adalah sederet teks tambahan sebagai catatan atau penjelasan teks utama. Biasanya tipografi ini dipakai bersamaan dengan huruf Jepang (dikenal sebagai furigana).
Contoh: huruf kanji di siniini teks keterangannya

Elemen lainnya ada span, bdi (‘bidirectional’), bdo (‘bidirectional override’), br (‘line break’) dan wbr (‘line break opportunity’). Yang terakhir-terakhir menyusul bahasannya.

Bacaan: Text-level semantics HTML5 (W3.org).

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.