Elemen teks inline lainnya

Kita telah membahas sebagian besar, tapi tidak semua, elemen HTML. Satu area yang belum kita bahas adalah elemen teks inline. Berlawanan dengan kepercayaan umum, HTML pada awalnya dimaksudkan untuk berbagi dokumen, bukan video kucing. Ada banyak elemen yang menyediakan semantik teks untuk dokumentasi. Ada modul yang membahas link dan elemen <a>. Elemen-elemen lainnya akan dibahas secara singkat di sini.

Contoh kode dan penulisan teknis

Saat mendokumentasikan contoh kode, gunakan elemen <code>. Secara default, konten teks ditampilkan dengan font spasi tunggal. Saat menyertakan beberapa baris kode, tempatkan <code> di dalam elemen <pre>, yang mewakili teks yang telah diformat sebelumnya.

<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 bagian konten tertentu dengan terjemahan yang dapat dibaca mesin; atribut value elemen menyediakan terjemahan konten yang dapat dibaca mesin. Jika konten <data> terkait dengan waktu atau tanggal, elemen <time>, yang mewakili periode waktu tertentu harus digunakan.

Elemen <time> dapat menyertakan atribut datetime untuk memberikan waktu dan tanggal yang mudah dibaca dalam format yang dapat dibaca mesin. Agar dapat dibaca oleh mesin, atribut datetime memberikan informasi yang berguna untuk aplikasi seperti kalender dan mesin telusur.

Saat memberikan contoh output dari suatu program, gunakan elemen <samp> untuk mengapit teks. Browser umumnya akan merender contoh atau output yang dikutip ini dalam font spasi tunggal juga.

Saat memberikan petunjuk dengan interaksi keyboard, elemen <kbd> dapat digunakan. Hal ini mewakili 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 menampilkan konten teks dalam versi miring dari font di sekitarnya. Jika menulis banyak soal matematika, pertimbangkan untuk menggunakan MathML, Bahasa Markup Matematika berbasis XML untuk mendeskripsikan notasi matematika.

Kekuatan dua dalam teorema Pythagoras menggunakan elemen superskrip <sup>. Ada elemen subskrip <sub> serupa yang menentukan teks inline yang harus ditampilkan sebagai subskrip hanya untuk alasan tipografi. Superskrip dan subskrip adalah angka, angka, simbol, atau anotasi lain yang lebih kecil daripada garis jenis normal dan masing-masing ditetapkan sedikit di atas atau di bawah garis.

Gunakan <del> untuk menunjukkan teks yang telah dihapus, atau "dihapus". Secara opsional, sertakan cite yang disetel ke resource yang menjelaskan perubahan dan atribut datetime dengan tanggal atau 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 sebenarnya tidak dihapus dari dokumen.

<ins> adalah kebalikan dari elemen <del>; elemen ini digunakan untuk menunjukkan teks yang telah ditambahkan, atau "disisipkan", juga secara opsional menyertakan atribut cite atau datetime.

Definisi dan dukungan bahasa

Saat menyertakan singkatan atau akronim, selalu berikan versi lengkap istilah yang diperluas dalam teks biasa pada penggunaan pertama, saat Anda memperkenalkan representasi singkat istilah antara tag <abbr> pembuka dan penutup; kecuali jika istilah tersebut dikenal oleh pembaca, seperti "HTML" dan "CSS" dalam seri ini. <abbr> hanya diperlukan pada kemunculan pertama ini jika singkatan atau akronim ditentukan. Atribut title tidak diperlukan atau tidak membantu.

Saat menentukan istilah yang bukan merupakan singkatan atau akronim, gunakan elemen definisi <dfn> untuk mengidentifikasi istilah yang didefinisikan dalam konten di sekitarnya.

Jika istilah yang ditentukan tidak dalam bahasa yang sama dengan teks di sekitarnya, pastikan untuk menyertakan atribut lang untuk mengidentifikasi bahasa.

Saat menulis bahasa dari arah yang berbeda, HTML menyediakan elemen <bdi> untuk memperlakukan teks yang berpotensi dua arah secara terpisah dari teks di sekitarnya. Elemen internasionalisasi ini sangat berguna saat konten dengan arah yang tidak diketahui disisipkan secara dinamis ke halaman. Elemen <bdo> mengganti arah teks saat ini, merender teks ke arah yang berbeda. W3C memberikan pengantar algoritma dua arah.

Beberapa himpunan karakter menyertakan anotasi kecil yang ditempatkan di atas atau di sebelah kanan karakter untuk memberikan informasi tentang pengucapan. Elemen <ruby> adalah penampung yang digunakan untuk memuat anotasi tersebut agar bahasa tertulis seperti Korea, China, dan Jepang lebih mudah dibaca. Ruby juga dapat digunakan untuk bahasa Ibrani, Arab, dan Vietnam.

