The basic building blocks of HTML
HTML tags are the labels that tell the browser how to structure and display content. This tutorial walks through what tags are, how they work, and the ones you will use most often.
What are HTML tags?
Tags define elements on a web page. Most come in pairs: an opening tag and a closing tag. For example, <p> opens a paragraph and </p> closes it.
The structure of a tag
Tags sit inside angle brackets <>. A closing tag adds a forward slash / before the tag name:
<tagname>Content goes here</tagname>Commonly used HTML tags
Here are the tags you will reach for regularly:
The paragraph tag <p>
The paragraph tag wraps a block of text as a paragraph. Simple and very common.
<p>This is a paragraph.</p>The heading tags <h1> to <h6>
HTML provides six heading levels. <h1> is the most important (usually the page or section title) and <h6> the least.
<h1>Main Title</h1>
<h2>Subheading</h2>
<!-- and so on until h6 -->The image tag <img>
The <img> tag embeds an image. It has no closing tag – it is self-closing.
<img src="image.jpg" alt="Description of the image">The anchor tag <a>
The anchor tag creates links. The href attribute sets the destination.
<a href="https://www.example.com">Visit Example.com</a>The list tags <ul>, <ol>, and <li>
There are two list types: unordered (bulleted) and ordered (numbered). <ul> is for unordered lists, <ol> for ordered lists, and <li> for individual items.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>The division tag <div>
The <div> tag is a generic container for other elements. It does not mean anything on its own, but it is useful for layout and styling.
<div>
<p>A paragraph inside a div.</p>
</div>Empty elements
Some elements have no closing tag. <br> inserts a line break and <hr> draws a horizontal rule.
<p>This is a line.<br>This is a new line.</p>
<hr>Nesting tags
Tags can sit inside other tags to build more complex layouts. Opening and closing tags must nest properly – close the inner tag before the outer one.
<div>
<p>This is a <strong>paragraph</strong> with nested tags.</p>
</div>Attributes
Most tags accept attributes – extra information written inside the opening tag. On an <a> tag, href is an attribute that sets the link destination.
<a href="https://www.example.com" target="_blank">Visit Example.com</a>Why proper tag usage matters
Using tags correctly keeps your page well structured, accessible, and easier for search engines to index. Screen readers and other assistive tools rely on proper markup to make sense of your content.
Try it yourself
Build a small page using the tags above. Mix them, nest them, and see how they behave in the browser. Knowing when to use each one makes a real difference as your pages get more complex.
Next we will look at more tags and how they work in practice.