Dasar-dasar teks

Mirip dengan cara editor teks Anda menyediakan heading <h1> hingga <h6>, beserta berbagai cara untuk memformat bagian teks dengan cara yang bermakna dan visual, HTML menyediakan kumpulan elemen semantik dan non-semantik yang sangat mirip untuk memberikan makna pada prosa.

Bagian ini membahas cara utama menandai teks, atau dasar-dasar teks. Kemudian, kita akan membahas atribut, sebelum mempelajari cara tambahan untuk menandai teks, seperti daftar, tabel, dan formulir.

Heading, ditinjau kembali

Ada enam elemen heading bagian, <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>, dengan <h1> menjadi yang paling penting dan <h6> yang paling tidak penting. Selama bertahun-tahun, developer diberi tahu bahwa heading digunakan oleh browser untuk menguraikan dokumen. Awalnya, hal tersebut adalah tujuan, tetapi browser tidak pernah menerapkan fitur penguraian dokumen, dan algoritma penguraian yang diusulkan secara resmi dihapus dari spesifikasi HTML. Namun, pengguna pembaca layar sangat mengandalkan heading sebagai strategi eksplorasi untuk mempelajari konten halaman, menavigasi melalui heading dengan tombol h. Memastikan tingkat heading diterapkan secara logis—seperti saat Anda menguraikan dokumen—membuat konten Anda dapat diakses dan sangat direkomendasikan.

Secara default, browser menata gaya <h1> yang terbesar, <h2> sedikit lebih kecil, dengan setiap tingkat heading berikutnya secara default lebih kecil. Secara historis, stylesheet agen pengguna juga mengurangi ukuran font elemen <h1> yang berada di dalam elemen bagian seperti <article>, <aside>, <nav>, atau <section>.

Beberapa stylesheet agen pengguna menyertakan pemilih berikut (atau yang serupa) untuk menata gaya elemen <h1> bertingkat seolah-olah merupakan tingkat heading yang lebih rendah:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Namun, Model Objek Aksesibilitas (AOM) dan pembaca layar tidak pernah mengubah tingkat heading berdasarkan nesting; <h1> bertingkat selalu dilaporkan sebagai "heading, level 1". Hal ini menyebabkan ketidakcocokan saat heading bertingkat tampak lebih kecil secara visual, tetapi tetap menjadi heading tingkat atas untuk teknologi pendukung.

Karena spesifikasi HTML menghapus algoritma penguraian dokumen, browser telah menghapus aturan stylesheet agen pengguna lama ini. Akibatnya, elemen <h1> bertingkat mempertahankan ukuran font <h1> standar, bukan otomatis menyusut.

Jangan mengandalkan elemen <h1> bertingkat di dalam elemen bagian untuk gaya visual atau hierarki struktural. Selalu tandai konten Anda menggunakan elemen heading berurutan (<h1> hingga <h6>) berdasarkan struktur dokumen. Hal ini memastikan konten Anda jelas dan dapat diakses oleh mesin telusur, pembaca layar, dan pengelola mendatang.

Di luar heading, sebagian besar teks terstruktur terdiri dari serangkaian paragraf. Di HTML, paragraf ditandai dengan tag <p> ; tag penutup bersifat opsional, tetapi selalu disarankan.

Bagian #about memiliki heading dan beberapa paragraf:

Bagian ini bukan penanda karena tidak memiliki label aksesibilitas. Untuk mengubahnya menjadi region, yang merupakan peran penanda, Anda dapat menggunakan aria-labelledby untuk memberikan label aksesibilitas:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Hanya buat landmark jika dan saat diperlukan. Memiliki terlalu banyak landmark dapat dengan cepat membuat pengguna pembaca layar merasa bingung.

Kutipan dan sitasi

Saat menandai artikel atau postingan blog, Anda mungkin ingin menyertakan kutipan atau kutipan yang ditarik, dengan atau tanpa sitasi yang terlihat. Ada elemen untuk ketiga komponen ini: <blockquote>, <q>, dan <cite> untuk sitasi yang terlihat, atau atribut cite untuk memberikan informasi selengkapnya untuk penelusuran.

Bagian #feedback berisi header dan tiga ulasan; ulasan ini adalah blockquote, beberapa di antaranya berisi kutipan, diikuti oleh paragraf yang berisi sitasi kutipan. Menghilangkan ulasan ketiga untuk menghemat ruang, markup-nya adalah:

Informasi tentang penulis kutipan, atau sitasi, bukan bagian dari kutipan dan oleh karena itu tidak ada di <blockquote>, tetapi muncul setelah kutipan. Meskipun ini adalah sitasi dalam arti istilah yang awam, sitasi ini sebenarnya tidak mengutip resource tertentu, sehingga dienkapsulasi dalam elemen paragraf <p>.

Sitasi muncul dalam tiga baris, termasuk nama penulis, peran sebelumnya, dan aspirasi profesional. Pemisah baris <br> membuat pemisah baris dalam blok teks. Pemisah baris dapat digunakan dalam alamat fisik, dalam puisi, dan dalam blok tanda tangan. Pemisah baris tidak boleh digunakan sebagai carriage return untuk memisahkan paragraf. Sebagai gantinya, tutup paragraf sebelumnya dan buka paragraf baru. Menggunakan paragraf untuk paragraf tidak hanya baik untuk aksesibilitas, tetapi juga memungkinkan penataan gaya. Elemen <br> hanyalah pemisah baris; elemen ini dipengaruhi oleh sangat sedikit properti CSS.

