Kita telah membahas sebagian besar, tapi tidak semua, elemen HTML. Salah satu area yang belum kami bahas adalah elemen teks inline.
Bertentangan dengan kepercayaan populer, HTML pada awalnya ditujukan untuk berbagi dokumen, dan bukan video kucing. Ada banyak elemen
yang menyediakan semantik teks
untuk dokumentasi. Ada modul yang mencakup link dan elemen <a>
. Sisanya
yang akan dibahas secara singkat di sini.
Contoh kode dan penulisan teknis
Saat mendokumentasikan contoh kode, gunakan elemen <code>
. Menurut
secara default, konten teks ditampilkan dalam font spasi tunggal. Saat menyertakan beberapa baris kode, sarangkan <code>
di dalam
Elemen <pre>
, yang mewakili teks yang telah diformat.
<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
<code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>
Elemen <data>
menautkan konten tertentu dengan
terjemahan yang dapat dibaca mesin; atribut value
elemen menyediakan terjemahan konten yang dapat dibaca mesin
elemen ini. Jika konten <data>
terkait dengan waktu atau tanggal, <time>
, yang mewakili periode waktu tertentu yang harus digunakan.
Elemen <time>
dapat menyertakan atribut datetime
untuk memberikan waktu dan tanggal yang mudah dibaca manusia dalam format yang dapat dibaca mesin.
Agar dapat dibaca mesin, atribut datetime
memberikan informasi yang berguna untuk aplikasi seperti kalender dan mesin telusur.
Saat memberikan contoh output dari program, gunakan <samp>
elemen untuk mengapit teks. Browser umumnya akan merender contoh ini atau output yang dikutip dalam font spasi tunggal juga.
Saat memberikan petunjuk dengan interaksi keyboard, <kbd>
dapat digunakan. Jenis ini merepresentasikan input pengguna tekstual dari keyboard, input suara, atau perangkat entri teks lainnya.
Elemen <var>
dapat digunakan untuk ekspresi matematika atau
variabel pemrograman. Sebagian besar browser menyajikan konten teks dalam versi miring dari font di sekitarnya.
Jika menulis banyak soal matematika, pertimbangkan untuk menggunakan MathML, XML berbasis
Bahasa Markup Matematika untuk mendeskripsikan notasi matematika.
Pangkat dua dalam teorema Pythagoras menggunakan superskrip <sup>
. Ada elemen subskrip <sub>
serupa yang menentukan
teks inline yang harus ditampilkan sebagai subskrip semata-mata untuk alasan tipografi. Superskrip dan subskrip
adalah angka,
gambar, simbol, atau anotasi lain yang lebih kecil dari garis tipe normal dan diatur sedikit di atas atau di bawah garis,
secara berurutan.
Gunakan <del>
untuk menunjukkan teks yang telah dihapus, atau "dihapus".
Secara opsional, sertakan cite
yang ditetapkan ke referensi yang menjelaskan
dan atribut datetime
dengan atribut
tanggal dan waktu dalam format tanggal
dan waktu yang dapat dibaca mesin. Elemen yang dicoret, <s>
,
dapat digunakan untuk menunjukkan bahwa konten tidak lagi relevan, tetapi tidak benar-benar dihapus dari dokumen.
<ins>
adalah kebalikan dari elemen <del>
; digunakan
untuk menunjukkan teks yang telah ditambahkan, atau "disisipkan", juga secara opsional menyertakan atribut cite
atau datetime
.
Definisi dan dukungan bahasa
Bila menyertakan singkatan atau akronim, selalu berikan versi lengkap istilah yang diperluas dalam teks biasa pada penggunaan pertama,
saat Anda memperkenalkan representasi singkat dari istilah antara <abbr>
pembuka dan penutup
{i>tag<i}; kecuali jika istilah tersebut familier bagi pembaca, seperti "HTML" dan "CSS" dalam rangkaian kursus ini. Hanya pada kejadian pertama ini,
jika singkatan atau akronim didefinisikan, diperlukan <abbr>
. Atribut title
tidak diperlukan atau tidak berguna.
Saat menentukan istilah yang bukan singkatan atau akronim, gunakan definisi <dfn>
untuk mengidentifikasi istilah yang didefinisikan di dalam konten di sekitarnya.
Jika istilah yang ditentukan tidak dalam bahasa yang sama dengan teks di sekitarnya, pastikan untuk menyertakan lang
untuk mengidentifikasi bahasa.
Saat menulis bahasa untuk berbagai arah, HTML menyediakan <bdi>
untuk menangani teks yang berpotensi dua arah secara terpisah dari teks di sekitarnya. Internasionalisasi ini
terutama berguna saat konten yang arahnya tidak diketahui disisipkan secara dinamis ke dalam halaman. Tujuan
Elemen <bdo>
mengganti arah teks saat ini,
merender teks ke arah yang berbeda. W3C menyediakan pengantar algoritma dua arah.
Beberapa himpunan karakter menyertakan anotasi kecil yang ditempatkan di atas atau di sebelah kanan karakter untuk memberikan informasi
pada pengucapan. Elemen <ruby>
adalah container untuk
gunakan untuk memuat anotasi yang membuat bahasa tertulis seperti Korea, China, dan Jepang lebih mudah dibaca. Rubi
juga dapat dipakai untuk bahasa Ibrani, Arab, dan Vietnam.
Tanda kurung rubi (<rp>
) disertakan dalam spesifikasi untuk
berisi tanda kurung buka dan tutup
untuk {i>browser<i} yang tidak
mendukung tampilan <ruby>
. Jika browser mendukung <ruby>
, yang dimiliki semua browser evergreen, konten dari semua elemen <rp>
tidak ditampilkan. Elemen teks ruby (<rt>
) berisi
anotasi yang sebenarnya. Keduanya berada di dalam <ruby>
.
Perhatikan bahwa tanda kurung tidak terlihat jika browser Anda mendukung <ruby>
.
Menekankan teks
Ada beberapa elemen yang dapat digunakan untuk menekankan teks berdasarkan alasan semantik untuk menekankan teks (daripada untuk alasan presentasi, karena itu adalah tugas CSS).
- Gunakan elemen
<em>
untuk menekankan atau menekankan rentang konten. Elemen<em>
dapat disusun bertingkat, dengan setiap tingkat bertingkat menunjukkan tingkat penekanan yang lebih besar. Elemen ini memiliki semantik bermakna dan dapat digunakan untuk menginformasikan agen pengguna pendengaran seperti pembaca layar, Alexa, dan Siri, untuk memberikan penekanan. - Gunakan elemen
<mark>
untuk mengidentifikasi atau menandai teks yang relevan, seperti menyoroti (atau "menandai") kemunculan istilah penelusuran di hasil penelusuran. Hal ini memungkinkan konten yang ditandai agar dapat diidentifikasi dengan cepat tanpa menambahkan penekanan atau kepentingan. - Elemen
<strong>
mengidentifikasi teks sebagai teks yang kuat tingkat kepentingan. Browser biasanya merender konten dengan ketebalan {i>font<i} yang lebih tebal. - Elemen
<cite>
, yang tercakup dalam dasar-dasar teks, digunakan untuk menandai judul buku, artikel, atau karya kreatif lainnya, atau referensi singkat atau metadata kutipan untuk seperti nomor ISBN buku.
Ada tiga elemen yang untuk sementara tidak digunakan lagi, tetapi telah ditambahkan kembali ke HTML. Mereka harus digunakan dengan hemat, jika ada, karena memberikan sedikit atau tidak ada nilai semantik dan CSS harus selalu digunakan untuk menata gaya pada elemen HTML.
<i>
Elemen <i>
dapat digunakan untuk istilah teknis, kata-kata asing
(sekali lagi, dengan atribut lang
yang mengidentifikasi
bahasa), pikiran, atau nama kapal. Elemen ini digunakan untuk membedakan konten {i>inline<i} dari teks di sekitarnya untuk alasan tertentu,
seperti teks idiomatis, istilah
teknis, dan sebutan taksonomi. Elemen ini tidak boleh digunakan hanya untuk memiringkan teks.
MLW menggunakan elemen <span>
untuk teks aneh di bagian bawah ulasan workshop Toasty McToastface. <span>
menyediakan kontainer inline generik yang tidak memiliki semantik dan tidak mewakili apa pun. Hal ini juga akan menjadi penggunaan <i>
yang tepat.
Gaya default untuk elemen <i>
adalah merender elemen dalam font miring. Dalam contoh ini, kita menetapkan font-style: normal
karena karakter yang digunakan tidak dicetak miring.
<u>
Elemen <u>
ditujukan untuk konten yang memiliki anotasi non-tekstual. Misalnya,
Anda mungkin ingin memberi anotasi pada
kata-kata yang salah eja. Secara {i>default<i}, konten digarisbawahi, tetapi ini dapat dikontrol dengan CSS,
misalnya dengan menambahkan garis bawah bergelombang merah untuk meniru indikator kesalahan tata bahasa pengolah kata.
<p>I always spell <u>licence</u> wrong</p>
<b>
Elemen <b>
dapat digunakan untuk menarik perhatian ke teks yang tidak
sebaliknya, hal itu penting. Elemen ini tidak menyampaikan informasi semantik khusus dan hanya boleh digunakan jika tidak ada elemen
di bagian ini sesuai
dengan tujuannya. Tidak ada contoh yang diberikan karena saya tidak dapat menemukan kasus penggunaan yang valid; begitulah "upaya terakhir"
elemen ini.
Ruang putih
Saat Anda menginginkan jeda bergaris, seperti saat menulis puisi atau alamat fisik, elemen pemisah baris yang menutup sendiri,
<br>
, digunakan untuk menambahkan enter.
<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA 94040
</address>
Untuk memberikan pemisah, atau jeda tematik, antara bagian-bagian konten yang tidak berkaitan, seperti antara bab dalam buku atau
antara 5.000 kata monolog dan resep yang sebenarnya dicari pengguna Anda, sertakan <hr>
. HR adalah singkatan dari "aturan horizontal". Meskipun browser umumnya merender garis horizontal, elemen ini memiliki arti semantik. Tujuan
peran default adalah separator
.
HTML juga memiliki elemen yang memungkinkan untuk memecah kata. <wbr>
yang menutup sendiri
memberi saran ke browser bahwa jika sebuah kata mungkin melebihi kontainernya, di sinilah browser menjadi tempat browser
bisa saja melanggar batas secara opsional. Ini biasanya digunakan untuk menyela
di antara kata-kata dalam
URL panjang. Perintah ini tidak menambahkan tanda hubung.
Misalnya, dalam biografi Hal terdapat teks yang ditulis dalam kode byte, dengan setiap byte dipisahkan oleh spasi. Kode byte
tidak memiliki spasi. Untuk mengaktifkan string panjang kode byte agar hanya dapat terputus di antara byte jika baris tersebut perlu dibungkus, kita menyertakan
elemen <wbr>
di setiap peluang jeda:
<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>
Elemen <br>
, <hr>
, dan <wbr>
merupakan elemen kosong, yang berarti elemen tersebut tidak boleh memiliki node turunan – juga tidak bertingkat
elemen atau teks. Karena tidak satu pun dari kategori tersebut
memiliki "bagian dalam" di mana konten dapat disimpan, mereka tidak memiliki tag akhir.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang teks {i>inline<i}.
Elemen mana yang harus digunakan untuk menampilkan contoh kode?
<code>
<data>
<kbd>
Untuk apa elemen <ruby>
digunakan?