- Lab
-
Libraries: If you want this lab, consider one of these libraries.
- Core Tech
Guided: Structuring a Web Page with HTML
Learn the fundamentals of HTML5 by building a well-structured personal portfolio page. You’ll discover how to use semantic elements like , , and to create a meaningful and accessible web page structure, laying a solid foundation for your web development journey.
Lab Info
Table of Contents
-
Challenge
Step 1: Setting Up the Basic Document Structure
Welcome to the world of HTML! In this first step, you'll create the essential skeleton that every HTML page needs. This includes defining the document type, creating the root
<html>element, and adding the<head>for metadata and the<body>for visible content. Getting this structure right is the first and most important step in web development.You can check your progress in the Web Browser tab or by clicking the following link: {{localhost}} > This lab experience was developed by the Pluralsight team using Forge an internally developed AI tool utilizing Gemini technology. All sections were verified by human experts for accuracy prior to publication. For issue reporting, please contact us.
-
Challenge
Step 2: Creating the Page Header
A good header gives users an immediate sense of place. In this step, you'll use the semantic
<header>element to group your page's title and primary navigation. You'll learn how to create the main<h1>heading and build a navigation menu using<nav>,<ul>, and<li>elements. This creates a clear and accessible entry point to your page. -
Challenge
Step 3: Structuring the Main Content
Now move to the heart of the page: the main content. You'll use the
<main>tag to denote the primary content area. Within that, you'll use<section>to create a self-contained 'About Me' area. This is where you'll practice adding headings (<h2>), paragraphs (<p>), and images (<img>), learning how to structure content logically and make it visually appealing. -
Challenge
Step 4: Detailing Your Projects
A portfolio isn't complete without showing off your work. In this step, you'll create a new
<section>dedicated to your projects. This will reinforce your understanding of how to use sections to organize a page. You'll also practice creating hyperlinks with the<a>tag, a fundamental skill for connecting pages and resources on the web. -
Challenge
Step 5: Finalizing with a Footer
To wrap things up, you'll add a
<footer>to your page. The footer is the perfect place for copyright information, contact details, or other tertiary information. You'll learn how to use the semantic<footer>element and place a final paragraph of text within it, completing the structure of your portfolio page. -
Challenge
Conclusion
Congratulations on completing the lab!
You've successfully built a complete personal portfolio page from a blank slate, using the fundamental principles of modern HTML.
You've learned how to structure a document with semantic elements like
<header>,<main>,<section>, and<footer>, and how to add content using headings, paragraphs, images, and links.This isn't just any webpage; it's a well-structured, semantic foundation that is accessible and optimized for search engines. These are critical skills for any web developer. Your page is now perfectly set up for the next exciting step: bringing it to life with styling.
Fantastic job, and happy coding!
Real skill practice before real-world application
Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.
Learn by doing
Engage hands-on with the tools and technologies you’re learning. You pick the skill, we provide the credentials and environment.
Follow your guide
All labs have detailed instructions and objectives, guiding you through the learning process and ensuring you understand every step.
Turn time into mastery
On average, you retain 75% more of your learning if you take time to practice. Hands-on labs set you up for success to make those skills stick.