Bagaimana saya menggunakan html5 & lt; angka & gt; dan & lt; figcaption & gt; Unsur -unsur untuk membentangkan imej dengan kapsyen?

Menggunakan <figure></figure> dan <figcaption></figcaption> untuk imej dengan kapsyen

Unsur -unsur <figure></figure> dan <figcaption></figcaption> menyediakan cara yang betul secara semantik untuk membentangkan imej (atau media lain) bersama -sama dengan kapsyen mereka. Elemen <figure></figure> bertindak sebagai bekas untuk media dan kapsyennya, manakala elemen <figcaption></figcaption> secara khusus memegang teks kapsyen. Struktur ini meningkatkan kebolehcapaian dan SEO laman web anda. Inilah cara anda menggunakannya:

 <code class="html"><figure> <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="Descriptive alt text"> <figcaption>This is the caption for the image.</figcaption> </figure></code>

Dalam contoh ini, elemen <img src="/static/imghw/default1.png" data-src="video.mp4" class="lazy" alt="Bagaimana saya menggunakan html5 & lt; angka & gt; dan & lt; figcaption & gt; Unsur -unsur untuk membentangkan imej dengan kapsyen?" > berada di dalam elemen <figure></figure> . Unsur <figcaption></figcaption> , yang mengandungi kapsyen, mengikuti imej. Pesanan itu penting - kapsyen harus secara logik berkaitan dengan media dalam <figure></figure> . Atribut alt pada tag <img src="/static/imghw/default1.png" data-src="video.mp4" class="lazy" alt="Bagaimana saya menggunakan html5 & lt; angka & gt; dan & lt; figcaption & gt; Unsur -unsur untuk membentangkan imej dengan kapsyen?" > adalah penting untuk kebolehcapaian, memberikan keterangan teks untuk pengguna yang tidak dapat melihat imej.

Amalan terbaik untuk akses dan SEO

Menggunakan <figure></figure> dan <figcaption></figcaption> dengan betul dengan ketara meningkatkan kebolehcapaian dan SEO. Inilah Caranya:

• Kebolehcapaian: Struktur semantik jelas mentakrifkan hubungan antara imej dan kapsyennya, menjadikannya lebih mudah bagi pembaca skrin dan teknologi bantuan lain untuk mentafsir kandungan. Atribut alt pada elemen <img src="/static/imghw/default1.png" data-src="video.mp4" class="lazy" alt="Bagaimana saya menggunakan html5 & lt; angka & gt; dan & lt; figcaption & gt; Unsur -unsur untuk membentangkan imej dengan kapsyen?" > adalah yang paling utama; Ia menyediakan konteks untuk pengguna cacat penglihatan. Atribut alt yang ditulis dengan baik harus menggambarkan kandungan dan tujuan imej secara ringkas. Elakkan menggunakan frasa seperti "imej ..."
• SEO: Enjin carian memahami makna semantik <figure></figure> dan <figcaption></figcaption> . Ini membantu mereka lebih memahami konteks imej anda, meningkatkan kedudukan laman web anda untuk carian imej yang berkaitan. Menggunakan kapsyen deskriptif terus meningkatkan SEO dengan menyediakan konteks yang kaya kata kunci untuk enjin carian dan pengguna. Pastikan kapsyen anda dengan tepat mencerminkan kandungan imej.
• Mengekalkan aliran logik: Penempatan elemen <figure></figure> dalam dokumen anda harus masuk akal dalam aliran kandungan. Jangan sewenang -wenangnya meletakkannya; Ia harus dikaitkan dengan teks sekitarnya.

Styling <figure></figure> dan <figcaption></figcaption> dengan CSS

Styling <figure></figure> dan <figcaption></figcaption> dengan CSS membolehkan persembahan visual yang menarik. Anda boleh mengawal jarak, penjajaran, dan penampilan kedua -dua elemen untuk mengintegrasikannya dengan lancar ke dalam reka bentuk laman web anda. Inilah contoh:

 <code class="css">figure { margin: 20px auto; /* Center the figure */ max-width: 600px; /* Limit the width */ text-align: center; /* Center the caption */ } figcaption { font-style: italic; font-size: 0.9em; margin-top: 10px; /* Add some space above the caption */ text-align: center; /* Center the caption */ }</code>

Kod CSS ini memusatkan angka, mengehadkan lebarnya, dan menggayakan kapsyen dengan huruf miring dan saiz fon yang lebih kecil. Anda boleh menyesuaikan gaya ini agar sesuai dengan reka bentuk laman web anda. Ingatlah untuk mempertimbangkan responsif dan pastikan gaya anda menyesuaikan diri dengan saiz skrin yang berbeza.

Menggunakan <figure></figure> dan <figcaption></figcaption> dengan jenis media lain

Ya, anda boleh menggunakan <figure></figure> dan <figcaption></figcaption> dengan jenis media di luar imej. Mereka berfungsi dengan baik dengan kandungan tertanam yang lain seperti video, fail audio, coretan kod, gambar rajah, dan lain -lain. Kuncinya ialah <figcaption></figcaption> memberikan kapsyen atau penjelasan untuk media tertanam dalam <figure></figure> . Inilah contoh dengan video:

 <code class="html"><figure> <video controls> Your browser does not support the video tag. </video> <figcaption>A captivating video demonstrating [video content description].</figcaption> </figure></code>

Ingatlah untuk sentiasa menyediakan kandungan alternatif yang sesuai untuk pengguna yang tidak dapat mengakses media tertanam (contohnya, transkrip untuk video). Makna semantik tetap konsisten: <figure></figure> mengandungi media dan kapsyen penjelasannya dalam <figcaption></figcaption> .

Atas ialah kandungan terperinci Bagaimana saya menggunakan html5 & lt; angka & gt; dan & lt; figcaption & gt; Unsur -unsur untuk membentangkan imej dengan kapsyen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!