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

Added objective and solutions to "Introduction to HTML5 Elements" (#34689)

Browse Source 
* Added objective and solutions to "Introduction to HTML5 Elements"

* fix: removed restatement of challenge problem
This commit is contained in:
Kevin Trang
2019-03-09 18:33:16 +11:00
committed by The Coding Aviator
parent 8d5d211975
commit 2ea2f9b752
1 changed files with 47 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
guide/english/certifications/responsive-web-design/basic-html-and-html5/introduction-to-html5-elements/index.md
View File

@ -3,8 +3,6 @@ title: Introduction to HTML5 Elements
---
## Introduction to HTML5 Elements
To wrap an HTML element around other HTML element(s) means to put the <em>inner</em> element(s) after the opening tag of the wrapper and before its closing tag.<br/>
The example below represent a `h1` element and a `h4` element wrapped into a `header` element:
```
<header>
@ -14,3 +12,50 @@ The example below represent a `h1` element and a `h4` element wrapped into a `he
```
As you can see the `header` contains the other elements that ends up on the same level ( the `h1` ends before the `h4` starts and both are nested into the `header`).
## Solution
Firstly, we will need to add a second `<p>` element below the first `<p>` element, which needs to say `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`, as shown below:
### Before adding 2nd `<p>` element
```html
<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>
```
### After adding 2nd `<p>` element
```html
<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>
<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> <!-- The second <p> element has been added -->
```
However, the objective also requires the user to add the `<main>` elements between the `<p>` elements as shown below:
### Before adding `<main>` element
```html
<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>
<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>
```
### After adding `<main>` element
```html
<h2>CatPhotoApp</h2>
<main> <!-- The opening <main> element has been added -->
<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> <!-- The closing <main> element has been added -->
```
## Full Solution
```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>
```