HTML Reference Sheet

🏗 The Basic Structure

Every HTML file must contain this skeleton. You only type it once, right at the start.

            <!-- Every HTML file starts like this -->

            <!DOCTYPE html>

            <html>

              <head>

                <title>My Page Title</title>

              </head>

              <body>

                <!-- Your content goes here -->

              </body>

            </html>

Remember: The <head> section holds invisible settings (like the page title in the tab). The <body> section holds everything you can actually see on the page. Most tags have an opening tag <p> and a closing tag </p> — notice the slash.

📝 Headings and Paragraphs

These are the most common tags you will use for putting text on a page.

Tag	What it does	How it looks
`<h1>`	Biggest heading – use once per page	Big Heading
`<h2>`	Medium heading	Medium Heading
`<h3>`	Smaller heading	Smaller Heading
`<p>`	A paragraph of text	A paragraph of normal text.
`<strong>`	Makes text bold	Bold text
`<em>`	Makes text italic	Italic text
`<br>`	Moves to the next line (no closing tag)	—

            <h1>Welcome to My Website</h1>

            <p>This is a paragraph. I can make words <strong>bold</strong> or <em>italic</em>.</p>

Remember: Always close your tags. If you open a <p>, you must close it with </p>.

🔗 Links

Use the <a> tag to create a clickable link. The web address goes inside href.

            <a href="https://www.bbc.co.uk">Click here to visit the BBC</a>
        

That code produces this: Click here to visit the BBC

Remember: The web address always goes inside quotes after href=. The words between the tags are what the user sees and clicks on. Always include https:// at the start of the address.

🖼 Images

Use the <img> tag to add a picture. It does not need a closing tag.

Attribute	What it does
`src`	The filename of the image (e.g. `dog.jpg`). The image must be in the same folder as your HTML file.
`alt`	A text description of the image. Always include this – it is important.
`width`	Sets the width in pixels (e.g. `300`). The height adjusts automatically.

📋 Lists

There are two types of list. Both use <li> for each item.

Type	Tag	How it looks
Bullet list (unordered)	`<ul>` + `<li>`	Item one Item two
Numbered list (ordered)	`<ol>` + `<li>`	First item Second item

            <!-- Bullet list -->

            <ul>

              <li>Cats</li>

              <li>Dogs</li>

              <li>Rabbits</li>

            </ul>

            <!-- Numbered list -->

            <ol>

              <li>Wake up</li>

              <li>Get dressed</li>

              <li>Eat breakfast</li>

            </ol>

Remember: <ul> = unordered (bullets) • <ol> = ordered (numbers). Every item inside a list must use <li>.

🎨 Adding Style with CSS

CSS controls how your page looks — colours, sizes, fonts. It goes inside a <style> tag in the <head> section.

            <style>

              body {

                background-color: lightblue;

                font-family: Arial, sans-serif;

              }

              h1 {

                color: darkblue;

                font-size: 36px;

                text-align: center;

              }

              p {

                color: black;

                font-size: 16px;

              }

            </style>

CSS Property	What it changes	Example values
`color`	Text colour	`red` • `blue` • `darkgreen`
`background-color`	Background colour of an element	`yellow` • `lightblue` • `pink`
`font-size`	How big the text is	`14px` • `24px` • `36px`
`font-family`	Which font to use	`Arial` • `Georgia` • `Verdana`
`text-align`	Aligns the text	`left` • `center` • `right`

Remember the pattern: In CSS you write the selector (which tag you are styling), then curly brackets { }, then inside each rule is always: property: value; — do not forget the colon : and the semicolon ; at the end!