77 lines
3.2 KiB
Markdown
77 lines
3.2 KiB
Markdown
|
---
|
|||
|
|
id: 587d774c367417b2b2512a9d
|
|||
|
|
title: Коли потрібно залишити атрибут alt текст порожнім
|
|||
|
|
challengeType: 0
|
|||
|
|
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
|||
|
|
forumTopicId: 301019
|
|||
|
|
dashedName: know-when-alt-text-should-be-left-blank
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
Під час останнього завдання ви вивчили, що включати атрибут `alt` при використанні тегу `img` є обов'язковим. Хоча інколи фото можуть бути згрупованими з уже існуючим описом або використовуються лише для декорації. У таких випадках текст `alt` буде зайвим та необов'язковим.
|
|||
|
|
|
|||
|
|
Якщо до зображення вже існує текстовий вміст або зображення не має значення для сторінки, `img` все ще потребує атрибут `alt`, але його можна встановити як порожній рядок. Наприклад:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<img src="visualDecoration.jpeg" alt="">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Фонові зображення також підпадають під мітку "декоративні". Однак вони зазвичай застосовуються з правилами CSS, і тому не є частиною процесу читання з екрану.
|
|||
|
|
|
|||
|
|
**Примітка:** Для зображень із підписом ви все одно можете додати `alt` текст, оскільки це допомагає пошуковим системам класифікувати вміст зображення.
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Camper Cat закодували макет сторінки для розділу блогу на своєму вебсайті. Вони планують додати візуальний розрив між двома статтями з декоративним зображенням самурайського меча. Додайте атрибут `alt` до тегу `img` і присвойте йому порожній рядок. (Зверніть увагу, що зображення `src` не посилається на фактичний файл — не хвилюйтесь, що на дисплеї не відображаються мечі.)
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Ваш тег `img` має містити атрибут `alt`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(!($('img').attr('alt') == undefined));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Атрибуту `alt` має бути призначений порожній рядок.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('img').attr('alt') == '');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
|||
|
|
<article>
|
|||
|
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
|||
|
|
<p>To Come...</p>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<img src="samuraiSwords.jpeg">
|
|||
|
|
|
|||
|
|
<article>
|
|||
|
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
|||
|
|
<p>To Come...</p>
|
|||
|
|
</article>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
|||
|
|
<article>
|
|||
|
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
|||
|
|
<p>To Come...</p>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<img src="samuraiSwords.jpeg" alt="">
|
|||
|
|
|
|||
|
|
<article>
|
|||
|
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
|||
|
|
<p>To Come...</p>
|
|||
|
|
</article>
|
|||
|
|
```
|