HTML elements are used to structure content in an HTML document, informing browsers how to handle and display the content.

What’s an HTML element?

In HTML, an element tells a browser how to manage content. Elements usually start with an opening tag (<>) and end with a closing tag (</>). The content or area that the element applies to is located between the tags. The opening tag tells the browser what to do with the content, and the closing tag signals the end of the instructions. HTML elements help with formatting, structuring and displaying content.

Web Hosting
Hosting that scales with your ambitions
  • Stay online with 99.99% uptime and robust security
  • Add performance with a click as traffic grows
  • Includes free domain, SSL, email, and 24/7 support

How are HTML elements structured?

Most HTML elements follow the same pattern. Here’s what the syntax looks like:

<tagname>This is the content or the area that the element applies to.</tagname>
html

The opening tag <tagname> specifies what kind of element it is. Next comes the content or the area it applies to, followed by the closing tag </tagname>.

What’s the difference between an HTML element and an HTML tag?

HTML tags are part of HTML elements and are essential to their implementation. The opening tag is the starting point of an element and the closing tag indicates the end of the element. The tags along with the information contained between them make up an HTML element.

Examples of HTML elements

Here’s a simple example to show how HTML elements work. We’ve also included embedded HTML elements to demonstrate how HTML documents use nesting to create a hierarchical structure. In this example, we’ve used the following four HTML elements: <html>, body,<h1> and <p>:

<!DOCTYPE html>
<html>
<body>
<h1>This is a headline.</h1>
<p>This is a paragraph.</p>
</body>
</html>
html

Below the <!DOCTYPE> declaration is the <html> element. This element defines the entire document as an HTML document. This element servers as the root element, encompassing all the other elements that follow. Next is the <body> element, which contains the content on the page that’s visible. Inside the body is the <h1> element. This tells the browser to treat the content as a top-level HTML heading. This element is followed by the <p> element, which indicates a paragraph of text.

What are empty HTML elements?

Some HTML elements don’t have content or a closing tag. These are called empty elements. A good example of this is HTML line breaks. All that’s needed to implement a line break is the opening tag <br>. Here’s an example:

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph <br>
    with a line break.</p>
</body>
</html>
html

Important HTML elements at a glance

When working with the markup language, you’ll encounter lots of different HTML elements. Here are a few of the most important ones:

HTML Element Description
<html> Defines HTML as the document type
<head> Contains information that is not displayed in the browser
<title> Specifies the title of the page
<base> Specifies the base URL
<body> Contains all the content to be displayed in the browser
<h1>, <h2>, <h3>… Indicates a heading
<p> Marks a section of content
<ul> Starts an unordered list
<ol> Defines an ordered (numbered) list
Tip

Want to dive deeper into the world of HTML? Check out our detailed HTML tutorial for beginners for essential tips and tricks.

Was this article helpful?
Go to Main Menu