HTML’s role in a website
HTML is the structural layer of a web page. It gives meaning to content before any styling or interactivity is added. A heading is not just large text; it defines the beginning of a section. A link is not just blue text; it creates navigation. Good HTML gives the browser, search engines, screen readers, and other developers a clear map of the page.
The document skeleton
Every page should include the doctype, html, head, and body elements. The doctype tells the browser to use modern HTML rules. The head contains metadata, title information, viewport settings, stylesheet links, and search descriptions. The body contains visible content and interactive controls.
A useful page title explains the specific page and the site, such as Projects | Student Portfolio. The viewport meta tag is also essential because it lets responsive layouts use the real device width instead of a simulated desktop width.
Semantic regions
Use header, nav, main, section, article, aside, and footer to describe the page. Semantic regions make pages easier to navigate for assistive technology and easier to maintain for developers.
Headings and reading order
Use one h1 for the main page topic. Use h2 for major sections and h3 for subsections. Do not skip heading levels simply because a different size looks better. CSS should control appearance; HTML should preserve meaning.
Links, buttons, and forms
Use links for navigation and buttons for actions. A link should have a real destination in its href. A button should describe the action it performs, such as “Save notes” or “Open menu”. Forms should have connected labels, useful input types, and clear submission controls. A strong HTML foundation makes CSS and JavaScript simpler.
Content elements beyond paragraphs
Choose elements based on the kind of content you are publishing. Use lists for grouped items, figure and figcaption when an image needs a caption, and tables only for genuinely tabular data with row and column relationships. For images, write alt text that communicates the image’s purpose in context rather than repeating the file name.
Before styling a page, read its HTML from top to bottom. If the meaning is clear without CSS, you have created a stable foundation for the rest of the project.
Example code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Portfolio</title>
</head>
<body>
<header>
<a href="/">Student Portfolio</a>
<nav aria-label="Main navigation">
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section aria-labelledby="intro-title">
<h1 id="intro-title">I build responsive websites.</h1>
<p>I am learning HTML, CSS, and JavaScript.</p>
</section>
<section id="projects" aria-labelledby="projects-title">
<h2 id="projects-title">Featured projects</h2>
<article>
<h3>Bakery landing page</h3>
<p>A responsive landing page for a fictional local bakery.</p>
</article>
</section>
</main>
</body>
</html>Applied example: a labelled contact section
This section combines semantic grouping, a descriptive heading, a connected label, and a button used for an action.
<section id="contact" aria-labelledby="contact-title">
<h2 id="contact-title">Contact me</h2>
<p>Tell me briefly what you would like to build.</p>
<form>
<label for="message">Project summary</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send enquiry</button>
</form>
</section>Guided example: how to approach this lesson
Use these steps as a practical build process. The goal is not just to read the concept, but to know exactly how to apply it in your own page.
Step 1: Outline the page first
Before writing code, list the content sections: header, navigation, main hero, project cards, contact form, and footer. This prevents you from randomly adding divs.
Step 2: Choose semantic elements
Use header for the top area, nav for links, main for the page’s primary content, section for major content groups, article for standalone project cards, and footer for closing information.
Step 3: Add meaning before styling
Do not worry about colours or spacing yet. First make sure the page reads correctly from top to bottom without CSS.
More examples
Compare these examples carefully. The improved version shows the kind of code pattern you should aim for when building your own project.
Weak HTML
<div class="top">
<div class="big-text">My Website</div>
<div>click here</div>
</div>This is weak because the browser cannot tell what is a heading, what is navigation, or what is meant to be interactive.
Improved HTML
<header class="site-header">
<h1>My Website</h1>
<nav aria-label="Main navigation">
<a href="#projects">View projects</a>
</nav>
</header>This is clearer because the heading, header, navigation region, and destination are all explicit.
Before moving on
Use this checklist to make sure you understand the lesson well enough to apply it without copying blindly.
- Does the page have one clear h1?
- Are links used for navigation and buttons used for actions?
- Does every form input have a label?
- Can someone understand the page structure before CSS loads?
Common mistakes to avoid
- Using div for everything.
- Skipping form labels.
- Using headings only for visual size.
- Writing vague links like “click here”.
Practice task
Create a semantic homepage for a fictional local service. Build the HTML before adding any CSS.
Required outcome
- Add a document title, viewport meta tag, header, navigation, main region, and footer.
- Create a hero section, a three-item services list, and a contact form with connected labels.
- Use one clear
h1, logicalh2headings, and descriptive link text. - Add one image with useful alt text and confirm the page still makes sense if the image does not load.
Stretch goal: Add a project article with a heading, summary, and “Read case study” link.