Skip to content
skillbld
HTML & CSS · 14-day planAll days
Day 1 of 14 20 min

Find out what HTML and CSS do and how a browser turns text into a page. Write your first tags, learn how elements nest, and build the basic skeleton that every web page shares, all in a live editor that updates as you type.

By the end of today you can

  • Explain what HTML, CSS and JavaScript each do
  • Write elements with opening and closing tags
  • Nest elements correctly
  • Build the skeleton of a page with doctype, html, head and body
  • Add a page title and a comment

Every website you've ever visited, from a news site to an online shop, is built from three languages. Today you'll write the first one, HTML, and see your page appear instantly.

Mind map · click a dot to fold, drag to pan

HTML, CSS and JavaScript

Sketch
The three languages of the web, shown as building a house. HTML is the structure, like walls and rooms: headings, paragraphs, images and links. CSS is the decoration, like paint and furniture: colours, fonts, spacing and layout. JavaScript is the behaviour, like electricity: clicks, menus and things that change. This course covers HTML and CSS.
  • HTML (HyperText Markup Language) says what things are: this is a heading, this is a paragraph, this is a link.
  • CSS (Cascading Style Sheets) says how they look: colours, fonts, spacing, layout.
  • JavaScript makes pages do things. That's a course of its own, for later.

Your first HTML

Below is a live editor. Change the text, for example put your name in the heading, and watch the preview update:

index.html · edit it, the preview updates
Page preview

You just wrote three elements: one heading (h1) and two paragraphs (p).

Anatomy of an element

Sketch
The parts of an HTML element, using <p>Hello!</p>. The opening tag <p> starts it, with the element's name between angle brackets. Hello! is the content. The closing tag </p> ends it and has a slash before the name. Together they make one element: a paragraph.
  • The opening tag <p> says "a paragraph starts here".
  • The closing tag </p> has a slash and says "it ends here".
  • Everything between them is the content.

Some elements have no content, so they have no closing tag. <br> makes a line break:

index.html · edit it, the preview updates
Page preview

(To show a < on the page itself, write &lt;, because a real < would start a tag.)

Elements inside elements

Elements can contain other elements, like boxes inside boxes. <strong> makes text important (bold) and <em> adds emphasis (italic):

index.html · edit it, the preview updates
Page preview

Close the inner element first. <p><strong>Hi</strong></p> is right; <p><strong>Hi</p></strong> is wrong, like closing the outer box with the inner one still open.

The skeleton of every page

Real pages follow the same skeleton. Try changing the title: in a real browser it appears in the tab.

index.html · edit it, the preview updates
Page preview
Sketch
The skeleton of an HTML page as nested boxes. <!DOCTYPE html> comes first and tells the browser it's a modern HTML page. The <html> element wraps everything. Inside it, <head> holds information about the page: the character set and the <title> shown in the browser tab. <body> holds everything you see: headings, paragraphs, images and more.
PartJob
<!DOCTYPE html>"This is a modern HTML page"
<html lang="en">Wraps everything; lang says the page is in English
<head>Information about the page: title, character set, links to CSS
<meta charset="utf-8">Lets the page show any character: é, ü, 日本, 😀
<title>The text in the browser tab and in search results
<body>Everything you see on the page
<!-- … -->A comment: a note for humans, ignored by the browser

The indentation (spaces at the start of lines) doesn't change anything for the browser. It's there so people can see what's inside what.

Making a page on your computer

You don't need any special software:

  1. Open a text editor (VS Code is free and popular).
  2. Paste in the skeleton above and save it as index.html.
  3. Double-click the file: it opens in your browser.
  4. Edit, save and refresh the browser to see changes.

Recap

  • HTML = structure, CSS = style, JavaScript = behaviour.
  • An element = opening tag + content + closing tag: <p>Hello</p>. Some, like <br>, have no closing tag.
  • Elements nest: close the inner one first.
  • Every page: <!DOCTYPE html>, <html>, <head> (with <title>), <body>.

Tomorrow: headings, paragraphs and lists, and why the meaning of text matters.

Knowledge check

Test what you learned

5 questions · pick an answer to see if you're right

0/5
  1. 1

    What is HTML's job on a web page?

  2. 2

    Which is a correctly written paragraph element?

  3. 3

    Which nesting is correct?

  4. 4

    Where does the <title> element go, and where does it show?

  5. 5

    What does <!-- like this --> do?

Finished day 1?

Mark complete and continue to Day 2: Text & Lists

Was this lesson helpful?

Need a breather? Take a two-minute break

Day 2 Text & Lists

Keep going