Meskipun kami memberikan informasi sitasi dalam paragraf setelah setiap blockquote, kutipan yang ditampilkan sebelumnya dikodekan dengan cara ini karena tidak berasal dari sumber eksternal. Jika berasal dari sumber eksternal, sumber tersebut dapat (harus?) dikutip.

Jika ulasan diambil dari situs ulasan, buku, atau karya lainnya, elemen <cite> dapat digunakan untuk judul sumber. Konten <cite> dapat berupa judul buku, nama situs atau acara TV, atau bahkan nama program komputer. Enkapsulasi <cite> dapat digunakan baik saat sumber disebutkan secara sepintas maupun jika sumber dikutip atau dirujuk. Konten <cite> adalah karya, bukan penulis.

Jika kutipan dari Blendan Smooth diambil dari majalah offline-nya, Anda akan menulis blockquote seperti ini:

Elemen sitasi <cite> tidak memiliki peran implisit dan harus mendapatkan label aksesibilitas dari kontennya; jangan sertakan aria-label.

Untuk memberikan kredit saat Anda tidak dapat membuat konten terlihat, ada atribut cite yang mengambil URL dokumen atau pesan sumber sebagai nilainya untuk informasi yang dikutip. Atribut ini valid pada <q> dan <blockquote>. Meskipun berupa URL, atribut ini dapat dibaca oleh mesin, tetapi tidak terlihat oleh pembaca:

Meskipun tag penutup </p> bersifat opsional (dan selalu direkomendasikan), tag penutup </blockquote> selalu diperlukan.

Sebagian besar browser menambahkan padding ke kedua <blockquote> arah inline dan memiringkan <cite> konten; hal ini dapat dikontrol dengan CSS. <blockquote> tidak menambahkan tanda kutip, tetapi tanda kutip dapat ditambahkan dengan konten yang dihasilkan CSS. Elemen <q> menambahkan kutipan secara default, menggunakan tanda kutip yang sesuai dengan bahasa.

Di bagian #teachers, HAL dikutip mengatakan, "I'm sorry , but I'm afraid I can't do that, ." Kode untuk itu, dalam bahasa Inggris dan Prancis, adalah:

Elemen kutipan inline, <q>, menambahkan kutipan yang sesuai dengan bahasa. Gaya default agen pengguna menyertakan konten yang dihasilkan open-quote dan close-quote:

q::before {content: open-quote;}
q::after {content: close-quote;}

Atribut lang disertakan untuk memberi tahu browser bahwa, meskipun bahasa dasar halaman ditentukan sebagai bahasa Inggris dalam tag pembuka <html lang="en-US">, paragraf teks ini menggunakan bahasa yang berbeda. Hal ini membantu kontrol suara seperti Siri, Alexa, dan VoiceOver menggunakan pengucapan bahasa Prancis. Hal ini juga memberi tahu browser jenis kutipan yang akan dirender.

Seperti <blockquote>, elemen <q> mendukung atribut cite.

Entity HTML

Anda mungkin telah melihat urutan escape atau "entity". Karena < digunakan dalam HTML, Anda harus meng-escape-nya menggunakan < atau encoding yang lebih sulit diingat <. Ada empat entity yang dicadangkan di HTML: <, >, &, dan ". Referensi karakternya adalah <, >, &, dan ".

Beberapa entity lain yang sering Anda gunakan adalah © untuk hak cipta (©),™ untuk Merek Dagang (™), dan   untuk spasi tanpa pemisah. Spasi tanpa pemisah berguna jika Anda ingin menyertakan spasi di antara dua karakter atau kata sekaligus mencegah pemisah baris terjadi di sana. Ada lebih dari 2.000 referensi karakter bernama. Namun, jika diperlukan, setiap karakter, termasuk emoji, memiliki padanan yang dienkode yang dimulai dengan &#.

Jika Anda melihat ulasan workshop ToastyMcToastface (tidak disertakan dalam contoh kode di atas), ada beberapa karakter teks yang tidak biasa:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

Kalimat terakhir dalam blockquote ini juga dapat ditulis sebagai:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

Ada beberapa karakter yang tidak di-escape dan beberapa referensi karakter bernama dalam kode ini. Karena kumpulan karakter adalah UTF-8, beberapa karakter terakhir dalam blockquote sebenarnya tidak perlu di-escape, seperti dalam contoh ini. Hanya karakter yang tidak didukung oleh kumpulan karakter yang perlu di-escape. Jika diperlukan, ada banyak alat untuk mengaktifkan escape berbagai karakter, atau Anda cukup memastikan untuk menyertakan <meta charset="UTF-8"> di <head>.

Meskipun Anda menentukan kumpulan karakter sebagai UTF-8, Anda tetap harus meng-escape < jika ingin mencetak karakter tersebut ke layar. Umumnya, Anda tidak perlu menyertakan referensi karakter bernama untuk >, ", atau &; tetapi jika ingin menulis tutorial tentang entity HTML, Anda harus menulis < saat mengajari seseorang cara membuat kode <. 😀

Oh, dan emoji senyum itu adalah 😀, tetapi dokumen ini dinyatakan sebagai UTF-8, sehingga tidak di-escape.

Uji pemahaman Anda

Uji pengetahuan Anda tentang teks dalam HTML.