Tanda kurung rubi (<rp>) disertakan dalam spesifikasi untuk berisi tanda kurung buka dan tutup untuk browser yang tidak mendukung tampilan <ruby>. Jika browser mendukung <ruby>, yang didukung oleh semua browser evergreen, konten elemen <rp> tidak akan ditampilkan. Elemen teks ruby (<rt>) berisi anotasi yang sebenarnya. Keduanya disusun bertingkat 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 penekanan teks (bukan untuk alasan presentasi, karena itu adalah tugas untuk CSS).

  • Gunakan elemen <em> untuk menekankan atau menekankan rentang konten. Elemen <em> dapat disusun bertingkat, dengan setiap tingkat susunan menunjukkan tingkat penekanan yang lebih besar. Elemen ini memiliki makna semantik dan dapat digunakan untuk menginformasikan agen pengguna auditori seperti pembaca layar, Alexa, dan Siri, untuk memberikan penekanan.
  • Gunakan elemen <mark> untuk mengidentifikasi atau menandai teks yang tampak relevan, seperti menandai (atau "menandai") kemunculan istilah penelusuran di hasil penelusuran. Hal ini memungkinkan konten yang ditandai diidentifikasi dengan cepat tanpa menambahkan penekanan atau kepentingan.
  • Elemen <strong> mengidentifikasi teks sebagai memiliki nilai penting yang kuat. Browser biasanya merender konten dengan ketebalan font yang lebih berat.
  • 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 keperluan tersebut, seperti nomor ISBN buku.

Ada tiga elemen yang tidak digunakan lagi untuk sementara, tetapi telah ditambahkan kembali ke HTML. Elemen ini harus digunakan seperlunya, jika sama sekali, karena memberikan sedikit atau tidak ada nilai semantik dan CSS harus selalu digunakan untuk penataan gaya di atas elemen HTML.

<i>

Elemen <i> dapat digunakan untuk istilah teknis, kata asing (sekali lagi, dengan atribut lang yang mengidentifikasi bahasa), pemikiran, atau nama kapal. Elemen ini digunakan untuk membedakan konten inline dari teks di sekitarnya karena alasan tertentu, seperti teks idiomatis, istilah teknis, dan pengelompokan taksonomi. Elemen ini tidak boleh digunakan hanya untuk memiringkan teks.

MLW menggunakan elemen <span> untuk teks aneh di bagian bawah ulasan workshop Toasty McToastface. Elemen <span> menyediakan penampung inline generik yang tidak memiliki semantik dan tidak merepresentasikan apa pun. Ini juga akan menjadi penggunaan <i> yang tepat.

Gaya default untuk elemen <i> adalah merender elemen dalam font miring. Dalam contoh ini, kami menetapkan font-style: normal karena karakter yang digunakan tidak tersedia dalam huruf miring.

<u>

Elemen <u> digunakan untuk konten yang memiliki anotasi non-tekstual. Misalnya, Anda mungkin ingin menganotasi kata yang salah eja. Secara default, konten digarisbawahi, tetapi hal ini dapat dikontrol dengan CSS, seperti dengan menambahkan garis bawah bergelombang berwarna merah untuk meniru indikator error tata bahasa pemroses kata.

<p>I always spell <u>licence</u> wrong</p>

<b>

Elemen <b> dapat digunakan untuk menarik perhatian ke teks yang tidak penting. Elemen ini tidak menyampaikan informasi semantik khusus dan hanya boleh digunakan jika tidak ada elemen lain di bagian ini yang sesuai dengan tujuannya. Tidak ada contoh yang diberikan karena saya tidak dapat memberikan kasus penggunaan yang valid; begitulah cara "upaya terakhir" elemen ini.

Ruang putih

Jika Anda menginginkan jeda berbaris, seperti saat menulis puisi atau alamat fisik, elemen jeda 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, antar-bagian konten yang bersinggungan, seperti antara bab dalam buku atau antara 5.000 kata monolog dan resep yang benar-benar dicari pengguna, sertakan elemen <hr>. HR adalah singkatan dari "horizontal rule". Meskipun browser umumnya merender garis horizontal, elemen ini memiliki makna semantik. Peran default adalah separator.

HTML juga memiliki elemen yang memungkinkan untuk memecah kata. Elemen <wbr> yang menutup sendiri memberikan saran kepada browser bahwa jika sebuah kata mungkin melampaui penampungnya, ini adalah tempat di mana browser dapat melanggar baris secara opsional. Ini biasanya digunakan untuk memisahkan kata dalam URL yang panjang. Tidak menambahkan tanda hubung.

Misalnya, dalam biografi Hal ada teks yang ditulis dalam kode byte, dengan setiap byte dipisahkan oleh spasi. Kode byte tidak memiliki spasi. Agar string panjang kode byte hanya berhenti di antara byte jika baris perlu digabungkan, kita menyertakan elemen <wbr> pada 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> semuanya adalah elemen kosong, yang berarti elemen tersebut tidak dapat memiliki node turunan – baik elemen bertingkat maupun teks. Karena tidak ada yang memiliki "di dalam" tempat konten dapat disimpan, semuanya tidak memiliki tag akhir.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang teks sisipan.

Elemen manakah yang harus digunakan untuk menampilkan contoh kode?

<code>
Benar.
<data>
Coba lagi.
<kbd>
Coba lagi.

Untuk apa elemen <ruby> digunakan?

Untuk berisi elemen dekoratif.
Coba lagi.
Untuk anotasi yang digunakan dalam beberapa bahasa.
Benar.
Untuk menandai konten elemen.
Coba lagi.