Creating Your First HTML Page

Build a valid page with meaningful structure, headings, paragraphs, lists and metadata.

What you will learn

• Explain the role of HTML
• Create a complete HTML document
• Use semantic content elements

Before you begin

Create a separate practice folder and use non-sensitive sample content. Keep backup copies before restructuring files. Browser interfaces vary, so use the browser developer tools available on your computer.

Understand HTML

HTML describes the structure and meaning of page content. CSS controls presentation, while JavaScript can add behaviour.

An element normally includes an opening tag, content and a closing tag. Attributes add information such as a link destination or image description.

Build the document

A basic document includes a doctype, html element, head and body. The head contains metadata such as character encoding, viewport settings and a useful title.

The body contains visible content. Indent nested elements consistently so the structure is easy to inspect and maintain.

Use meaningful elements

Use one clear main heading, then organise sections with a logical heading order. Paragraphs, lists, articles, navigation and footer elements describe their purpose.

Semantic HTML helps browsers, search tools and assistive technologies understand the page without extra scripting.

Guided practice

1. Create index.html with a complete document structure.
2. Add a title, heading, two paragraphs and a list.
3. Open the file in a browser and correct any structural mistakes.

Knowledge check

1. What belongs in the head?
2. What does semantic HTML communicate?
3. Why should heading levels be logical?

Completion standard

Continue when you can complete the guided practice and explain the knowledge-check answers in your own words.