Chapter 5 — Build the HTML Structure Step by Step
Introduction
After completing the wireframe, you are finally ready to begin building the actual website.
This is the stage where the visual plan becomes a functioning webpage. The first technology you will use is HTML, or HyperText Markup Language.
HTML provides the structure of the website. It tells the browser what each part of the page represents: a heading, paragraph, navigation menu, image, button, article, form, footer and so on.
A useful way to think about the relationship between HTML, CSS and JavaScript is:
HTML = Structure
CSS = Appearance
JavaScript = Behavior
If HTML is the skeleton of the website, CSS is the clothing and JavaScript is the movement.
For a commercial weight-loss website template, clean HTML is especially important because the buyer may later modify the content, convert the design to WordPress, connect it to a CMS or reuse individual components.
The goal of this chapter is therefore not simply to make the page appear on screen. The goal is to create a clean, semantic and reusable HTML foundation.
5.1 Create the Project Folder
Start with a simple project folder.
For example:
weight-loss-template/
│
├── index.html
├── about.html
├── programs.html
├── blog.html
├── contact.html
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
├── images/
│
├── fonts/
│
└── docs/This structure keeps the project organized.
As the template becomes larger, you may add additional folders:
components/
assets/
icons/
pages/The exact organization can vary, but the principle is important:
Keep related files together and use predictable names.
5.2 Create the Basic HTML Document
Every HTML page should begin with a proper document structure.
A basic page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthy Life | Weight Loss & Wellness</title>
<meta name="description" content="Practical resources for healthy lifestyle education, nutrition and wellness.">
</head>
<body>
</body>
</html>The DOCTYPE tells the browser that the document uses modern HTML.
The lang attribute identifies the primary language.
The viewport setting is essential for responsive websites.
The title is displayed in the browser tab and can also contribute to search visibility.
The description provides a useful summary for search engines and other systems.
5.3 Understand Semantic HTML
Modern HTML provides meaningful elements.
Instead of creating everything with:
<div>you can use:
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>These elements communicate the purpose of the content.
For example:
<header>
...
</header>
<main>
<section>
...
</section>
<section>
...
</section>
</main>
<footer>
...
</footer>This makes the code easier to understand and improves the structural quality of the website.
5.4 Build the Header
Start with the header.
A simple structure could be:
<header class="site-header">
<div class="container">
<a href="index.html" class="logo">
Healthy Life
</a>
<nav class="main-navigation">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="programs.html">Programs</a>
<a href="blog.html">Blog</a>
<a href="resources.html">Resources</a>
<a href="contact.html">Contact</a>
</nav>
<a href="contact.html" class="btn btn-primary">
Get Started
</a>
</div>
</header>This is already much better than putting every element into anonymous containers.
The structure clearly identifies the website header and navigation.
5.5 Create a Mobile Menu Button
The desktop navigation will not fit comfortably on every mobile screen.
Create a menu button:
<button class="menu-toggle"
type="button"
aria-label="Open navigation menu"
aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>The button will later be controlled with JavaScript.
The aria-label gives the control an accessible name.
The aria-expanded attribute communicates whether the navigation is open or closed.
These details may seem small, but they are important in a professional template.
5.6 Create the Main Element
After the header, create the main content:
<main>
</main>Only the primary content of the page should normally be inside <main>.
This makes the structure clearer for browsers, assistive technologies and developers.
5.7 Build the Hero Section
Based on your wireframe, create the hero.
<section class="hero">
<div class="container hero-grid">
<div class="hero-content">
<span class="eyebrow">
Healthy Lifestyle Resources
</span>
<h1>
Build Healthier Habits for Everyday Life
</h1>
<p>
Explore practical resources about nutrition,
movement and sustainable lifestyle habits.
</p>
<div class="hero-actions">
<a href="resources.html" class="btn btn-primary">
Explore Resources
</a>
<a href="blog.html" class="btn btn-secondary">
Read the Guides
</a>
</div>
</div>
<div class="hero-media">
<img
src="images/hero.jpg"
alt="Woman preparing a healthy meal in a bright kitchen">
</div>
</div>
</section>Notice that the image has meaningful alternative text.
Do not write:
alt="image"if the image communicates meaningful information.
5.8 Write Better Heading Structure
The homepage should normally have one primary <h1> representing the main topic.
For example:
<h1>Build Healthier Habits for Everyday Life</h1>Then major sections can use:
<h2>Explore Our Resources</h2>Subsections can use:
<h3>Nutrition</h3>Avoid choosing heading levels purely because one looks larger.
The hierarchy should represent the content structure.
CSS controls appearance.
HTML communicates meaning.
5.9 Build the Introduction Section
After the hero, create the introduction:
<section class="intro-section">
<div class="container">
<div class="section-heading">
<span class="eyebrow">
Start Here
</span>
<h2>
Practical Guidance for a Healthier Lifestyle
</h2>
<p>
Discover educational articles, practical resources
and useful ideas for building healthier everyday habits.
</p>
</div>
</div>
</section>Notice that the section heading is reusable.
You can use the same class structure throughout the website.
5.10 Build Feature Cards
Now create three feature cards.
<div class="feature-grid">
<article class="feature-card">
<div class="feature-icon">01</div>
<h3>Nutrition</h3>
<p>
Explore practical educational content about balanced eating.
</p>
<a href="blog.html">Explore Nutrition →</a>
</article>
<article class="feature-card">
<div class="feature-icon">02</div>
<h3>Movement</h3>
<p>
Discover ideas for incorporating more activity into everyday life.
</p>
<a href="blog.html">Explore Movement →</a>
</article>
<article class="feature-card">
<div class="feature-icon">03</div>
<h3>Healthy Habits</h3>
<p>
Learn about practical routines and lifestyle strategies.
</p>
<a href="blog.html">Explore Habits →</a>
</article>
</div>Using <article> is appropriate when each card represents a self-contained piece of content.
5.11 Create the Featured Articles Section
Now create the blog cards.
<section class="articles-section">
<div class="container">
<div class="section-heading">
<span class="eyebrow">From the Blog</span>
<h2>Latest Articles</h2>
<p>
Explore practical educational content and lifestyle resources.
</p>
</div>
<div class="article-grid">
<article class="article-card">
<a href="single-post.html">
<img
src="images/article-1.jpg"
alt="Healthy foods arranged on a kitchen table">
</a>
<div class="article-card-content">
<span class="category">Nutrition</span>
<h3>
7 Practical Habits for Better Meal Planning
</h3>
<p>
Simple ideas for organizing everyday meals.
</p>
<a href="single-post.html">
Read Article →
</a>
</div>
</article>
</div>
</div>
</section>You can duplicate the article card for additional posts.
Later, if you convert the template to WordPress, these static cards can become dynamically generated posts.
5.12 Avoid Repeating Code Carelessly
During the HTML stage, repetition is unavoidable to some extent.
However, recognize which elements are components.
For example:
article-card
feature-card
button
section-heading
testimonial
faq-itemThese components should follow consistent structures.
When you later convert the site to WordPress or another CMS, this organization will make the transition easier.
5.13 Build the Resource Section
Create a highlighted resource:
<section class="resource-section">
<div class="container resource-grid">
<div class="resource-image">
<img
src="images/guide.jpg"
alt="Healthy lifestyle guide displayed on a tablet">
</div>
<div class="resource-content">
<span class="eyebrow">
Free Resource
</span>
<h2>
A Simple Guide to Building Healthier Daily Habits
</h2>
<p>
Explore practical ideas and educational resources
designed for everyday use.
</p>
<a href="#" class="btn btn-primary">
Download the Guide
</a>
</div>
</div>
</section>If the resource is not actually available, the commercial demo should clearly indicate that it is sample content rather than pretending that a real download exists.
5.14 Create the Program Section
If your template supports coaching or wellness programs, add a reusable section.
<section class="programs-section">
<div class="container">
<div class="section-heading">
<span class="eyebrow">Programs</span>
<h2>Choose Your Next Step</h2>
</div>
<div class="program-grid">
<article class="program-card">
<h3>Starter</h3>
<p>
A simple introduction to healthier lifestyle planning.
</p>
<a href="programs.html">Learn More →</a>
</article>
<article class="program-card">
<h3>Lifestyle</h3>
<p>
A broader collection of educational resources and tools.
</p>
<a href="programs.html">Learn More →</a>
</article>
<article class="program-card">
<h3>Personal Support</h3>
<p>
A customizable area for coaching or consultation services.
</p>
<a href="programs.html">Learn More →</a>
</article>
</div>
</div>
</section>Again, these are template structures. Actual claims, pricing and service details should be replaced by the buyer.
5.15 Create the Trust Section
A simple trust section can introduce the site’s author or organization.
<section class="trust-section">
<div class="container trust-grid">
<div class="trust-image">
<img
src="images/expert.jpg"
alt="Placeholder portrait for website author">
</div>
<div class="trust-content">
<span class="eyebrow">
About the Platform
</span>
<h2>
Information Designed to Be Clear, Practical and Useful
</h2>
<p>
Replace this demonstration content with the organization's
real background, editorial approach and professional information.
</p>
<a href="about.html" class="btn btn-secondary">
Learn More
</a>
</div>
</div>
</section>The phrase “replace this demonstration content” can be useful in a template because it reminds buyers which areas require customization.
5.16 Create the Testimonial Structure
If testimonials are included, clearly treat demo testimonials as placeholders.
<section class="testimonials-section">
<div class="container">
<div class="section-heading">
<span class="eyebrow">Customer Experiences</span>
<h2>What People Say</h2>
</div>
<div class="testimonial-grid">
<article class="testimonial-card">
<blockquote>
“Replace this sample quotation with a verified customer experience.”
</blockquote>
<cite>
— Customer Name
</cite>
</article>
</div>
</div>
</section>Never create invented health outcomes and present them as genuine customer results.
5.17 Build the FAQ
The HTML <details> and <summary> elements provide a simple accessible foundation for FAQs.
<section class="faq-section">
<div class="container">
<div class="section-heading">
<span class="eyebrow">FAQ</span>
<h2>Frequently Asked Questions</h2>
</div>
<div class="faq-list">
<details class="faq-item">
<summary>
How do I use this website?
</summary>
<p>
Replace this demonstration answer with information
specific to the final website.
</p>
</details>
<details class="faq-item">
<summary>
Where can I find the resources?
</summary>
<p>
Add the appropriate explanation and links here.
</p>
</details>
</div>
</div>
</section>This is a good example of using HTML functionality before reaching for JavaScript.
5.18 Build the Newsletter Form
Now create the signup section.
<section class="newsletter-section">
<div class="container newsletter-inner">
<div class="newsletter-content">
<span class="eyebrow">Stay Connected</span>
<h2>
Get Practical Wellness Resources
</h2>
<p>
Subscribe to receive new articles and useful guides.
</p>
</div>
<form class="newsletter-form" action="#" method="post">
<label for="newsletter-email">
Email Address
</label>
<div class="form-row">
<input
type="email"
id="newsletter-email"
name="email"
placeholder="you@example.com"
required>
<button type="submit" class="btn btn-primary">
Subscribe
</button>
</div>
</form>
</div>
</section>The form does not actually process submissions yet. That will require a backend service or email marketing integration.
5.19 Create the Final CTA
<section class="final-cta">
<div class="container">
<h2>
Explore Practical Resources for Your Next Step
</h2>
<p>
Discover articles, guides and useful educational content.
</p>
<a href="resources.html" class="btn btn-primary">
Explore Resources
</a>
</div>
</section>This closes the homepage with a clear action.
5.20 Build the Footer
A basic footer could look like:
<footer class="site-footer">
<div class="container footer-grid">
<div class="footer-brand">
<a href="index.html" class="logo">
Healthy Life
</a>
<p>
Practical resources for healthier everyday living.
</p>
</div>
<div class="footer-column">
<h3>Explore</h3>
<a href="about.html">About</a>
<a href="programs.html">Programs</a>
<a href="blog.html">Blog</a>
</div>
<div class="footer-column">
<h3>Resources</h3>
<a href="resources.html">Guides</a>
<a href="recipes.html">Recipes</a>
<a href="faq.html">FAQ</a>
</div>
<div class="footer-column">
<h3>Legal</h3>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms</a>
<a href="disclaimer.html">Disclaimer</a>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>
© 2026 Healthy Life. All rights reserved.
</p>
</div>
</div>
</footer>This gives the template a complete structural foundation.
5.21 Add the CSS File
Connect your stylesheet inside the <head>:
<link rel="stylesheet" href="css/style.css">At the end of the HTML body, connect JavaScript:
<script src="js/script.js"></script>Keep CSS and JavaScript separate from the HTML whenever practical.
This makes the project easier to maintain.
5.22 Start With a CSS Reset
A simple reset can reduce browser inconsistencies.
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
img {
max-width: 100%;
display: block;
}
button,
input,
textarea,
select {
font: inherit;
}Do not add hundreds of CSS rules immediately.
Build the stylesheet progressively.
5.23 Define the Global Variables
Use the design system created in Chapter 3.
:root {
--primary: #6b8e68;
--secondary: #355c4d;
--background: #f8f6ef;
--surface: #ffffff;
--text: #26332d;
--muted: #66736d;
--accent: #e9a45c;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 48px;
--space-6: 64px;
--space-7: 96px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--container: 1180px;
}Now your CSS has a central design vocabulary.
5.24 Create the Container
.container {
width: min(92%, var(--container));
margin-inline: auto;
}This keeps content centered and prevents extremely wide lines on large screens.
5.25 Create Basic Typography
body {
font-family: Arial, sans-serif;
color: var(--text);
background: var(--surface);
font-size: 17px;
line-height: 1.7;
}
h1,
h2,
h3 {
line-height: 1.15;
margin-top: 0;
}
h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
}
h2 {
font-size: clamp(2rem, 4vw, 3rem);
}
h3 {
font-size: 1.35rem;
}The clamp() function allows typography to scale between minimum and maximum sizes.
5.26 Style the Buttons
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 24px;
border-radius: var(--radius-sm);
font-weight: 700;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.2s ease,
background-color 0.2s ease,
color 0.2s ease;
}
.btn:hover {
transform: translateY(-2px);
}
.btn-primary {
background: var(--primary);
color: #ffffff;
}
.btn-secondary {
border-color: var(--primary);
color: var(--primary);
background: transparent;
}Keep animation subtle.
The purpose of a hover effect is to communicate interaction, not distract visitors.
5.27 Build the Hero Grid
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--space-7);
padding-block: var(--space-7);
}This creates the two-column structure defined in the wireframe.
5.28 Add Responsive Behavior
Now introduce a mobile breakpoint.
@media (max-width: 800px) {
.hero-grid {
grid-template-columns: 1fr;
gap: var(--space-5);
padding-block: var(--space-6);
}
}The desktop two-column hero becomes a single-column mobile layout.
This is the beginning of responsive design.
5.29 Do Not Design Only for One Screen
A website can be viewed on:
- Small phones.
- Large phones.
- Tablets.
- Laptops.
- Desktop monitors.
- Large high-resolution displays.
Therefore, do not ask:
“Does it look good on my computer?”
Ask:
“Does the layout remain useful across different screen sizes?”
This mindset will significantly improve the quality of your template.
5.30 Validate the HTML
Before continuing, open the page in your browser.
Check:
- Does the page load?
- Are all images visible?
- Do links work?
- Does the navigation appear?
- Are headings correctly structured?
- Are there broken files?
- Does the page work without JavaScript?
You can also use an HTML validator to identify structural errors.
Fix errors before building additional pages.
5.31 Use Realistic Placeholder Content
Do not fill the template with meaningless text such as:
Lorem ipsum dolor sit amet.
For a commercial template, realistic placeholder content demonstrates how the final website will actually look.
Instead of:
Lorem ipsum…
use:
Explore practical resources covering nutrition, movement and healthy lifestyle habits.
This makes your demo more convincing.
5.32 Use Proper Image Alt Text
For meaningful images:
<img
src="images/healthy-food.jpg"
alt="Fresh vegetables and healthy ingredients arranged on a table">For decorative images:
<img
src="images/decorative-shape.svg"
alt="">The alternative text should describe the image’s purpose rather than stuff keywords into it.
5.33 Keep File Names Simple
Use names such as:
hero.jpg
article-1.jpg
article-2.jpg
guide.jpg
expert.jpg
logo.svgAvoid names such as:
IMG_9283_FINAL_NEW2.jpgSimple file names make the project easier to maintain.
5.34 Create a Development Checklist
Before moving to the next stage, check:
- HTML document created.
- Header created.
- Navigation created.
- Mobile menu button added.
- Hero created.
- Feature section created.
- Article cards created.
- Resource section created.
- Program section created.
- Trust section created.
- FAQ created.
- Newsletter form created.
- CTA created.
- Footer created.
- CSS connected.
- JavaScript connected.
- Responsive foundation added.
- Images have appropriate alt text.
- Links point to appropriate pages.
- No obvious broken elements.
Conclusion
You have now moved from planning into actual development.
The wireframe has become a real HTML structure. The design system has become CSS variables and reusable classes. The homepage is no longer an idea—it is the beginning of a functioning website.
The most important lesson from this chapter is:
Write HTML for structure and meaning, not merely appearance.
A clean HTML foundation will make everything that follows easier.
In the next chapter, we will focus on CSS styling and responsive design, turning the basic structure into a polished, modern weight-loss website template that works beautifully across desktop, tablet and mobile screens.
