hands-on lab

Working with Semantic HTML

Up to 45m
Get guided in a real environmentPractice with a step-by-step scenario in a real, provisioned environment.
Learn and validateUse validations to check your solutions every step of the way.
See resultsTrack your knowledge and monitor your progress.


In this lab, you will be working with the HTML Semantic Elements. A semantic element clearly describes its meaning to the browser.

Semantic elements can be used to define different parts of a web page by representing logical sections or components.

Learning Objectives

Upon completion of this lab, you will be able to:

  • Work with multiple semantic elements.
  • Work with the commonly used semantic elements such as nav and footer

Intended Audience

  • Beginners learning front-end development
  • Software Engineers who need to learn front-end technologies to expand their skillset


The following courses/courses and labs can ensure your success:

About the author

Rebecca Hom, opens in a new tab
Full Stack Lab Creator

Rebecca has been educating students in coding full-stack boot camps for over two years. She is passionate about helping people learn how to code. Previously she spent several years working in web development for the education industry. In her spare time, she likes writing and occasionally collecting Pokemon.

Covered topics

Lab steps

Introduction to HTML and CSS Labs
Creating a Main Element
Creating a Header Element
Creating a Nav Element
Creating a Footer Element
Creating a Section Element