Elemen teks inline lainnya

Kita telah membahas sebagian besar, tetapi tentu saja tidak semua, elemen HTML. Salah satu area yang belum kita bahas adalah elemen teks sebaris. Berbeda dengan anggapan umum, HTML awalnya ditujukan untuk berbagi dokumen, bukan video kucing. Ada banyak elemen yang menyediakan semantik teks untuk dokumentasi.

Ada modul yang membahas link dan elemen <a>. 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 dalam font monospace. Saat menyertakan beberapa baris kode, susun <code> di dalam elemen <pre>, yang merepresentasikan 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 konten tertentu dengan terjemahan yang dapat dibaca mesin. Atribut value elemen memberikan terjemahan yang dapat dibaca mesin dari konten elemen. Jika konten <data> terkait dengan waktu atau tanggal, elemen <time> yang merepresentasikan periode waktu tertentu harus digunakan sebagai gantinya.

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

Saat memberikan contoh output dari program, gunakan elemen <samp> untuk menyertakan teks. Browser umumnya merender sampel atau output yang dikutip ini dalam font monospace juga.

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

Perpangkatan 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, gambar, simbol, atau anotasi lain yang lebih kecil daripada baris huruf normal dan ditetapkan sedikit di atas atau di bawah baris, masing-masing.

Gunakan <del> untuk menunjukkan teks yang telah dihapus, atau "dihapus". Secara opsional, sertakan set cite ke resource yang menjelaskan perubahan dan atribut datetime dengan tanggal atau tanggal dan waktu dalam format tanggal dan waktu yang dapat dibaca mesin. Elemen coretan, <s>, dapat digunakan untuk menunjukkan bahwa konten tidak lagi relevan, tetapi tidak benar-benar dihapus dari dokumen.

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

Definisi dan dukungan bahasa

Saat menyertakan singkatan atau akronim, selalu berikan versi lengkap istilah dalam teks biasa saat pertama kali digunakan. Kemudian, perkenalkan representasi singkat dari istilah di antara tag <abbr> pembuka dan penutup. Hanya pada kemunculan pertama ini, saat singkatan atau akronim sedang didefinisikan, <abbr> diperlukan. Atribut title tidak diperlukan dan tidak membantu.

Pengecualian untuk aturan ini adalah jika istilah tersebut dipahami sebagai istilah yang sudah dikenal oleh pembaca, seperti HTML dan CSS dalam seri ini.

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

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

Saat menulis bahasa dengan 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 dimasukkan secara dinamis ke dalam halaman. Elemen <bdo> menggantikan arah teks saat ini, sehingga teks dirender dalam arah yang berbeda. W3C memberikan pengantar tentang algoritma dua arah.

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

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

• Gunakan elemen <em> untuk menekankan atau memperjelas rentang konten. Elemen <em> dapat disusun bertingkat, dengan setiap tingkat susunan bertingkat menunjukkan tingkat penekanan yang lebih besar. Elemen ini memiliki makna semantik dan dapat digunakan untuk memberi tahu agen pengguna audio seperti pembaca layar, Alexa, dan Siri, untuk memberikan penekanan.
• Gunakan elemen <mark> untuk mengidentifikasi atau menandai teks yang relevan, seperti menandai (atau "menandai") kemunculan istilah penelusuran dalam hasil penelusuran. Hal ini memungkinkan konten yang ditandai dapat diidentifikasi dengan cepat tanpa menambah penekanan atau kepentingan.
• Elemen <strong> mengidentifikasi teks sebagai memiliki kepentingan yang tinggi. Browser biasanya merender konten dengan ketebalan font yang lebih berat.
• Elemen <cite>, yang dibahas dalam dasar-dasar teks, digunakan untuk menandai judul buku, artikel, atau karya kreatif lainnya, atau metadata kutipan atau referensi singkat untuk karya tersebut, seperti nomor ISBN buku.

Ada tiga elemen yang tidak digunakan lagi untuk sementara, tetapi telah ditambahkan kembali ke HTML. Elemen ini harus digunakan dengan hemat, jika perlu, karena hanya memberikan sedikit atau tidak ada nilai semantik dan CSS harus selalu digunakan untuk gaya elemen HTML.

<i>

Elemen <i> dapat digunakan untuk istilah teknis, kata asing (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 penunjukan taksonomi.

Elemen ini tidak boleh digunakan untuk memiringkan teks.

MLW menggunakan elemen <span> untuk teks aneh di bagian bawah ulasan workshop Toasty McToastface. Elemen <span> menyediakan container inline generik yang tidak memiliki semantik dan tidak merepresentasikan apa pun. Ini juga merupakan 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 tersedia dalam huruf miring.

<u>

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

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

<b>

Elemen <b> dapat digunakan untuk menarik perhatian pada teks yang tidak penting. Elemen ini tidak menyampaikan informasi semantik khusus dan hanya boleh digunakan jika tidak ada elemen lain dalam bagian ini yang sesuai dengan tujuan. Tidak ada contoh yang diberikan karena saya tidak dapat menemukan kasus penggunaan yang valid; itulah sebabnya elemen ini menjadi "upaya terakhir".

Spasi kosong

Saat Anda menginginkan jeda baris, seperti saat menulis puisi atau alamat fisik, elemen jeda baris yang menutup sendiri, <br>, digunakan untuk menambahkan carriage return.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

Untuk memberikan pemisah, atau jeda tematik, di antara bagian konten yang tidak relevan, seperti di antara bab dalam buku atau di antara monolog 5.000 kata dan resep yang sebenarnya 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 pemisahan kata. Elemen <wbr> yang menutup sendiri memberikan saran kepada browser bahwa jika suatu kata mungkin meluap dari penampungnya, ini adalah tempat di mana browser dapat memutus baris secara opsional. Ini biasanya digunakan untuk memisahkan kata dalam URL panjang. Tanda hubung tidak ditambahkan.

Misalnya, dalam biografi Hal, ada teks yang ditulis dalam kode byte, dengan setiap byte dipisahkan oleh spasi. Kode byte tidak memiliki spasi. Untuk memungkinkan string panjang kode byte dipecah hanya di antara byte jika baris perlu di-wrap, kita menyertakan elemen <wbr> di setiap peluang pemecahan:

<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> adalah elemen kosong, yang berarti tidak dapat memiliki node turunan – baik elemen bertingkat maupun teks. Karena tidak ada "bagian dalam" tempat konten dapat disimpan, tag ini tidak memiliki tag akhir.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang teks sebaris.