Semantic HTML Structure
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
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.
First start by creating an empty
divand give it an
container, we'll write our entire HTML content inside this container.
Let's create a simple
headerelement inside the
divand the content
Page Headerinside it. Now you should start seeing your content taking shape in the browser preview section, well done! Keep going.
Let's create a navigation bar using the
navelement. This will hold all our links. We'll create an unordered list ,
ulelement inside our navigation bar.
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.
Let's create a
maintag. Any content related to our website would be placed here. For now let's just add the text
Main Contentinside this
Let's make the footer of the page, create a new
footerelement and add the text
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.