If you have ever wondered how a webpage is actually put together, this is the place to start. By the end of this lesson you will know what every HTML tag does, why we use them, and how to build a real working webpage from scratch. We will take it slowly, use plain English, and avoid jargon wherever possible. If you have never written a line of code before, that is fine. We start from zero.

What is HTML, really?

HTML stands for HyperText Markup Language. That is a lot of words thrown together, so let us break them apart one at a time.

The hypertext part just means text that can link to other text. That is the original magic of the web: a sentence in one document can take you to a completely different document somewhere else in the world, with a single click. The markup part means we use little labels (called tags) to describe what each piece of content is — a heading, a paragraph, a list, a picture, and so on. The language part means there are rules the browser understands, just like English or Urdu or Mandarin has rules you follow so others can read what you wrote.

Think of writing HTML like writing a letter. A letter has a greeting, maybe a subject line, several paragraphs, sometimes a list of bullet points, and a sign-off at the end. HTML works the same way: it tells the browser, "this part is the greeting, this part is a paragraph, this part is a list." The browser then renders it as a real webpage.

If HTML is the nouns, CSS is the adjectives, and JavaScript is the verbs — then together you are writing sentences for the web. Each of those three layers deserves its own article, and we cover them in this series.

The anatomy of a tag

Before we go further, let us look at a single HTML tag up close. Every tag in HTML has the same general shape. You open a left-angle bracket, write the tag's name, optionally add some attributes, close the right-angle bracket, then put your content, and finally add a closing tag with a slash before the name.

Here is a picture that shows every piece, labelled:

The <p> on the left is the opening tag. The word p is the tag name — it tells the browser "this is a paragraph." The closing tag on the right, </p>, has the same name but with a forward slash in front. That slash means "we are done with the paragraph now." Anything between the opening and closing tags is the content of that paragraph.

Some tags do not have a closing tag — they do not wrap any content. The image tag, <img>, is one of these. The picture itself is not "inside" the tag; the tag just points to where the picture lives. You will meet those soon.

The eight tags you will use ninety percent of the time

There are about a hundred HTML tags in total, but you can build a beautiful, working webpage using only a handful of them. Let us meet the eight you will reach for again and again. Do not try to memorise them — read them once, then come back whenever you forget.

  • <h1> — the biggest heading. Use it for the title of your page. Most pages only have one.
  • <h2> — a section heading. Use a few of these to break long pages into chapters.
  • <h3> — a sub-heading. Useful when a section has its own little sections inside.
  • <p> — a paragraph of regular text. The most common tag on the web.
  • <a> — a link. The href attribute is where it goes when clicked.
  • <img> — a picture. The src attribute is the URL of the image file.
  • <ul> and <li> — an unordered (bulleted) list, made of list items.
  • <div> — an invisible box that groups other elements together. Think of it as a folder.

That is it. With those eight tags you can build the skeleton of almost any webpage on the internet. The rest of HTML is mostly variations on this theme: ordered lists instead of bulleted, links that open in new tabs, images with captions, and so on. You can always look up the rare ones when you need them. The official reference at MDN's HTML element reference is the best place to find a complete list.

Your first complete webpage

Let us put those tags together and build a real, working webpage. Open any plain-text editor — Notepad on Windows, TextEdit on Mac, or VS Code if you have it. Save the following into a file called index.html, then double-click the file. It will open in your browser.

&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;My first page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, world&lt;/h1&gt;
    &lt;p&gt;This is a paragraph of regular text. The browser will give it a little space above and below.&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;Apples&lt;/li&gt;
      &lt;li&gt;Oranges&lt;/li&gt;
      &lt;li&gt;Mangoes&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a href="https://example.com"&gt;Click me to visit example.com&lt;/a&gt;
  &lt;/body&gt;
&lt;/html&gt;

Notice the structure. There is a <!doctype html> at the top — that is just the browser's way of saying "this is a modern HTML5 document." Then there is an <html> tag that wraps everything. Inside that, we have a <head> section (which holds information about the page, like the title shown in the browser tab) and a <body> section (which holds everything the user actually sees).

That is the whole shape of every HTML file you will ever write: head for metadata, body for content. Once this template clicks, you are halfway there. To learn about adding forms that collect user input, see HTML Forms for Beginners. To learn about styling what you just wrote, jump to CSS for Beginners.

The three layers of a webpage

Now here is something important to understand before we go any further. Every real webpage is built from three different layers, each with its own job. If you only learn one of them, your page will look broken. If you learn all three, you can build anything.

  1. HTML — the bones. It defines what the page means: this is a heading, this is a paragraph, this is a link.
  2. CSS — the skin. It defines what the page looks like: colours, fonts, spacing, layout.
  3. JavaScript — the muscle. It defines what the page does: respond to clicks, fetch data, animate things.

In this article we are only talking about HTML — layer one. Without HTML, CSS has nothing to style and JavaScript has nothing to react to. HTML is the foundation everything else stands on.

Attributes: the extra information tags carry

Remember when we said a tag can have "optional attributes"? Those are little name="value" pairs that go inside the opening tag and give the browser extra information. You have already seen two:

  • href on an <a> tag tells the browser where the link goes.
  • src on an <img> tag tells the browser where the image file lives.
  • alt on an <img> tag tells the browser (and assistive technology) what the picture shows.
  • lang on the <html> tag tells the browser which human language the page is in.

There are many other useful attributes, but those four are the most common. When you see a tag with extra stuff inside the angle brackets, it is just an attribute. Do not be intimidated — they are just labelled settings, the same as the options in any app.

Block elements versus inline elements

