1494a50123
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
70 lines
2.7 KiB
Markdown
70 lines
2.7 KiB
Markdown
---
|
|
title: Introduction to HTML5 Elements
|
|
---
|
|
# Introduction to HTML5 Elements
|
|
|
|
---
|
|
## Problem Explanation
|
|
The example below represent a `h1` element and a `h4` element wrapped into a `header` element:
|
|
```
|
|
<header>
|
|
<h1> Big title </h1>
|
|
<h4> Tiny subtitle </h4>
|
|
</header>
|
|
```
|
|
|
|
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`).
|
|
|
|
|
|
---
|
|
## Solutions
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
|
|
|
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>
|
|
```
|
|
|
|
</details> |