Bagaimana saya menggunakan html5 & lt; mark & ​​gt; elemen untuk menyerlahkan teks?

Menonjolkan teks dengan elemen HTML5 <mark></mark>

Elemen HTML5 <mark></mark> direka khusus untuk menonjolkan teks, menunjukkan bahawa ia telah ditandakan atau diserlahkan untuk beberapa sebab. Ia semantik bermakna, tidak seperti hanya menggunakan CSS untuk menukar warna teks. Untuk menggunakannya, anda hanya membungkus teks yang ingin anda sorot dalam tag pembukaan dan penutup <mark></mark> . Contohnya:

 <code class="html"><p>This is some text. <mark>This text is highlighted.</mark> This is more text.</p></code>

Ini akan menjadikan teks "teks ini diserlahkan" dengan kemuncak latar belakang kuning lalai, biasanya digunakan oleh penyemak imbas pengguna. Gaya lalai penyemak imbas biasanya merupakan latar belakang kuning halus, menjadikan teks yang diserlahkan dengan mudah dibezakan tanpa terlalu mengganggu. Ini adalah aspek utama reka bentuknya - untuk memberikan isyarat visual yang jelas tanpa mengganggu kebolehbacaan keseluruhan kandungan. Anda tidak memerlukan sebarang atribut khas atau JavaScript untuk menjadikannya berfungsi; Ia adalah cara yang mudah dan semantik untuk menyerlahkan teks.

Pertimbangan kebolehcapaian untuk elemen <mark></mark>

Menggunakan elemen <mark></mark> dengan betul adalah penting untuk aksesibiliti. Tujuan utamanya adalah untuk menunjukkan bahawa teks yang diketengahkan adalah penting dalam beberapa cara, mungkin kerana ia adalah hasil carian, bahagian teks yang dipilih pengguna, atau pembetulan. Pembaca skrin dan teknologi bantuan lain mentafsirkan elemen <mark></mark> dengan sewajarnya, menyampaikan kepentingan teks yang diserlahkan kepada pengguna kurang upaya.

Walau bagaimanapun, penting untuk menyediakan konteks yang mencukupi. Hanya menonjolkan teks tanpa penjelasan boleh mengelirukan. Pertimbangkan menggunakan atribut aria-label untuk memberikan maklumat tambahan kepada teknologi bantuan jika konteksnya tidak jelas dari teks sekitarnya. Contohnya:

 <code class="html"><p>The search term "HTML" yielded these results: <mark aria-label="Search result: HTML">HTML</mark> is a markup language.</p></code>

Ini menambah lapisan tambahan maklumat untuk pembaca skrin, menjelaskan sebab penonjolan. Elakkan terlalu banyak <mark></mark> , sebagai penonjolan yang berlebihan dapat membuat kandungan yang luar biasa dan sukar difahami untuk semua orang, termasuk pengguna teknologi bantuan. Lebih berlebihan juga boleh mencairkan makna sorotan itu sendiri. Gunakannya dengan bijak dan sengaja untuk mengekalkan kebolehcapaian dan komunikasi yang jelas.

Menggayakan elemen <mark></mark>

Walaupun penyemak imbas menyediakan gaya lalai untuk elemen <mark></mark> , anda boleh menyesuaikan penampilannya menggunakan CSS. Ini membolehkan anda menyesuaikan penonjolan untuk memadankan reka bentuk laman web anda atau memberikan perbezaan yang lebih baik kepada pengguna yang mengalami masalah visual. Anda boleh menyasarkan elemen <mark></mark> secara langsung menggunakan nama tagnya:

 <code class="css">mark { background-color: #FFD700; /* Gold */ color: #000000; /* Black text */ padding: 0.2em; /* Add some padding */ }</code>

Coretan CSS ini mengubah warna latar ke emas, menetapkan warna teks menjadi hitam untuk kontras yang lebih baik, dan menambah beberapa padding untuk kebolehbacaan yang lebih baik. Ingatlah untuk mempertimbangkan nisbah kontras warna untuk memastikan penglihatan yang mencukupi bagi pengguna dengan gangguan visual. Alat boleh didapati dalam talian untuk membantu anda menyemak nisbah kontras warna anda. Elakkan terlalu cerah atau mengganggu warna yang mungkin menghalang pembacaan. Gaya yang konsisten di seluruh laman web anda akan menyumbang kepada pengalaman pengguna yang lebih baik.

Perbezaan dari kaedah penonjolan teks lain

Elemen <mark></mark> membezakan dirinya dari kaedah lain yang menonjolkan kaedah terutamanya melalui makna semantiknya. Tidak seperti menggunakan <span></span> dengan gaya CSS inline untuk menonjolkan, <mark></mark> secara eksplisit menyampaikan bahawa teks itu diserlahkan untuk alasan tertentu. Perbezaan semantik ini penting untuk akses dan SEO.

Kaedah lain, seperti menggunakan tag berani ( <strong></strong> ) atau italic ( <em></em> ), menyampaikan penekanan atau kepentingan, tetapi tidak semestinya menyerlahkan. Tag ini mempunyai makna semantik khusus yang berkaitan dengan kepentingan teks, bukan hakikat bahawa ia diserlahkan. Oleh itu, menggunakan <mark></mark> untuk menonjolkan secara semantik lebih tepat dan menyediakan konteks yang lebih baik untuk teknologi bantuan dan enjin carian. Menggunakan <mark></mark> membantu mengekalkan pemisahan kebimbangan antara persembahan (gaya CSS) dan semantik (struktur HTML).

Atas ialah kandungan terperinci Bagaimana saya menggunakan html5 & lt; mark & ​​gt; elemen untuk menyerlahkan teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!