Content Modeling: Planning the Homepage

Starting a page by opening a file and typing HTML is the fastest way to produce a mess. Content modeling is the practice of planning what belongs on a page — and in what order — before writing a single tag. This lesson introduces that planning approach using the Summit Trail Outfitters homepage as the project.

What is content modeling?

Content modeling means deciding what content belongs on a page and how it is organized, before you think about HTML. It answers:

• What sections does this page need?
• What is the purpose of each section?
• What content goes inside each section?
• How do sections relate to each other?

A content model is not a design. It is not a wireframe. It is a plain-English description of what the page contains and why.

Why plan before coding?

When you plan first:

• You avoid building sections you do not need
• You choose semantic elements for the right reasons
• Your heading hierarchy falls into place naturally
• You catch structural problems before they are buried in code

When you code first:

• Structure tends to follow convenience, not purpose
• Headings end up at whatever level “looks right”
• You add <div> instead of thinking about what the content actually is

The plan does not have to be formal. A bulleted list in a text file is enough.

The Summit Trail Outfitters project

Summit Trail Outfitters is a fictional outdoor adventure company. Their website will have six pages:

Page	File
Homepage	index.html
Tours	tours.html
About	about.html
Blog	blog.html
Blog Article	blog-article.html
Contact	contact.html

You will build this site over Modules 08, 09, and 10. It will be the project you hand to CSS in the next course.

For now, the site will have no styling. That is intentional. Structure comes before appearance.

A content outline for the homepage

Before mapping to HTML, write out what the page needs in plain language:

Global Header
  - Site name: Summit Trail Outfitters
  - Navigation links: Home, Tours, About, Blog, Contact

Hero
  - Headline: "Your Next Adventure Starts Here"
  - Supporting text: brief value statement
  - Call to action: "Browse Tours" link

Featured Tours
  - Section heading: "Popular Tours"
  - Three tour previews, each with:
    - Tour name
    - Short description
    - Duration and difficulty
    - "View Tour" link

About Preview
  - Section heading: "Who We Are"
  - One or two sentences about the company
  - "Learn More" link

Testimonials
  - Section heading: "What Our Guests Say"
  - Two or three guest quotes with names

Newsletter Signup
  - Section heading: "Stay in the Loop"
  - Brief description
  - Email input and submit button

Global Footer
  - Copyright
  - Quick links

This is the content model. It tells you what exists on the page and roughly how it is organized. It does not tell you how it looks.

Mapping content to semantic elements

Once the outline is solid, map each section to a semantic element:

Content	Element
Global header	<header>
Navigation links	<nav> + <ul>
Hero	<section>
Featured Tours	<section> containing <article> elements
About Preview	<section>
Testimonials	<section>
Newsletter Signup	<section> containing <form>
Global footer	<footer>

Each tour preview uses <article> because it is self-contained — it could be moved elsewhere and still make sense.

Heading hierarchy

The heading hierarchy for the homepage would look like this:

<h1> — Summit Trail Outfitters (site name in header)
  <h2> — Your Next Adventure Starts Here (hero headline)
  <h2> — Popular Tours (featured tours section)
    <h3> — Pine Ridge Loop (first tour)
    <h3> — River Canyon Trail (second tour)
    <h3> — Summit Challenge (third tour)
  <h2> — Who We Are (about preview)
  <h2> — What Our Guests Say (testimonials)
  <h2> — Stay in the Loop (newsletter)

Rules that apply:

• <h1> appears once per page
• Do not skip levels (no jumping from <h2> to <h4>)
• Every <section> should have a heading that describes its purpose
• Heading levels reflect content hierarchy, not visual size

Key clarifications

Structure comes before styling. The site will have no CSS at this stage. Headings may not look the way you want. Sections will stack vertically in plain browser defaults. That is fine — you are building structure, not appearance.

Every section should have a clear purpose. If you cannot state in one sentence what a section is for, you probably do not need it.

Not everything needs a <section>. A <section> is for thematic grouping with a heading. A standalone image or decorative element does not need a wrapper.

Exercise

Open a plain text file — or a comment at the top of a new index.html — and write a content outline for the Summit Trail Outfitters homepage.

Your outline does not need to match the example exactly. The goal is to think through what each section does and what it contains before you write HTML.

Work through these questions:

1. What is the first thing a visitor should see? (Hero)
2. What is the primary action you want them to take? (Browse tours)
3. What sections build trust? (Testimonials, about preview)
4. What sections support return visits? (Newsletter)
5. What goes in the footer?

When you have your outline, keep it open. You will use it in Lesson 02 when you write the HTML.

Recap

• Content modeling means planning what belongs on a page before writing HTML.
• A content outline lists sections in plain language without worrying about elements or styling.
• Mapping content to semantic elements comes after the outline is settled.
• Heading hierarchy should reflect content structure, not visual preference.
• Summit Trail Outfitters is the project for Modules 08–10: a six-page HTML site built without CSS.