Dasar-dasar teks

Serupa dengan cara editor teks Anda menyediakan judul <h1> ke <h6>, bersama dengan banyak cara untuk memformat bagian teks dengan cara yang bermakna dan visual, HTML menyediakan kumpulan elemen semantik dan non-semantik yang sangat mirip untuk membuat makna prosa.

Bagian ini membahas cara utama untuk me-markup teks, atau dasar-dasar teks. Kemudian, kita akan membahas atribut, sebelum menjelajahi cara lain untuk memberi markup teks, seperti daftar, tabel, dan formulir.

Tajuk, dilihat kembali

Ada enam elemen judul bagian, <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>, dengan <h1> sebagai yang paling penting dan <h6> yang paling tidak penting. Selama bertahun-tahun, developer diberi tahu bahwa {i>heading<i} digunakan oleh browser untuk menguraikan dokumen. Itu awalnya merupakan sasaran, namun browser belum menerapkan fitur garis batas. Namun, pengguna pembaca layar menggunakan judul sebagai strategi eksplorasi untuk mempelajari konten halaman, menavigasi judul dengan kunci h. Jadi, memastikan bahwa tingkat {i>heading<i} diimplementasikan seperti yang akan Anda buat pada dokumen akan membuat konten Anda mudah diakses dan tetap sangat dianjurkan.

Secara default, browser menata gaya <h1> sebagai yang terbesar, <h2> sedikit lebih kecil, dengan setiap tingkat judul berikutnya menjadi lebih kecil secara default. Menariknya, browser secara default juga mengurangi ukuran font <h1> berdasarkan jumlah elemen <article>, <aside>, <nav>, atau <section> yang bertingkatnya.

Beberapa stylesheet agen pengguna menyertakan pemilih berikut, atau yang serupa, untuk menata gaya elemen <h1> bertingkat seolah-olah elemen tersebut berada pada level yang kurang penting:

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Namun, Accessibility Object Model, atau AOM, masih melaporkan tingkat elemen dengan benar; dalam hal ini, "heading, level 1". Perhatikan bahwa browser tidak melakukan hal ini untuk tingkat heading lainnya. Oleh karena itu, jangan gunakan gaya visual browser berbasis level heading. Meskipun browser tidak mendukung pembuatan garis batas, anggaplah demikian; tandai judul konten Anda seolah-olah memang demikian. Hal tersebut akan membuat konten Anda dapat dimengerti oleh mesin telusur, pembaca layar, dan pengelola masa depan (yang mungkin saja adalah Anda).

Di luar judul, sebagian besar teks terstruktur terdiri dari serangkaian paragraf. Dalam HTML, paragraf di-markup dengan tag <p>; tag penutup bersifat opsional, tetapi selalu disarankan.

Bagian #about memiliki sebuah judul dan beberapa paragraf:

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

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

Hanya buat tempat terkenal jika dan jika diperlukan. Memiliki terlalu banyak {i>landmark<i} dapat dengan cepat membingungkan pengguna pembaca layar.

Kutipan dan kutipan

Saat memberi markup pada artikel atau postingan blog, Anda mungkin ingin menyertakan kutipan atau tanda kutip pull, dengan atau tanpa kutipan yang terlihat. Terdapat elemen untuk ketiga komponen ini: <blockquote>, <q>, dan <cite> untuk kutipan yang terlihat, atau atribut cite untuk memberikan informasi lebih lanjut pada penelusuran.

Bagian #feedback berisi header dan tiga ulasan. Ulasan ini adalah block kutipan, yang beberapa di antaranya berisi kutipan, diikuti dengan paragraf yang berisi kutipan kutipan. Menghilangkan peninjauan ketiga untuk menghemat ruang, markup akan:

Informasi tentang penulis kutipan, atau kutipan, bukan bagian dari kutipan, sehingga tidak ada dalam <blockquote>, tetapi muncul setelah kutipan. Meskipun merupakan kutipan dalam arti istilah yang umum, kutipan tersebut sebenarnya tidak mengutip resource tertentu sehingga dienkapsulasi dalam elemen paragraf <p>.

