3.1 KiB
3.1 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
bad87fee1348bd9aecf08801 | Introduction to HTML5 Elements | 0 | https://scrimba.com/p/pVMPUv/c4Ep9Am |
Description
header
, footer
, nav
, video
, article
, section
and others.
These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.
The main
HTML5 tag helps search engines and other developers find the main content of your page.
NoteMany of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
Instructions
p
element after the existing p
element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
Wrap the paragraphs with an opening and closing main
tag.
Tests
tests:
- text: You need 2 <code>p</code> elements with Kitty Ipsum text.
testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");'
- text: Make sure each of your <code>p</code> elements has a closing tag.
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
- text: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.
testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.");'
- text: Your code should have one <code>main</code> element.
testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");'
- text: The <code>main</code> element should have two paragraph elements as children.
testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");'
- text: The opening <code>main</code> tag should come before the first paragraph tag.
testString: 'assert(code.match(/<main>\s*?<p>/g), "The opening <code>main</code> tag should come before the first paragraph tag.");'
- text: The closing <code>main</code> tag should come after the second closing paragraph tag.
testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing <code>main</code> tag should come after the second closing paragraph tag.");'
Challenge Seed
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
Solution
// solution required