1.5 Build a basic HTML page structure

Unit 6 Website Development - Tutorial 1

1.5 Build a basic HTML page structure

Continue the same static website project by adding the essential HTML structure every page needs.

What You Are Building

A basic HTML page structure is the starting template for a web page. It tells the browser that the file is an HTML document, gives the page a head section for setup information, and gives the page a body section for the content visitors can see.

Every page in your website should use this structure before you add headings, paragraphs, images, links or navigation.

Basic Page Template

In your unit-6-website folder, add this structure to index.html, about.html, timetable.html and contact.html. Change the <title>, <h1> and paragraph text so each page has a clear purpose.

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Coding Club</title>
</head>
<body>
    <h1>School Coding Club</h1>
    <p>Welcome to the School Coding Club website.</p>
</body>
</html>

What Each Part Does

Part	Purpose
`<!DOCTYPE html>`	Tells the browser to use modern HTML.
`<html lang="en-GB">`	Starts the HTML page and sets the page language to British English.
`<head>`	Contains setup information about the page. This does not usually appear on the web page itself.
`<meta charset="UTF-8">`	Allows the page to display a wide range of characters correctly.
`<meta name="viewport">`	Helps the page display properly on phones, tablets and computers.
`<title>`	Sets the text shown in the browser tab.
`<body>`	Contains the visible page content, such as headings, text, images and links.

Build It Yourself

Open your unit-6-website project folder.
Add the basic page template to index.html, about.html, timetable.html and contact.html.
Use School Coding Club as the homepage <title> and <h1>.
Use About the Club as the about page <title> and <h1>.
Use Club Timetable as the timetable page <title> and <h1>.
Use Contact the Club as the contact page <title> and <h1>.
Add one paragraph to each page.
Save each file and open each one in a browser.

Common Mistakes

Putting visible page content inside the <head> section.
Forgetting to close tags such as <title>, <h1> or <p>.
Saving the file as index.html.txt instead of index.html.
Using the same text for the browser tab title and every page heading without thinking about the page purpose.

Success Checklist

All four HTML files start with <!DOCTYPE html>.
All four pages have opening and closing <html>, <head> and <body> tags.
Each <title> appears inside the <head>.
Each visible heading and paragraph appears inside the <body>.
All four pages open correctly in a browser.