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. HTML tags are often accompanied by attributes. An attribute can add extra information to an HTML element.
If you’re new to HTML, you should first read our introduction to HTML and creating websites.
Table of Contents
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 metadata. 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 browser always shows the document title, usually as the tab name in which the page is rendered. But that’s not all. Title tags play an essential role in search engines as well. Your page’s title is usually shown in the search results list. A descriptive, enticing title will thus attract more visitors to your website! If you don’t pick your title well, some search engines will even change it in their result lists.
Body
The <body> .. </body> tags enclose the actual page content, consisting 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>Code language: HTML, XML (xml)As you can see, the div tag contains an attribute called id so we can style it later with CSS. For now, you can ignore attributes; they will be covered later.
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 while skimming the document. HTML has six 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>Code language: HTML, XML (xml)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.Code language: HTML, XML (xml)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.
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>Code language: HTML, XML (xml)
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.
From what I know, some other languages, like Japanese, like to emphasize text in a different manner. And that’s precisely 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 styled entirely differently 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: absolute links or 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., python.land
- The path to the file on that domain, like /products/food/bread.html
With the examples above, the complete link becomes https://python.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://python.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 over absolute links: they are portable. If your site only contains relative links, switching to a new domain is easy. I recommend using relative links if you can.
Using Attributes in your HTML tags
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 others are specific 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://python.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>Code language: HTML, XML (xml)The <img> HTML tag (to include images)
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://python.land/wp-content/uploads/2021/10/web-development.jpg"
width="300"
height="200"
>Code language: HTML, XML (xml)That’s it; you’ve learned the most important HTML tags. Of course, there are many more, but you know enough to build simple websites now. If you want to explore more tags, feel free to visit these resources:
