HTML in one sentence
HTML (HyperText Markup Language) is the language you use to tell a browser what each piece of a web page is: this line is the main heading, these lines form a list, this word is a link to another page, this picture shows a red bicycle.
Every web page you have ever opened, from a search engine to a bank's login screen, is built on HTML. Even sites made with big frameworks send HTML to your browser in the end.
Content, appearance and behaviour
A web page is usually made from three languages that each do one job:
| Language | Its job | Example |
|---|---|---|
| HTML | Structure and meaning | "This is a heading" |
| CSS | Appearance | "Headings are dark blue and 32 pixels tall" |
| JavaScript | Behaviour | "When the button is clicked, show the menu" |
A useful way to picture it is a house. HTML is the walls and rooms, CSS is the paint and furniture, and JavaScript is the electricity that makes things switch on. You can live in a house with no paint, and a page with only HTML still works: it simply looks plain.
This course is about HTML only. Pages will look basic for now, and that is fine. Getting the structure right first makes styling much easier later.
What HTML looks like
HTML wraps content in tags: words inside angle brackets. Most tags come in pairs, an opening tag and a closing tag with a slash.
<h1>Morning checklist</h1>
<p>Three things to do before work:</p>
<ul>
<li>Drink water</li>
<li>Check the calendar</li>
<li>Plan the top task</li>
</ul>Read it out loud and it almost makes sense on its own: a level-one heading, a paragraph, then an unordered list with three list items. Press Try it, change "Drink water" to something else, and watch the result update.
Notice that you never told the browser to make the heading big or to put dots in front of the list items. The browser has sensible default styles for each kind of element. Your job in HTML is to say what things are.
What happens when you open a page
When you type an address and press Enter, a few steps happen very quickly:
- Request. Your browser asks a server for the page at that address.
- Response. The server sends back a file of HTML text, the same kind of text you saw above.
- Parsing. The browser reads the HTML from top to bottom and builds a tree in memory, called the DOM (Document Object Model). Each element becomes a node in the tree, and elements inside other elements become their children.
- Fetching extras. When it finds references to images, stylesheets or scripts, it downloads those too.
- Rendering. It works out where everything goes and paints it on the screen.
You do not need to remember these steps word for word. The important idea is that HTML is plain text that the browser turns into a structure. Because it is plain text, you can write it in any text editor, and you can see the HTML of almost any site by right-clicking and choosing View page source.
Browsers forgive mistakes, but you should not rely on that
If you forget to close a tag, the browser usually guesses what you meant and shows something reasonable. This is helpful while learning, but it also hides errors. A page that looks right in one browser can break in another, confuse screen readers used by blind visitors, or behave strangely once CSS is added.
Good habits from day one: close what you open, keep the nesting tidy, and check your work. The free HTML Viewer on this site is a quick place to experiment safely.
Common mistakes
- Thinking HTML controls the look. Making text a heading just because you want it big is a common trap. Choose the element that matches the meaning, then style it with CSS later.
- Calling HTML a programming language. It is a markup language. That is not a lesser skill, it is a different one, and interviewers do notice the difference.
- Copying code without reading it. Type examples yourself at first. Your fingers learn the patterns faster than your eyes.
Exercise
Write a small piece of HTML for a shopping list: a main heading that says Weekend shopping, one paragraph saying where you will shop, and a list of at least four items. Use the editor in the example above, or the HTML Viewer tool.
Show one possible answer
<h1>Weekend shopping</h1>
<p>From the market near the station.</p>
<ul>
<li>Tomatoes</li>
<li>Rice</li>
<li>Coffee</li>
<li>Dish soap</li>
</ul>Your words will differ, and that is fine. Check that every opening tag has a matching closing tag and that each li sits inside the ul.
Key points
- HTML describes what each part of a page is; it does not decide how it looks or behaves.
- CSS handles appearance and JavaScript handles behaviour. All three work together.
- The browser downloads an HTML file, reads it top to bottom and turns it into a tree of elements, which it then draws.
- Browsers are forgiving with mistakes, so a broken page may still appear. Valid HTML is still worth writing.