Here is a concept that often gets skipped in beginner tutorials but will save you confusion later. HTML elements come in two flavours: block and inline. The difference is how they behave on the page.

A block element starts on a new line and stretches out as wide as its container allows. Headings, paragraphs, lists, and <div>s are all block elements. They behave like bricks — each one stacks on top of the previous one.

An inline element, on the other hand, only takes up as much space as its content needs and sits happily inside a block. A link (<a>), an emphasised word (<em>), and an image (<img>) are all inline. They flow with the surrounding text like drops of colour in a line of prose.

Why does this matter? Because when you later learn CSS, you will be using display: block and display: inline to control how things lay out. Knowing which elements are which by default gives you a head start.

Common mistakes to avoid

Every beginner trips on the same handful of things. Knowing these in advance will save you hours of head-scratching later.

  • Forgetting to close a tag. Always pair <p> with </p>. The browser often tries to guess what you meant, and it usually guesses wrong.
  • Using <br> for spacing. The br tag is for line breaks inside a poem or an address, not for adding vertical space. Use CSS for spacing.
  • Nesting block elements inside paragraphs. A paragraph cannot contain another paragraph, a heading, or a list. Keep paragraphs for text only.
  • Capitalising tag names. Use lowercase everywhere: <h1>, not <H1>. It is not strictly broken, but it is the universal convention.
  • Missing the alt attribute on images. The alt text describes the picture for people who cannot see it (and for search engines). Always include it.
  • Putting a <div> around everything. Only wrap things in a <div> when you actually need to group them for styling or layout. Too many wrappers make the HTML noisy.

If you have already made some of these mistakes, congratulations — you are a real beginner, which is the best possible place to be.

Going one step further: nesting elements

Here is something that often confuses people at first but becomes second nature after a week. HTML tags can go inside other tags. We call this nesting. When you nest, the inner tag must close before the outer tag closes — like Russian dolls, you take them apart from the inside out.

Here is a perfectly valid nested example:

&lt;p&gt;
  Mangoes are delicious. Read more on
  &lt;a href="https://en.wikipedia.org/wiki/Mango"&gt;Wikipedia&lt;/a&gt;.
&lt;/p&gt;

The <a> tag is inside the <p> tag. The </a> closes first, then the </p> closes. If you swap the order and close </p> first, the browser will get confused. So: inner before outer, always.

You can nest several levels deep. For instance, a list inside a list inside a navigation block is perfectly fine. Just remember the rule: open outer, open inner, close inner, close outer. Like brackets in maths, basically. The moment this rule becomes automatic, you will find that HTML feels much less mysterious.

One last thing before we wrap up. Do not worry about memorising everything in this article. The point is to understand the shape of HTML: tags have names, tags have attributes, tags can wrap content, and tags can nest. With just those four ideas in your head, you can read any HTML file on the web and figure out what it is doing. Coding is always like this — once you know the grammar, you can always look up the vocabulary. The MDN introduction to HTML is the next place to look when you are ready for more depth.

Further reading

For the foundational HTML knowledge this article builds on, we point readers to the docs that the Mangobaz team reaches for first. MDN is the de-facto reference for web platform APIs; the WHATWG living standard is the specification HTML itself.

  • MDN HTML element reference — the canonical reference for every HTML element, its attributes, and which elements are still recommended in modern markup.
  • HTML living standard (WHATWG) — the authoritative specification for HTML, maintained by the WHATWG and updated as the language evolves.
  • MDN Learn HTML — MDN’s structured learning path that takes a beginner from first principles to semantic, accessible markup.

FAQ

Here are the questions I get most often when teaching HTML for the first time.

Do I need any special software to write HTML?

No. Any plain-text editor works — Notepad on Windows, TextEdit on Mac in plain-text mode, or VS Code if you want colour highlighting and helpful autocomplete. Avoid word processors like Microsoft Word; they save files in formats full of invisible characters that will confuse your browser.

Is HTML a programming language?

Strictly speaking, no. HTML is a markup language — it describes the structure of content, it does not run logic. The programming language of the web is JavaScript. People often call HTML "code" in casual conversation, which is fine, but it is worth knowing the distinction.

What is the difference between HTML and HTML5?

HTML5 is the current version of HTML. It introduced many new tags (<video>, <canvas>, semantic tags like <article> and <nav>) and removed a lot of older cruft. When people say "HTML" today they almost always mean HTML5.

Do I have to memorise every HTML tag?

No. Nobody does. Even experienced developers look things up. The eight tags in this article cover most of what you need day-to-day. The rest you can find on the MDN element reference whenever you need them.

Why do some tags not need closing tags?

Tags like <img> and <br> are called void elements. They do not wrap any content, so there is nothing to close. They are written as a single tag with no slash. Modern HTML5 does not require the old <br /> syntax.

What should I learn after HTML?

CSS — so you can make your pages look good. Then JavaScript — so you can make them react to clicks and load data from servers. We have articles for each, linked throughout this page.

Homework

Time to put this into practice. Build a tiny page about your favourite animal — or your favourite food, or your favourite place, anything you actually like talking about.

Your page must include all of the following:

  • One <h1> with the title.
  • Two <p> paragraphs of real text (do not write lorem ipsum — write what you actually think).
  • One bulleted list (<ul> with three <li> items) listing three facts.
  • One link (<a>) pointing to a relevant Wikipedia article. Use a real href.
  • One image (<img>) with both src and alt attributes.

Save the file as favourite.html and open it in your browser. Once you are happy with it, you are ready for the next lesson, where we add colour, fonts, and layout with CSS. If you get stuck, remember: the browser is your friend. Right-click anywhere on your page, choose "View Source", and you will see the HTML the browser is reading. That is a great way to learn by example.