Free HTML Course for Beginners: Build Your First Web Page

1. What is HTML? (start here)

The language every web page is built from.

Every web page you have ever opened (a news site, a game, a chat app) is built from three ingredients:

• HTML is the content and the structure: what is on the page (headings, text, images, buttons).
• CSS is the look: colours, fonts, spacing.
• JavaScript is the behaviour: what happens when you click or type.

This course teaches all three. We start with HTML because the other two are attached to it.

HTML stands for HyperText Markup Language. Split that into two ideas. Hypertext is text that can link to other text, like the links you click every day. Markup means you take plain text and add labels around the parts to say what each part is.

Think of a school essay. You decide one line is "the title", another is "a normal paragraph", another is "a list". A word processor shows the title big and bold because you marked it as a title. HTML works the same way, except you write the labels yourself, as text.

<h1>My first page</h1>
<p>HTML labels each part of the page.</p>

Two labels. h1 means "main heading" and p means "paragraph".

HTML is not a programming language. It has no maths, no decisions and no loops. It only describes what a page contains. That makes it the friendliest place to start: you cannot really break anything, and you see the result immediately.

What you need

Nothing to install. Your browser already reads HTML and draws it. In this club the Playground does the same: you type HTML, press Run, and the page appears next to it.

2. How a page reaches your screen

What the browser does with the text you write.

When you type an address like codelyteam.com, your browser asks a server (a computer on the internet) for a file. The server sends back text, mostly HTML. The browser reads that text from top to bottom, works out what each label means, and paints the result on your screen. This reading-and-drawing step is called rendering.

An HTML file is just a text file. If its name ends in .html, a browser knows to treat it as a web page. You could write one in Notepad, save it, and double-click it.

The browser is forgiving

If you forget something, the browser guesses what you meant and carries on. That is friendly, but it hides mistakes: your page might look fine today and break in another browser tomorrow. Good habits (closing every tag, indenting nested things) keep your pages reliable.

Why this matters for you

• You write text. The browser turns it into a page.
• Order matters: the browser reads top to bottom, so elements appear on the page in the order you write them.
• Whitespace is mostly ignored. Pressing Enter three times in your HTML does not make three blank lines on the page. You will see why in the Paragraphs lesson.

<p>Hello world</p>

<p>Hello
        world</p>

Both of these look identical on the page

3. The skeleton of a full page

Every complete HTML page has the same outer shape.

You will often see a full HTML document start with the same few lines. Here is the whole skeleton, then we go through it piece by piece.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello!</h1>
    <p>This is what people see.</p>
  </body>
</html>

A complete, minimal web page

• <!DOCTYPE html> tells the browser "this is modern HTML". It always goes first.
• <html lang="en"> wraps the entire page. lang="en" says the page is in English, which helps screen readers and translation tools.
• <head> holds information about the page that is not drawn inside it: the title shown on the browser tab, the character set, links to CSS files.
• <meta charset="UTF-8" /> makes sure letters like é, ñ or emoji show up correctly.
• <title> is the text on the browser tab and in search results.
• <body> holds everything people actually see: headings, paragraphs, images, buttons.

The two big halves are easy to remember: head = information about the page, body = the page itself.

4. Elements, tags and attributes

The three words you will use every single day.

An HTML page is made of elements. An element is one labelled piece of the page. Most elements have three parts:

<p>Hello, club!</p>
 ^   ^^^^^^^^^^^^  ^^
 |   the content   closing tag
 opening tag

Anatomy of an element

• The opening tag <p> says "a paragraph starts here".
• The content is what sits between the tags: Hello, club!.
• The closing tag </p> says "the paragraph ends here". It looks like the opening tag with a slash / added.

The whole thing, tags plus content, is called an element. People often say "tag" when they mean "element". That is fine in everyday talk.

Nesting

Elements can sit inside other elements. This is called nesting, like boxes inside boxes. The rule: the element you open last must be closed first.

<section>
  <ul>
    <li>Inside the list</li>
  </ul>
</section>

A list nested inside a section, with an item inside the list

The indentation (spaces at the start of a line) is not required, but it makes the nesting easy to see. Always indent children by two spaces.

Attributes

Many elements accept extra settings called attributes. They go inside the opening tag, written as name="value".

<a href="https://example.com">Visit example</a>

The href attribute tells the link where to go

Here a is the element, href is the attribute name, and "https://example.com" is its value. Attributes never go in the closing tag.

Empty elements

A few elements have no content, so they have no closing tag. <img> (a picture) and <br> (a line break) are examples. You will meet them soon.

Your first step

Type any text inside a <p> element and run it. That is a real, working web page.

5. Headings

Titles and sub-titles, from big to small.

Headings label the titles on a page. There are six levels, from <h1> (the most important) down to <h6> (the least important).

<h1>My Recipe Blog</h1>
<h2>Pancakes</h2>
<h3>Ingredients</h3>

Three levels of heading

Think of a book. h1 is the book title. h2 is a chapter title. h3 is a section inside that chapter. The numbers show the outline of your page.

