Skip to content

15. Challenge

martin@mustbebuilt.co.uk edited this page Sep 3, 2024 · 2 revisions

Better Symatic HTML

In the previous lab you were asked to consider the use of semantic elements such as <header>, <nav>, <main>, <section> and <footer> to give structure to your HTML pages.

With a view to making the HTML of this lab more semantic rich, see how many of the <div> tags can be replaced with appropriate HTML semantic elements from the list above.

Tip

We have already added <nav> for you.

For example: you could easily replace <div id="footer"> with <footer>?

How does this affect the layout? What do you need to do to fix the pages?

Tip

Your rule for #footer is no longer valid. Replace it with a simple Element / HTML selector of footer.

Look for other places in the HTML where you could use <header>, <main>, and <section> instead of overly relying on <div> elements.

Add More Styling

Review the typograpy and background styles list on the 20 properties to learn. Try appling more of them to your project.

Clone this wiki locally