What is HTML
HTML (HyperText Markup Language) is a markup language that describes the content of a web page: where the heading is, where a paragraph is, where a link goes. It is not a programming language: there are no calculations, only a description of structure. The browser reads the markup and draws the page. Under every example in this tutorial you see the result right away — change the code and watch what happens.
Tags
Markup consists of tags — names in angle brackets. Most tags come in pairs: an opening tag, the content and a closing tag with a slash:
<p>This is a paragraph of text.</p>The <p> tag stands for paragraph. The tags themselves are not visible on the page — only the text is left in the preview.
Elements
An opening tag, its content and a closing tag together are called an element. Elements follow one another from top to bottom:
<h1>My site</h1>
<p>Welcome!</p>
<p>Here I write about travelling.</p><h1> is the main heading of the page. The browser picked a large bold font for it on its own and separated the paragraphs with spacing.
Nesting
An element can sit inside another one. The inner element is called a child, the outer one a parent. They are closed in reverse order: the inner one first, then the outer one:
<p>This is <strong>very</strong> important.</p><strong> marks important words — the browser shows them in bold. Nested elements are usually indented so the structure can be read at a glance.
Void tags
Some elements need no content and have no closing tag. For example, <br> breaks a line and <hr> draws a horizontal line:
<p>First line<br>Second line</p>
<hr>
<p>Text after the line.</p>Such tags are called void or empty. Writing a slash at the end (<br />) is optional.
Comments
Text between <!-- and --> is a comment. The browser does not show it — it is meant for people who read the code:
<!-- Site header -->
<h1>My site</h1>
<!-- <p>This paragraph is hidden for now</p> -->A comment is a handy way to temporarily "switch off" part of the markup without deleting it.
Common mistake
An unclosed tag spreads to everything after it. Here <strong> was never closed, so all the text to the end became bold:
<p>This is <strong>important.</p>
<p>And this is regular text — but it is bold as well.</p>The browser does not report HTML errors — it tries to guess and fix them. So it is up to you to make sure every paired tag has a closing one.