Rules of thumb

• Use one <h1> per page, for the main title.
• Use <h2> for the big sections, <h3> for parts of those sections, and so on.
• Do not skip levels (an h2 followed directly by an h4).

Why not just make text big?

Headings are not for making text large. Browsers show them large by default, but their real job is meaning. Search engines read headings to understand your page. Screen readers let blind users jump from heading to heading, like a table of contents. If you want big text for decoration, you will use CSS later.

6. Paragraphs and line breaks

The normal way to write running text.

The <p> element holds a paragraph of text. Browsers add a little space above and below each paragraph, so two <p> elements look like two separate paragraphs.

<p>HTML is the skeleton of every web page.</p>
<p>Each paragraph is its own element.</p>

Two paragraphs

Spaces and Enter are ignored

In the lesson "How a page reaches your screen" you saw that extra spaces and blank lines collapse. If you type your paragraph over three lines, the browser shows it on one flowing line and wraps it to fit the window.

<p>Roses are red,
Violets are blue.</p>

This is still ONE line of text on the page

Forcing a line break

To start a new line inside a paragraph, use <br>. It is an empty element (no closing tag).

<p>Roses are red,<br>
Violets are blue.</p>

A poem with real line breaks

A horizontal rule

<hr> draws a thin line across the page to separate topics. Like br, it has no closing tag.

7. Lists

Bullet points and numbered steps.

Lists are everywhere: shopping lists, menus, steps. HTML has two main kinds:

• <ul> is an unordered list (bullet points).
• <ol> is an ordered list (numbers).

Both work the same way: the list element wraps everything, and each item inside is an <li> ("list item").

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

A bullet list

<ol>
  <li>Open the editor</li>
  <li>Write some HTML</li>
  <li>Press Run</li>
</ol>

A numbered list. The browser does the counting for you

Rules

• Only <li> elements go directly inside a <ul> or <ol>.
• An <li> can contain anything: text, a link, even another list.
• Use <ol> when order matters (steps) and <ul> when it does not (a collection).

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

A list nested inside a list item

8. Links

The "hyper" in HyperText.

Links are what make the web a web. The <a> element (the "anchor") makes a link. It needs an attribute called href ("hypertext reference") that holds the address to go to. The text between the tags is what people click.

<a href="https://example.com">Visit example</a>

A link to another website

Two kinds of address

• Absolute: the full address, including https://. Use it to link to other websites: https://example.com/page.
• Relative: just a file name or path on your own site, like about.html. Use it to link between pages of the same website.

<a href="about.html">About us</a>

A link to another page on your own site

Opening in a new tab

Add target="_blank" to open the link in a new browser tab. When you do, also add rel="noopener noreferrer", a safety setting that stops the new page from controlling yours.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in new tab</a>

A link that opens in a new tab, safely

Good link text

Write link text that makes sense on its own. "Read the Git guide" is better than "click here". Screen reader users often scan a list of links, and "click here" repeated ten times tells them nothing.

9. Images

Showing pictures, and describing them.

The <img> element shows a picture. It is an empty element: no content, no closing tag. Everything it needs comes from attributes.

<img src="photo.jpg" alt="A sunset over the sea">

An image with its two most important attributes

• src ("source") is the address of the image file. Like links, it can be a full web address or a path to a file on your site.
• alt ("alternative text") is a short description of the picture.

Why alt text matters

The alt text is used when the picture cannot be seen: if the file fails to load, if a blind person uses a screen reader, or if a search engine is trying to understand your page. A good alt text describes what the image shows or what it is for, in a short sentence.

• Good: alt="A golden retriever catching a frisbee"
• Weak: alt="image" or alt="photo123"
• If a picture is purely decoration, use an empty alt (alt="") so screen readers skip it.

Size

You can set width and height in pixels. If you set only one, the other adjusts to keep the picture in proportion.

<img src="photo.jpg" alt="A sunset over the sea" width="200">

A picture 200 pixels wide

10. Emphasis: strong and em

Showing which words matter.

Sometimes a few words inside a sentence need to stand out. HTML has two elements for that:

• <strong> means this is important. Browsers show it in bold.
• <em> means stress this word (like when you say it louder). Browsers show it in italics.

<p>Water is <strong>essential</strong>. Drink it <em>daily</em>.</p>

Strong for importance, em for stress

Inline vs block

Notice that strong and em sit inside a paragraph and do not start a new line. Elements like this are called inline elements: they flow along with the text. Elements like p, h1 and ul are block elements: each one takes its own row. You will use this idea again in CSS.

Bold and italic without meaning

<b> and <i> also make text bold and italic, but without saying the text is important. They are for things like product names or foreign words. If in doubt, use strong and em, because they carry meaning.

11. Buttons

A control people can click.

A <button> is a clickable control. In its simplest form it only needs some text:

<button>Save</button>

A button

If you click it right now, nothing happens. Buttons become useful when you connect them to JavaScript, which listens for the click and then runs your code. That is exactly what you will learn in the JavaScript course.

