Elemen teks inline lainnya

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}.