HTML Elements: What They Are and How to Use Them

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:

See the Pen HTML elements: <p> by HubSpot (@hubspot) on CodePen.

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:

See the Pen HTML elements: <br> by HubSpot (@hubspot) on CodePen.

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 Attributes

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.

See the Pen HTML elements: <p> with styling by HubSpot (@hubspot) on CodePen.

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.

See the Pen HTML elements: link inside a paragraph by HubSpot (@hubspot) on CodePen.

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:

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.

Block-Level Elements

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.

See the Pen HTML elements: block-level elements by HubSpot (@hubspot) on CodePen.

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

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.

Common Inline-level elements include <a>, <img>, <em> (emphasis; italicizes an element), <strong> (bolds an element), <button>, and <span>.

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.

See the Pen HTML elements: inline-level elements by HubSpot (@hubspot) on CodePen.

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:

Learn HTML Elements

If you think about it, it’s really interesting that every website and web page you’ve ever visited is made up of a handful of page elements, along with some creative use of CSS and JavaScript.

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.