Where buttons are used

• Inside forms, to send what the user typed.
• On their own, to trigger actions: open a menu, like a post, start a game.

<button type="button">Like</button>

A button with a type

The type="button" attribute says "this button only clicks; it does not submit a form". It is a good habit to always write it for buttons outside forms.

Button or link?

Use a link (<a>) to go somewhere. Use a button to do something on the current page. Mixing them up is confusing for keyboard and screen reader users.

12. Sections and page layout

Grouping content into meaningful blocks.

As pages grow, you need to group related content. HTML has elements that describe the role of each part of the page. These are called semantic elements, meaning "elements with meaning".

<section>
  <h2>About</h2>
  <p>We build things for the web.</p>
</section>

A section with a heading and a paragraph

The common layout elements

• <header>: the top of a page or section (logo, title, navigation).
• <nav>: a group of navigation links.
• <main>: the main content of the page. Use it once.
• <section>: a themed group of content, usually with its own heading.
• <article>: a self-contained piece, like a blog post or a news story.
• <footer>: the bottom of a page or section (copyright, contact links).

<header>
  <h1>My Site</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  </nav>
</header>
<main>
  <article>
    <h2>First post</h2>
    <p>Hello, world.</p>
  </article>
</main>
<footer>
  <p>Made by me</p>
</footer>

A small page layout

Why not just use divs?

There is also a plain grouping element, <div>, that has no meaning. It is fine when you only need a box for styling. But when a meaningful element exists, use it: screen readers, search engines and other developers understand your page better.

13. Forms and inputs

Letting people type things in.

A form collects information from people: a username, a message, a choice. The pieces are:

• <form> wraps the whole thing.
• <label> is the visible name of a field.
• <input> is a field to type into (empty element).
• <textarea> is a bigger box for longer text.
• <button> sends the form.

<form>
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Sam">

  <label for="email">Email</label>
  <input id="email" type="email">

  <button type="submit">Join</button>
</form>

A tiny sign-up form

The type attribute

The type of an <input> decides what it is: text, email, password, number, checkbox, radio, date and more. Browsers give each type helpful behaviour, like the right keyboard on a phone or a built-in check that an email looks like an email.

Labels

<label for="name"> is tied to the input whose id is "name". Clicking the label focuses the field, and screen readers read the label out. Always give every input a label.

Useful attributes

• placeholder: faint hint text inside an empty field.
• required: the browser refuses to send the form while it is empty.
• name: the name the data is sent under.

14. Tables

Rows and columns of data.

A table shows data in rows and columns, like a timetable or a score board. Use tables for data, not for page layout.

<table>
  <thead>
    <tr>
      <th>Language</th>
      <th>Used for</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Structure</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Style</td>
    </tr>
  </tbody>
</table>

A small table

• <table> wraps everything.
• <tr> is a table row.
• <th> is a header cell (bold and centred by default).
• <td> is a normal data cell.
• <thead> and <tbody> group the header rows and the body rows.

Every row should have the same number of cells. Read a table one row at a time, left to right.

15. Comments, div, span and other helpers

Small tools you will use all the time.

Comments

A comment is a note for humans that the browser ignores. It starts with <!-- and ends with -->.

<!-- This is a note to myself -->
<p>Visible text</p>

Comments never show on the page

Comments are great for explaining tricky parts, or for temporarily switching off some code without deleting it.

div and span

• <div> is a block-level box with no meaning. It starts on a new line.
• <span> is an inline wrapper with no meaning. It stays inside a line of text.

Neither does anything visible by itself. They are handles for CSS: you wrap something in a div or span, give it a class, and style it.

<p>I really <span class="highlight">love</span> HTML.</p>

span lets you style just one word later with CSS

class and id

Any element can have two special attributes:

• class="name" can be shared by many elements. CSS uses it to style groups of things.
• id="name" must be unique on the page. It names one specific element.

Special characters

Some characters mean something to HTML, like <. To show them, use a code starting with & and ending with ;:

• < shows <
• > shows >
• & shows &
• © shows ©

16. When something looks wrong

A checklist for fixing your HTML.

Your first pages will not always look right. That is normal for everyone, forever. Here is a short checklist that fixes most problems.

• Missing closing tag. Look for an opening tag with no partner. Everything after it may look strange or all be bold or all be a link.
• Tags closed in the wrong order. Close the last-opened element first.
• Typos in tag names. <hl> (lowercase L) is not <h1>.
• Missing quotes on an attribute. Write href="page.html", with both quotes.
• Text outside body. Content must be inside <body>.
• Wrong path. If an image does not show, the src path probably points to the wrong file name or folder.

A method that always works

1. Make the page small again. Delete or comment out half the code.
2. Does the problem still exist? Then the bug is in the half that is left. If not, it is in the half you removed.
3. Repeat until you find the single line.

Where to go next

You now know the building blocks of HTML. The next course is CSS: it turns plain pages into designed ones. After that, JavaScript adds behaviour.