Module 2

HTML Basics

Every web page you’ve ever visited is built from HTML. Let’s make one.

1. What is HTML?

HTML stands for HyperText Markup Language. It’s the language we use to describe the structure of a web page: headings, paragraphs, images, links and so on.

HTML doesn’t “do” anything like Python. It just tells the browser: this is a heading, this is a paragraph, this is a picture.

2. Tags & elements

HTML is written using tags, which always sit inside angle brackets: < >. Most tags come in pairs: an opening tag and a closing tag with a slash.

<h1>My favourite game</h1>
<p>Minecraft is amazing.</p>

Together, the tags plus the content between them make an element.

TagMeaning
<h1><h6>Headings (big to small)
<p>Paragraph
<a>Link (“anchor”)
<img>Image
<ul> & <li>Bulleted list
<strong>Important (bold)
<em>Emphasis (italic)

3. A full page

Every HTML page has the same skeleton. Don’t worry about memorising it. Just recognise it.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, web!</h1>
    <p>This is my first page.</p>
  </body>
</html>
  • <head> is for information about the page (like the title in the browser tab).
  • <body> is for the content you actually see.

4. Text content

<h1>About me</h1>
<p>My name is <strong>Sam</strong> and I love <em>skateboarding</em>.</p>

Preview

About me

My name is Sam and I love skateboarding.

6. Lists

<ul>
  <li>Football</li>
  <li>Chess</li>
  <li>Drawing</li>
</ul>

Use <ul> for bullet points and <ol> for numbered lists. Each item goes in an <li>.

Mini project: About Me page

Open a text editor (VS Code, Notepad, or TextEdit). Save a new file called about.html and try to build a page with:

  • A heading with your name
  • A paragraph saying one thing you like
  • A bulleted list of 3 hobbies
  • A link to your favourite website

Open the file in a browser to see the result. Every website started like this!