When starting to learn about HTML, one of the first things you’ll realize is that a web page isn’t just one entity — It’s actually made up of dozens or even hundreds of building blocks, all coming together to bring you the experience of a website.
In HTML, these building blocks are called elements. HTML elements tell the browser how to display the text, images, and other content on the page, as well as tell the browser other useful bits of information. If you want to understand how websites work, you’ll need to know the fundamentals of HTML elements.
In this blog post, we’ll introduce you to elements in HTML and teach you how to write them correctly. We’ll also provide a list of some of the most common HTML elements that you’ll use in your web pages. Let’s get started.
What are HTML elements?
In HTML, an element is a section of an HTML document. Some HTML elements represent visible components on a web page, such as text, images, or buttons, while others denote different sections of the page or provide meta-information about the document.
In the code itself, HTML elements are created with tags. An HTML tag consists of text between angle brackets (<>). For example, an HTML paragraph (p) element looks like this:
Most HTML elements consist of three parts:
- The opening tag (or start tag) marks where the element’s content begins (<p> in the example above).
- The closing tag (or end tag) marks the end of the element’s content (</p> above). The closing tag is identical to the opening tag with the addition of a forward slash (/) after the first angle bracket.
- The content is placed between the element’s opening and closing tags (This is paragraph text. above).
Note that HTML tags are not case-sensitive. You could write <p> as <P> and it would still work. However, most developers write lowercase HTML tags because it’s easier and more consistent.
Empty HTML Elements
While most HTML elements are written with an opening and closing tag, some elements consist of a single tag and do not have closing tags or content. These are called empty elements.
One empty element you’ll see often is the line break element, which adds a line break between text. The line break element is made with the empty <br> tag, shown below:
As you can see, simply using <br> creates the line break, no closing tag necessary. Other common empty elements include <img> (image), <meta>, <link>, and <input>.
HTML elements can also contain attributes. Attributes are extra code placed inside the opening tag of an element that provides additional information about the element. An attribute may be optional or required.
For example, we can use the style attribute to change the color of our paragraph element.
HTML Element Nesting
HTML elements can also be placed inside of other elements — this is called nesting and is key to how HTML documents are assembled.
Going back to our <p> example, let’s see how an anchor element, which creates a hyperlink, is nested inside paragraph text. Here, the anchor element is placed between the opening and closing tags of the paragraph element.
Also, notice that all text between <a> and </a> has styling automatically applied to make it appear as a hyperlink.
In this example, we call the paragraph element the “parent” element, and the anchor element is called the “child” element. Child elements can also contain nested elements and thus be parent elements themselves. You can nest elements as many levels deep as you need to in HTML, as long as each parent element is properly ended with a closing tag.
In fact, all HTML documents have at least two levels of nesting because of how they’re set up. An HTML document usually has the following structure:
<!-- metadata goes here -->
<!-- page content goes here -->
<p>This is an example paragraph.</p>
Let’s unpack what we’re seeing here:. In every HTML file, all elements are nested inside the <html> tag. This is called the root element because it contains all other elements in the document.
<html> usually contains two direct child elements. These are <head> <head>, which contains information about the document (e.g., its title, keywords, author, and/or any required scripts), and <body>, which contains all visible page elements (e.g., <p>, <img>, etc.).
You can place HTML elements inside <head> or <body>, and these elements may have child elements of their own. Finally, notice that each element in the example above closes itself before its parent tag closes. This means the tags are properly nested and is necessary to ensure the page is rendered correctly in the browser.
To learn more about why nesting is important in HTML, check out our intro guide to the Document Object Model in HTML.
Block and Inline HTML Elements
When learning about HTML elements, it’s also important to distinguish between block-level and inline-level elements. Most HTML elements fall into one of these two categories.
A block-level element creates a new section on the page. By default, a block-level element stretches to fill 100% of the viewport (i.e., the visible area of the web page) and always starts a new line.
Common block-level elements include <p>, <h1> to <h6> (page headings), <table>, <ul> (unordered list), <ol> (ordered list), and <div>.
Here’s an example of three block-level elements on a page, with colored backgrounds to show how they fill up space.
Even though the content does not span the entire width of the viewport, the block-level elements do. Also notice that, unlike the width, the height of each element is set by its content.
Inline-level elements exist in line with their parent element. Both the width and height of an inline-level element are set by its content. Also, inline-level elements do not start a new line, meaning you can put multiple of them on the same line.
Here’s another example of block-level elements with some inline elements added in, so you can see how the two kinds of elements work together.
HTML Tags List
Even though there are well over 100 elements in HTML5, you really only need to know a dozen or two to write HTML effectively. It also helps that most tag names describe what the element does, making them easier to memorize.
Here are some common HTML tags you’ll see on web pages:
|Tag||Description||Block-level or inline-level?|
|<html>...</html>||the root of the HTML document that contains all other elements||N/A|
|<head>...</head>||contains metadata about the HTML document||N/A|
|<body>...</body>||contains page content of the HTML document||N/A|
|<p>...</p>||creates a paragraph of text||block-level|
|<h1>...</h1>, <h2>...</h2>, etc.||creates a page heading; options range from <h1> to <h6>, from most important to least important||block-level|
|<img>||embeds an image on the page||inline-level|
|<video>...</video>||embeds a media player on the page and displays a video||inline-level|
|<a>...</a>||creates a hyperlink from the included text||inline-level|
|<em>...</em>||indicates emphasized text; italicizes the text by default||inline-level|
|<strong>...</strong>||indicates important text; bolds the text by default||inline-level|
|<br>||creates a line break||inline-level|
|<ol>...</ol>||creates an ordered list, usually a numbered list by default||block-level|
|<ul>...</ul>||creates an unordered list, usually a bulleted list by default||block-level|
|<button>...</button>||creates an interactive button||inline-level|
|<main>...</main>||denotes the main content area of the page||block-level|
|<header>...</header>||denotes the header area of a page||block-level|
|<footer>...</footer>||denotes the footer area of the page||block-level|
|<nav>...</nav>||denotes the navigational region of the page||block-level|
|<div>...</div>||a generic block-level element||block-level|
|<span>...</span>||a generic inline-level element||inline-level|
|<title>...</title>||contains the title of the document that is displayed in the page’s tab||N/A|
|<style>...</style>||contains styling (in the form of CSS) for the document||N/A|
|<link>...</link>||signals that the HTML document uses another document; most commonly used to link to an external CSS file||N/A|
|<meta>...</meta>||indicates any other relevant metadata||N/A|
Learn HTML Elements
But that’s the gist of it — to build an effective page, it’s about making the most of the elements at your disposal. And the best way to learn elements is, of course, to use them. So, try building your own web pages, experiment with different elements, and see how it all comes together.