website-building-html-foundations
ITIAN Website Building Short Course
Technology Simplified — Solutions That Work
Build the Page with HTML
Turn your page plan into meaningful HTML with headings, sections, links, lists and an accessible image.
By the end of this lesson, you can…
- Explain how elements, tags and attributes work together.
- Create a valid document head and body.
- Use semantic landmarks and a logical heading order.
- Add links and images using correct paths and alternative text.
Before you begin
What you need
- The Visual Studio Code project completed in Lesson 2.
- Your audience, purpose and section plan from Lesson 1.
- One properly licensed image saved in the images folder.
Starter check
Open index.html and confirm it displays in the browser. Keep styles.css available, but build the content structure before visual design.
Understand and demonstrate the skill
HTML describes the meaning and structure of a webpage. Good HTML helps browsers, search engines and assistive technology understand what each part of the page is for.
Key terms
Element and tag
An element is the complete component; tags mark its beginning and, when required, its end.
Attribute
Extra information inside an opening tag, such as href, src, alt, class or lang.
Semantic HTML
Elements chosen for their meaning, such as nav, main, section and footer.
Alternative text
A concise text replacement communicating the purpose or information of an image.
Follow the demonstration
- Complete the document head. Set language, character encoding, responsive viewport, page title and stylesheet link.
- Build the landmarks. Add header, nav, main and footer so the major page areas have clear roles.
- Add content sections. Use one h1 for the page topic and h2 headings for the planned sections.
- Create useful links. Use descriptive link text and verify every href destination.
- Add the image. Use a relative src, suitable alt text and explicit width and height.
Worked example
<header>
<h1>Kāpiti Coast Photography</h1>
<nav aria-label="Main navigation">
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="services">
<h2>Photography Services</h2>
<p>Natural portraits and local event photography.</p>
<img src="images/coast-portrait.webp"
alt="Family portrait at sunset on the Kāpiti Coast"
width="1200" height="800">
</section>
</main>Complete the guided activity
Replace the starter body with the complete content from your plan and test every heading, link and image path.
- Prepare. The document includes language, charset, viewport, title and stylesheet information.
- Build. There is one page h1 followed by logically ordered h2 headings.
- Check. Every link and section ID works in the browser.
- Record. The image has a correct path, dimensions and appropriate alternative text.
Activity checklist
Check your understanding
Answer all three questions, then review any topic that needs another look.
Review, reflect and continue
Success criteria
- All planned content displays in a logical order.
- The document uses meaningful landmarks and headings.
- Links and image paths work without errors.
Reflection prompt
Which semantic element made your page easier to understand, and what content did you reorganise while building?