4.9 KiB
4.9 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d774e367417b2b2512aa0 | Wrap Content in the article Element | 0 | https://scrimba.com/c/cPp79S3 | Оборачивание контента в элемент article |
Description
article
является еще одним из новых элементов HTML5, который добавляет семантический смысл вашей разметке. article
является секционирующим элементом и используется для обертывания независимого, автономного содержимого. Тег хорошо работает с записями блога, сообщениями на форуме или новостями.
Определение того, может ли контент быть автономным, обычно является личным выбором, но есть несколько простых тестов, которые вы можете использовать. Спросите себя, если вы удалите весь окружающий контекст, будет ли этот контент по-прежнему иметь смысл? Точно так же для текста сохранялось бы содержимое, если оно было в RSS-канале?
Помните, что люди, использующие вспомогательные технологии, полагаются на организованную, семантически значимую разметку, чтобы лучше понять вашу работу.
Заметка про элементы section
и div
Элемент
section
также является новым с HTML5 и имеет несколько иной семантический смысл, чем article
. Элемент article
для автономного контента, а section
для группировки тематически связанных материалов. Они могут использоваться вместе. Например, если книга является article
, то каждая глава является section
. Когда между группами контента нет никакой связи, используйте div
.
<div> - сгруппированный контент
<section> - группы связанные контентом
<article> - независимые группы, автономный контент
Instructions
article
для обертывания сообщений на своей странице блога, но он забыл использовать их в верхней части. Измените тег div
чтобы вместо этого использовать тег article
. Tests
tests:
- text: Ваш код должен содержать три тега <code>article</code>.
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
- text: У вашего кода не должно быть никаких тегов <code>div</code>.
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
Challenge Seed
<h1>Deep Thoughts with Master Camper Cat</h1>
<main>
<div>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</div>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
</main>
Solution
// solution required