Lesson 1 of 20

HTML Introduction

What HTML Actually Is

HTML stands for HyperText Markup Language. Pull the three words apart and you already know most of what it does. HyperText is text that can link to other text — you click a word on one page and land on a different document, possibly stored on a computer in another country. Markup means you do not just type plain text and hope; you wrap each piece of it in labels that say what that piece is. Language means there are fixed rules, and every browser has agreed to follow them.

The single most important thing to be clear about on day one is that HTML is not a programming language. It has no variables, no if statements, no loops, and it cannot add two numbers together. It does exactly one job: it describes the structure and the meaning of a document. A heading is labelled as a heading, a paragraph as a paragraph, a list as a list. That sounds modest. It is also the foundation that every website you have ever used is built on.

Why does describing structure matter so much? Because your browser is not the only thing that reads your page. A screen reader, used by a student who cannot see the screen, reads the markup aloud and uses it to let that student jump from heading to heading. A search engine crawler reads it to work out what your page is about. A phone uses it to reflow your content onto a narrow screen. None of those can see your design. All of them can read your markup. When you correctly label a heading as a heading instead of just making some text big and bold, every one of them understands you.

HTML was invented by Tim Berners-Lee in 1991 so that researchers could link documents to one another. The version everyone writes today is HTML5, which is maintained as a "living standard" — it keeps gaining small features rather than jumping to a version 6. The good news for you is that almost everything in this course has been stable for more than a decade and will still work in the next one.

  • HyperText — text that links to other documents, which is what turns a pile of pages into a web
  • Markup — labels, called tags, wrapped around content to declare what that content is
  • Language — an agreed set of rules that every browser on every device follows
  • Not a programming language — no logic, no calculations, no decisions, no data storage
  • Read by more than browsers — screen readers, search crawlers and AI assistants all consume the same markup you write

How a Browser Turns Your File Into a Page

An HTML file is ordinary text. You could open it in Notepad and read every character. When a browser loads it, the browser reads that text from top to bottom and builds an internal tree of objects out of it, called the DOM (Document Object Model). Your <body> becomes a node in that tree, an <h1> written inside the body becomes a child of it, and the words inside the heading become a child of that. Only once the whole tree exists does the browser work out how big everything is and paint it on screen.

That tree is the reason nesting has to be done properly. An element that opens inside another element must also close inside it. Write <p><strong>Hello</p></strong> and you have described a shape that cannot exist as a tree, because the strong element would have to be both inside and outside the paragraph at once. Browsers will not crash — they will quietly guess what you meant. That forgiveness is a trap, because the shape the browser guesses is often not the shape you wanted, and your CSS then styles something you did not expect.

Two browser tools show you these two different things, and beginners mix them up constantly. View Page Source shows the raw HTML text the server sent — exactly what you typed. Inspect (or Developer Tools) shows the live DOM tree as it exists right now, including any tags the browser silently added to fix your mistakes and anything JavaScript has changed since the page loaded. If Inspect shows an element you never wrote, that is the browser correcting your markup, and it is worth finding out why.

Notes
  • Open any website you like, press Ctrl+U (Cmd+Option+U on a Mac) and read the source. It will look overwhelming, and that is fine — the point is to notice that every site you use is made of the same tags you are about to learn.

Your First Page, Read Line by Line

Below is a complete, valid HTML page. Every website in the world starts from this shape, and the next lesson takes it apart in detail. For now, read it as a sentence: this is an HTML5 document, written in English, whose tab is titled "My First Page", and whose visible content is one big heading and one paragraph.

Notice the pattern that repeats. Nearly every tag comes in a pair: <h1> opens the heading and </h1> closes it, with the content sandwiched between. The forward slash is what makes a tag a closing tag. Notice too that the tags themselves never appear on the finished page — they are instructions to the browser, not content for the reader.

One line is not a tag at all. <!DOCTYPE html> is a declaration that must sit at the very top of the file, and it tells the browser to render the page using modern standards. Leave it out and browsers fall back to an ancient compatibility mode called quirks mode, where several CSS rules behave differently. It is one line, it never changes, and forgetting it causes layout bugs that are genuinely hard to diagnose.

Example 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is the first page I have written by hand.</p>
</body>
</html>

Three Languages, Three Different Jobs

A modern web page is built from three languages, and confusing their roles is the commonest cause of messy beginner code. The useful way to remember the split is that HTML is the structure, CSS is the presentation, and JavaScript is the behaviour.

Think of a college notice board. HTML is the notice itself and the way its information is organised: a title, a date, three bullet points. CSS decides the colour of the paper, the size of the letters and where on the board it hangs. JavaScript is what happens when someone interacts with it — a form that checks your entry before you submit, a menu that slides open on a phone.

Keeping the three separate is not a style preference; it saves you real work. When your colours live in a CSS file rather than being repeated inside a hundred tags, changing your site's colour scheme is one edit instead of a hundred. When your structure is clean HTML, a screen reader can still understand the page even though it ignores your CSS entirely.

  • HTML — what the content is: this is a heading, this is a list, this is a form field
  • CSS — what it looks like: colours, spacing, fonts, layout, how it adapts to a small screen
  • JavaScript — what it does: reacting to clicks, validating input, loading data without a page reload

What HTML Cannot Do

Knowing the boundaries early saves you from a lot of confused searching. HTML cannot store data. It cannot make a decision, so there is no way to write "if the user is logged in, show this" in HTML alone. It cannot talk to a database, send an email, or perform a calculation.

HTML also cannot keep anything secret or safe. Everything in your HTML file is downloaded to the visitor's computer, which means anyone can read all of it, and anyone can change their local copy before sending it back to you. This has a consequence you will meet again in the forms lessons: a rule you write in HTML, such as "this field is required", improves the experience for honest users but stops nobody who is determined. Real checking has to happen on the server.

Finally, HTML does not give you pixel-level control of appearance, and it is not supposed to. Two browsers will render the same heading at slightly different default sizes. The moment you find yourself trying to force an exact look using HTML alone, stop — that is CSS's job, and reaching for HTML instead is how people end up with pages full of stray <br> tags and tables used as scaffolding.

Notes
  • You may still see <center>, <font> and <big> in old tutorials and old code. These are obsolete presentational tags, removed from the HTML standard years ago. Recognise them so you can replace them with CSS, but never write new ones.

Writing and Running Your First File

You need no software beyond what is already on your machine. Open any plain text editor, type the page shown above, and save it with a name ending in .html — for example index.html. Then double-click the saved file, and your browser will open it. There is no build step, no compiler and no server involved; the browser reads the file straight from your disk.

Two small traps catch almost everyone on this first attempt. On Windows, Notepad may save your file as index.html.txt if you leave the "Save as type" box on Text Documents, and a .txt file opens as raw text instead of a web page. And if you edit the file while it is already open in the browser, nothing changes until you save the file and refresh the tab. Once you are past your first few pages, install a proper editor such as VS Code, which colours your tags and closes them for you.

Write Your First Page
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is the first page I have written by hand.</p>
  <p>Change the words above, run it again, and watch the page update.</p>
</body>
</html>
CSS 
body {
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.6;
  padding: 24px;
}
Notes
  • Name your site's main page index.html. Web servers look for that exact filename when someone visits a folder, which is why example.com/about/ can quietly serve about/index.html without the visitor typing the file name.
Ask AI