gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(challenge): update text to give an explanation of wrapping (#34811)

Browse Source 
* fix(challenge): update text to give an explanation of wrapping

* fix(challenge): simplify challenge text

* fix(challenge): update challenge text add solution

* fix(challenge): remove line breaks

* fix(challenge): make second instruction more clear
This commit is contained in:
lasjorg
2019-04-05 04:49:21 +02:00
committed by Manish Giri
parent 881d2ab072
commit f91dea9b5c
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.english.md
View File

@ -7,16 +7,17 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c4Ep9Am'
## Description
<section id='description'>
HTML5 introduces more descriptive HTML tags. These include <code>header</code>, <code>footer</code>, <code>nav</code>, <code>video</code>, <code>article</code>, <code>section</code> and others.
These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.
The <code>main</code> HTML5 tag helps search engines and other developers find the main content of your page.
HTML5 introduces more descriptive HTML tags. These include <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>video</code>, <code>article</code>, <code>section</code> and others.
These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The <code>main</code> HTML5 tag helps search engines and other developers find the main content of your page.
Example usage, a <code>main</code> element with two child elements nested inside it:
<blockquote>&#60;main&#62; <br>&nbsp;&nbsp;&#60;h1&#62;Hello World&#60;/h1&#62;<br>&nbsp;&nbsp;&#60;p&#62;Hello Paragraph&#60;/p&#62;<br>&#60;/main&#62;</blockquote>
<strong>Note:</strong> Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
</section>
## Instructions
<section id='instructions'>
Create a second <code>p</code> element after the existing <code>p</code> element with the following kitty ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>
Wrap the paragraphs with an opening and closing <code>main</code> tag.
Then, create a <code>main</code> element and nest the two <code>p</code> elements inside the <code>main</code> element.
</section>
## Tests
@ -63,7 +64,11 @@ tests:
## Solution
<section id='solution'>
```js
// solution required
```html
<h2>CatPhotoApp</h2>
<main>
<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>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
</section>