Semantic HTML Structure

Easy
340
4
61.8% Acceptance

Welcome to HTML Basic Semantic Layout Lab.

In this lab, you'll create a very simple html page layout that would contain four semantic html elements.

You would have to create a simple header , nav, main and footer elements with proper unordered list of links in the nav element using a tag for the links.

This challenge is focused on helping you understand the basic layout of any website that is created. Take a look at the challenges, for clear break down of tasks that you have to accomplish in this lab.

Challenges

  1. First start by creating an empty div and give it an id with text container , we'll write our entire HTML content inside this container.

  2. Let's create a simple header element inside the div and the content Page Header inside it. Now you should start seeing your content taking shape in the browser preview section, well done! Keep going.

  3. Let's create a navigation bar using the nav element. This will hold all our links. We'll create an unordered list , ul element inside our navigation bar.

  4. For this challenge, we'll add three links in the unordered list. Create three list items inside the unordered list, the content of these unordered list would be an anchor that that holds the link and the text that would be disaplyed in the navigation bar. Add any of your three favourite links here.

  5. Let's create a main tag. Any content related to our website would be placed here. For now let's just add the text Main Content inside this

  6. Let's make the footer of the page, create a new footer element and add the text Footer inside it.

You've made it to the end! If you've followed the steps of the challenges, a proper styling should have applied to Markup that you've written you can inspect the styles and tinker around if you're interested! Submit the lab for evaluation.