Тема сьогоднішнього навчального матеріалу:HTML5 елементи <figure> та <figcaption>. Це означає, що ми будемо знайомитися ще з двома дуже корисними і потрібними семантичними тегами, з їх синтаксисом, особливостями та варіантами використання, поговоримо про роль елементів <figure> та <figcaption> в забезпеченні доступності веб-сторінки і покращенні її
SEO-показників. Тема дуже легка і цікава і не викличе у вас жодних труднощів. У кінці навчального матеріалу буде запропонований невеличкий тест для закріплення знань по даній темі, зауспішне проходшення якого, ви отримає сертифікат. Отже до справи!
Опис елементів <figure> та <figcaption>.
Елемент <figure>.
Елемент <figure> є контейнером для групування будь-якого типу медіа-контенту, як то зображення, відео, аудіо, діаграми, коду тощо, разом зі своїм описом. Елемент <figure> служить для визначення самостійної групи контенту, який може бути пов'язаний зі сторінкою в різних контекстах, таких як зображення з описом або відео зі супровідним текстом.
Елемент <figcaption>.
Тег <figcaption>визначає заголовок для елемента <figure> .
Елемент <figcaption>можна розмістити як першим так і останнім дочірнім елементом тегу <figure>.
Елемент <figcaption> використовується також для створення підпису до зображення або іншого контенту, який міститься в елементі <figure>.
Елемент <figcaption> допомагає користувачам краще зрозуміти зміст контенту, який міститься в елементі <figure>, і забезпечує більш зручне та детальне відображення для користувачів з обмеженими можливостями.
Основні переваги використання елементів <figure> та <figcaption> полягають у покращенні доступності контенту та SEO на веб-сторінці. Крім того, використання елементів <figure> та <figcaption> дозволяє відобразити контент в більш детальний та зрозумілий спосіб, що покращує сприйняття контенту користувачем на вашому веб-сайті.
Синтаксис елементів <figure> та <figcaption>
Давайте розглянемо синтаксис для елементів <figure> та <figcaption>.
Елемент <figure> має наступний синтаксис:
<figure>
<!-- Контент, який повинен бути групований -->
<figcaption>Опис контенту</figcaption>
</figure>
Елемент <figcaption> має наступний синтаксис:
<figcaption>Опис контенту</figcaption>
У елементі <figure> може міститись будь-який контент, який потребує опису. Це може бути зображення, відео, аудіо, код, діаграма або інший тип контенту.
Елемент <figcaption> містить текстовий опис контенту, який міститься в елементі <figure>. Опис повинен бути коротким і зрозумілим, щоб допомогти користувачам краще зрозуміти контент, який міститься в елементі <figure>.
Приклади використання елементів <figure> та <figcaption>:
Зображення з описом:
<figure>
<img src="img/krasnopillya.jpg.jpg" alt="Краснопілля">
<figcaption>Мал1. - Сумська область, Краснопілля , Україна.</figcaption>
</figure>Відео з описом:
<figure>
<video src="video.mp4" controls></video>
<figcaption>Це відео демонструє ...</figcaption>
</figure>Аудіо з описом:
<figure>
<audio src="audio.mp3" controls></audio>
<figcaption>Це аудіофайл містить ...</figcaption>
</figure>
Діаграма з описом:
<figure>
<img src="chart.png" alt="діаграма">
<figcaption>Ця діаграма показує ...</figcaption>
</figure>
Вірш з описом:
HTML тег <cite>
У попередньому прикладі ми бачимо HTML тег <cite>.
Тег <cite>визначає назву творчої роботи (наприклад, книга, вірш, пісня, фільм, картина, скульптура тощо).
Примітка. Ім’я людини не є назвою твору.
Текст в <cite>елементі зазвичай відображається курсивом .
Код з описом:
У кожному з цих прикладів елемент <figure> містить контент, який потребує опису, а елемент <figcaption> містить текстовий опис цього контенту. Комбінація цих елементів дозволяє зробити контент більш доступним та зрозумілим для користувачів, зокрема для тих, які використовують програмне забезпечення для зчитування екрану або мають інші обмеження.
Доступність та SEO.
Елементи <figure> та <figcaption> можуть допомогти зробити веб-сторінки більш доступними для користувачів із обмеженими можливостями та підвищити їх SEO-показники. Ось кілька рекомендацій щодо доступності та SEO для цих елементів:
Для зображень, відео та аудіофайлів повинні використовуватися атрибути alt та title, щоб допомогти зрозуміти контент людям з відключеними зображеннями або які використовують програмне забезпечення для зчитування екрану.
Для елементів <figure> і <figcaption> потрібно використовувати лаконічний та зрозумілий опис, який допоможе користувачам зрозуміти контент. Для відео та аудіофайлів рекомендується включати опис назви файлу та короткий зміст змісту.
Для відео та аудіофайлів повинні використовуватися атрибути controls та autoplay, якщо це відповідає вимогам контенту та відповідного законодавства. Атрибут controls дозволяє користувачам керувати відтворенням, а атрибут autoplay дозволяє автоматично відтворювати вміст без додаткового натискання на кнопки відтворення.
Для зображень в елементі <figure> потрібно використовувати атрибут loading зі значенням lazy для забезпечення більш швидкого завантаження сторінки.
Включення елементів <figure> та <figcaption> може покращити SEO-показники веб-сторінок, оскільки допомагає зробити контент більш структурованим та організованим. Також, для зображень важливо використовувати ключові слова в атрибутах alt та title, які можуть покращити їх SEO-рейтинг.
Загальна рекомендація.
Взагалі рекомендується використання елементів <figure> та <figcaption> лише для тих випадків, коли вони дійсно відповідають структурі контенту. Не слід використовувати їх для створення декоративних ефектів, які не мають семантичного значення. Крім того, при використанні цих елементів слід забезпечувати відповідну структуру HTML-коду, щоб зберігати порядок взаємодії елементів та їх зв'язки.
При створенні веб-сторінок, особливо для користувачів з обмеженими можливостями, слід забезпечувати відповідну доступність контенту та його описів. Це можна зробити, наприклад, за допомогою спеціальних програм для зчитування екрану або розширень браузера, які дозволяють зручно ознайомитися з описами зображень та інших мультимедійних елементів на сторінках.
Загальною рекомендацією є використовувати елементи <figure> та <figcaption> у відповідності до структури контенту та забезпечувати їх доступність та SEO-оптимізацію для покращення взаємодії з користувачем та рейтингів пошукових систем.
Закріплення навчального матеріалу:
Для проходження тесту і отримання сертифікату перейдіть за посиланням:
https://vseosvita.ua/test/start/krn959
Або Відскануйте QR-код за допомогою смартфона:
Інтерактивна вправа по HTML.
Використані джерела:
З повагою, Юрій Чернієвський! Керівник гуртка "WEB-Miditaur" науково – технічного напряму «WEB технології» ЦДЮТ Краснопільської селищної ради. Бакалавр, прикладна математика за спеціальним напрямом інформатика, Спеціаліст - інформатика, математик - програміст.
0 Коментарів Підписатися на цей блог