In this article, you’ll learn the most important HTML tags that define an HTML document. These tags are present in most HTML pages out there, and as you keep practicing and building sites, you’ll start to know them by heart.
This article is part of our HTML tutorial for beginners. If you haven’t done so, please read the introduction first and then set up your working environment and create your first HTML file.
Document structure HTML tags
We’ll start with the tags that define the global structure of your HTML document.
HTML
The <html> and </html> tags enclose your HTML document. The <html> tag directly follows the HTML 5 doctype definition: <!Doctype html>
Head
The <head>.. </head> HTML tags form the head section of the document. This section contains information about the page, like the title and meta data. The head section can also be used to include or link to cascading style sheets and JavaScript that must be loaded before displaying the page.
Title
The <title>…</title> HTML tags are used to define the document title. The document title is always shown by the browser in some way, usually as the name of the tab in which the page is rendered.
But that’s not all. The title tags play an important role in search engines as well. The title of your page is usually shown in the list of search results. A descriptive, enticing title will thus bring in more visitors to your website!
Body
The <body> .. </body> tags enclose the actual page content, which can consist of text, images, tables, video, audio, and all the other things you can see and hear on a webpage.
Article
The <article> .. </article> tags enclose an article, meaning a self-contained piece of content. Many pages have one main article, but it’s possible to have multiple articles on a single page as well.
Section
The <section> .. </section> tags define a standalone section in the document, which can’t be represented with a more specific tag. A section, for example, can be a section with information about the author or contact information. However, it’s not used to denote an article, for example. Generally, you want your tags to be specific as possible.
Div
Finally, <div> .. </div> tags are even more generic than section tags. Div tags create a generic container for flow content. The tag has no effect on the content or layout unless explicitly styled using CSS. Hence, div tags are mostly used to style sections of a page, no matter what size and meaning these sections have.
Let’s look at what we have so far before we continue:
<!Doctype html>
<html>
<head>
<title>The page title</title>
</head>
<body>
<article>
The main content or article.
</article>
<section>
Some info about the author.
<div id="author_birthday">
Their birthday, styled in a specific way.
</div>
</section>
</body>
</html>As you can see, the div tag contains an attribute, called id, so we can style it later on with CSS. For now, you can ignore attributes; they will be covered later on.
Header HTML Tags
Every page needs headers, and preferably you have at least one. Headers help your readers quickly find what they are looking for by skimming the document. HTML has 6 levels of headers, starting from level 1 and ending at level 6. Chances are, you’ll never use headers beyond level 4, but it’s good to have options.
To demonstrate, here’s a document with all headers in order:
<h1>Header level 1</h1> <h2>Header level 2</h2> <h3>Header level 3</h3> <h4>Header level 4</h4> <h5>Header level 5</h5> <h6>Header level 6</h6>
Paragraphs: the <p> tag
The <p>.. </p> tags are used to mark a paragraph. Each paragraph must have its own set of p-tags.
<p>This is the first paragraph.</p> <p>This is the second paragraph.</p> This is not a paragraph. Neither is this.
As you’ll notice, browsers add some spacing around paragraphs by default, while the last two lines are glued together because they contain no markup whatsoever.
Text formatting HTML tags
As I’ve explained in the introduction of the HTML tutorial, formatting and layout are done by using CSS (Cascading Style Sheets) and not HTML. So why does HTML have tags to format text?
HTML was never intended to do both markup and layout, but a lot of layout stuff crept in over the years anyway. That was all fixed with HTML 5, the most modern version of HTML that you learn on this website. However, there are still some tags that can be considered layout tags, and they do have an effect on the layout in most, if not all, browsers.
It’s important to realize that these tags are now meant to give meaning to the text on a webpage, though. If that still sounds vague, I totally understand. Just keep reading and it will become much clearer.
Emphasize: the <em> HTML tag
We emphasize text with the <em>..</em> tags. The effect of this in most browsers is that the text is printed in italics. In the following example, you can see what the effect of these tags is in your browser:
<p> Let's <em>emphasize some text</em> to see the effect in our browser. </p>
Hit the play button and see what happens. Because this page is in English, the emphasized text turns into italics. However, you need to realize that this can be overridden with CSS. Maybe you want your emphasized text to become bold and red? It’s all possible with CSS, but browsers by default go for italics.
I’m certainly not an expert, but from what I know some other languages, like Japanese, like to emphasize text in a different manner. And that’s exactly what I mean by giving meaning to your text. The <em>-tag says: this text needs to stand out. How that’s done, is up to the web designer (or browser).
Visit the Mozilla documentation for all the details on em-tags.
Italics: the <i> tag
The <i>..</i> tags make text display in italics, like this. How’s that different from <em>-tags? With the i-tags, you make it more explicit that you want to show text in italics. But here too, the tag can be style completely different with CSS.
Bold: the <b> tag
To make text look bold, like this, we can use the <b> .. </b> tags. Again, this is what most, if not all, browsers will make of it by default. And again, this can be changed using cascading style sheets.
Links: the <a> tag
We use the <a> tag to create links to other pages. The link tag is what makes the web this huge, interconnected mountain of information! There are two ways to create a link to another page: using absolute links or using relative links.
Absolute links
An absolute link contains the full path to a page or other asset, including at least:
- The schema: http or https
- The domain, e.g. wd.land
- The path the the file on that domain, like /products/food/bread.html
With the used examples above, the complete link becomes https://wd.land/products/food/bread.html
Relative links
A relative link points to an asset that is relative to the current location. They behave mostly similar to directory traversal. Going back to the (imaginary) page located at https://wd.land/products/food/bread.html:
- A link that starts with a slash, is ‘absolute’ from the root of the domain, e.g.: /products/food/bread.html
- Links can also refer to the current level, e.g.: ./food/bread.html could be a link on a page at /products/index.html
- Links can traverse down from the current location, e.g.: ../../ would point to the root domain when used on the bread.html page.
Relative links have an important advantage compared to absolute links: they are portable. If your site only contains relative links, it’s easy to switch to a new domain, for example. If you can, I recommend you to use relative links.
Attributes
Let’s look at a couple of example links to put all this into practice. But before we do so, I need to explain one last thing. HTML tags can have attributes. We’ve seen them before, but we didn’t dive into attributes yet. However, we can’t create links without using an attribute, so this is the ideal time to find out what they are.
- All HTML elements can have attributes
- Some attributes are usable on (almost) all HTML elements, while other are spefic to one or more elements.
- Attributes are always added to the start tag
Most attributes have a name and a value. Here are some example attributes:
- width=”500″
- href=”https://wd.land”
In the case of links, we need to use the href attribute, which is short for hypertext reference. It’s what makes a link point to another location. The text surrounded by the <a> and </a> tags becomes the link text. Here are some example links to put all this in place:
<p> <a href="https://wd.land/html">Posts about HTML</a> </p> <p> <a href="/javascript">Posts about JavaScript</a> </p> <p> <a href="/">Our homepage</a> </p>
Images: the <img> tag
Besides text, images belong to the most occurring items on a webpage. For now, it’s the last but certainly not the least tag that we’ll cover. Like links, the <img> tag needs to point to a location: the URL where the image is at. And again, this location can be absolute or relative.
So an image is not part of the page itself; it is loaded from elsewhere. Instead of href, we use the src attribute, short for source, to point to an image. While the src attribute is required, there are more attributes that you probably want to use when dealing with images:
- width: the width of the image in pixels
- height: the height of the image in pixels
- alt: alternative text that describes the image; shown when the image can not be shown (for whatever reason) and useful for accessibility (those using screen readers).
<img
src="https://wd.land/wp-content/uploads/2021/10/web-development.jpg"
width="300"
height="200"
>
Keep learning
That’s it; you’ve learned the most important HTML tags there are. Of course, there are many more, but for now, you know enough to continue with the tutorial. If you want to explore more tags, feel free to visit these resources: