/Responsive Web Design

8. Introduction to HTML5 Elements

HTML5 introduces more descriptive HTML tags. These include main, header, footer, nav, video, article, section 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 main HTML5 tag helps search engines and other developers find the main content of your page.

Example usage, a main element with two child elements nested inside it:

<main>
  <h1>Hello World</h1>
  <p>Hello Paragraph</p>
</main>

Note: Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.

Challenge

Create a second 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.

Then, create a main element and nest the two p elements inside the main element.

You should have 2 p elements
Each of your p elements should have a closing tag
Your new p element should contain the first few words of the provided additional kitty ipsum text
Your new p element should be right after the given p element
Your code should have one main element
The main element should have two paragraph elements as children
The opening main tag should come before the first paragraph tag
The closing main tag should come after the second closing paragraph tag

Prev: 7. Delete HTML Elements

Next: 9. Add Images to Your Website