Kutipan muncul dalam tiga baris, termasuk nama penulis, peran sebelumnya, dan aspirasi profesional. Jeda baris <br> membuat jeda baris di blok teks. Nama ini dapat digunakan dalam alamat fisik, dalam puisi, dan dalam blok tanda tangan. Jeda baris tidak boleh digunakan sebagai enter ke paragraf terpisah. Sebagai gantinya, tutup paragraf sebelumnya dan buka yang baru. Menggunakan paragraf untuk paragraf tidak hanya bagus untuk aksesibilitas, tetapi juga memungkinkan penataan gaya. Elemen <br> hanyalah jeda baris; elemen ini dipengaruhi oleh sangat sedikit properti CSS.

Meskipun kami memberikan informasi kutipan dalam paragraf setelah setiap blockKutipan, kutipan yang ditunjukkan sebelumnya dikodekan dengan cara ini karena tidak berasal dari sumber eksternal. Jika ya, sumbernya dapat (seharusnya?) dikutip.

Jika ulasan diambil dari situs ulasan, buku, atau karya lain, 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 dalam penerusan atau jika sumber dikutip atau dirujuk. Konten <cite> adalah karya, bukan penulis.

Jika kutipan dari Blendan Smooth diambil dari majalah {i>offline<i}-nya, Anda akan menulisnya seperti ini:

Elemen kutipan <cite> tidak memiliki peran implisit dan harus mendapatkan nama yang dapat diakses dari kontennya; jangan sertakan aria-label.

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

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

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

Di bagian #teachers, HAL dikutip mengatakan, "Maaf , tapi saya tidak bisa melakukannya, ." Kode untuk itu, dalam bahasa Inggris dan Prancis, adalah:

Elemen kutipan inline, <q>, menambahkan tanda kutip yang sesuai bahasa. Gaya default agen pengguna mencakup konten yang dihasilkan oleh kutipan terbuka dan tanda kutip:

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

Atribut lang disertakan untuk memberi tahu browser bahwa, meskipun bahasa dasar halaman didefinisikan sebagai bahasa Inggris di 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. Kode ini juga memberi tahu browser jenis tanda kutip yang akan di-render.

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

Entitas HTML

Anda mungkin telah melihat urutan escape atau "entity". Karena < digunakan dalam HTML, Anda harus meng-escape kode tersebut menggunakan < atau encoding < yang kurang mudah diingat. Ada empat entitas yang dicadangkan di HTML: <, >, &, dan ". Referensi karakternya masing-masing adalah <, >, &, dan ".

Beberapa entitas lain yang akan sering Anda gunakan adalah © untuk hak cipta (©),™ untuk Merek Dagang (TM), dan   untuk ruang tanpa jeda. Spasi tanpa pemisah berguna jika Anda ingin menyertakan spasi antara dua karakter atau kata, sekaligus mencegah baris baru agar tidak muncul. Ada lebih dari 2.000 referensi karakter bernama. Namun, jika diperlukan, setiap karakter, termasuk emoji, memiliki padanan berenkode 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 blockutip 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 kekacauan kode ini. Karena himpunan karakternya adalah UTF-8, beberapa karakter terakhir dalam blockutip sebenarnya tidak perlu di-escape, seperti dalam contoh ini. Hanya karakter yang tidak didukung oleh himpunan karakter yang perlu di-escape. Jika diperlukan, ada banyak alat untuk mengaktifkan escape berbagai karakter, atau Anda dapat memastikan bahwa Anda menyertakan <meta charset="UTF-8"> dalam <head>.

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

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang teks dalam HTML.

Bagaimana cara menampilkan simbol hak cipta dalam HTML?

c

Coba lagi.

©

Benar.

&copyright.

Coba lagi.

Elemen manakah yang digunakan untuk menunjukkan sesuatu yang merupakan kutipan?

<blockquote>

Benar

<quote>

Coba lagi.

<cite>

Coba lagi. Elemen <cite> digunakan untuk menunjukkan sumber kutipan, bukan kutipan itu sendiri.