HTML basics · 1 / 8
lesson 1

What HTML is

A way of labelling text so the browser knows what each piece is — not a programming language, and not a design tool either.

~ 8 min read·lesson 1 of 8
0 / 8

You opened a web page, right-clicked, and picked "View Page Source". A wall of angle brackets stared back. None of it looked like the page you were just reading. That wall is HTML, and the goal of this lesson is to make it stop looking like a wall.

Here is the smallest useful idea to start with: HTML is a way of putting little labels around bits of text, so the browser knows what each bit is. The labels are written with < and > symbols, and they are called tags — think of them as sticky notes you wrap around a piece of content.

Labels, not instructions

Most languages you may have heard of — Python, JavaScript, C — are programming languages. You write a list of instructions ("add these two numbers", "loop ten times"), and the computer follows them in order. HTML is not like that.

HTML is a markup language. The word "markup" comes from print editors who would scribble notes on a manuscript: "this is a chapter title", "this is a footnote". The notes did not do anything — they just told the next person what each piece of text was supposed to be. HTML works the same way. You wrap a label around some content, and the browser figures out the rest.

hello.html
<h1>Welcome</h1>
<p>This is a paragraph of text.</p>
<a href="/about">About this site</a>

Three labels, three jobs. <h1> says "this is a top-level heading" — the most important title on the page. <p> says "this is a paragraph". <a> says "this is a link" (the a is short for anchor), and the href part points at where it goes.

Notice what is not in there. Nothing tells the browser that the heading should be big and bold, or that the link should be blue. The browser already has its own default rules for those things. Your job in HTML is just to say what each chunk is. How it looks comes later.

That gap between what something is and how it looks is the whole point of HTML. A screen reader for a blind user does not care what colour the link is — it cares that it is a link, so it can announce "link: about this site". A search engine indexing your page does not care about your fonts — it cares which text is the heading. Get the labels right and every tool that reads your page can do its job.

check your understanding
You write <h1>Pricing</h1>. Which statement is most accurate?

A browser that bends over backwards

If you make a typo in JavaScript or Python, you get an error and nothing runs. HTML is not like that either. If you forget to close a tag, mistype an attribute, or put things in the wrong order, the browser shrugs and shows the page anyway.

This is not the browser being sloppy. The HTML standard explicitly tells browsers how to recover from broken markup. Missing closing tags get patched in. Stray text gets dropped into the body. A misplaced element gets relocated to where it belongs. Two different browsers reading the same broken page will end up with the same cleaned-up version.

The reason for this rule is the web's age. Pages written by hand in 1995 still need to load today. If browsers refused to render anything imperfect, half the internet would go dark overnight. So instead, browsers became forgiving renderers — they take whatever you give them and do their best.

Think of it like a friendly librarian. You hand them a stack of pages out of order with a few missing — they will still figure out roughly what the book is about and shelve it for you. That is convenient, but it also means you cannot trust "it looks right" as proof that your HTML is right. The librarian quietly fixed three things and never told you.

Tip

When something on your page behaves oddly, run your file through an HTML validator (your editor probably has one built in). The browser will not complain — but the validator will list every silent fix it would have made.

check your understanding
You forgot to close a <p> tag, then opened a new <p> right after. What does the browser do?

HTML, CSS, JavaScript

A modern web page is three small languages doing three different jobs. You will hear them mentioned together everywhere, so it helps to keep their roles clear from day one.

  • HTML says what is on the page — headings, paragraphs, lists, images, forms.
  • CSS says how it looks — colours, sizes, spacing, layout, typography. ("CSS" stands for Cascading Style Sheets, but for now just think "the look".)
  • JavaScript says how it behaves — what happens when you click a button, type into a search box, or drag a slider.

A pizza is a useful picture here. HTML is the dough — without it, there is nothing to put anything on. CSS is the toppings and presentation. JavaScript is the oven that changes the pizza after it is built (warming it up, melting the cheese). The analogy stops there because, unlike a pizza, you eat the page in any order: HTML arrives first and works on its own.

That last part matters. A page written in only HTML, with no CSS and no JavaScript, still works. It will look plain, but every link will navigate, every form will submit, every screen reader will read it. Add CSS and it becomes pleasant. Add JavaScript and it becomes interactive. But the HTML is the floor — if it is broken, no amount of CSS or JS can fix the experience for someone on a slow phone or a screen reader.

check your understanding
A user opens your site on a flaky connection. The HTML loads, but the JavaScript file is still downloading. What should they see?
check your understanding
Which sentence captures the relationship between HTML and the browser most accurately?
next lesson →
KeepLearningcertificate
for completing
HTML basics
0 of 8 read