20 Fundamental HTML Tags You Must Know

When you build a basic HTML page, you start with its document shell and add content inside it. HTML elements give a page structure and meaning, and an element marks a piece of a document, such as a heading or a link.

In this piece, I’ll explain what 20 HTML elements do and walk through building a page with a selection of them.

TL;DR: 20 HTML elements and what they do

HTML elements give a page structure and meaning. These 20 cover the document shell, text, navigation, semantic regions, lists and tabular data.

• Use <head> for document metadata and <body> for page content.
• Choose a semantic element when it describes the content’s role, and use <div> or <span> when no specific element fits.
• Remember that <img> and <br> are void elements, so they do not have closing tags.

What an HTML element does

An HTML element marks a piece of a document, such as a heading or a link. A tag is its boundary markup, and the element includes that markup with its content.

A browser reads those elements as a document tree. The outer <html> element contains metadata in <head>. Page content belongs in <body>.

Element	Role
<html>	Root of the document
<head>	Document metadata container
<title>	Text shown in the browser tab
<meta>	Metadata such as character encoding
<body>	Document content
<h1>	Main page heading
<p>	Paragraph of text
<a>	Hyperlink when it has href
<img>	Embedded image
<div>	Generic flow-content container
<span>	Generic phrasing-content container
<br>	Line break within text
<main>	Dominant page content
<nav>	Navigation links
<section>	Thematic section of content
<footer>	Footer for a page or section
<ul>	Unordered list
<ol>	Ordered list
<li>	Item in a list
<table>	Tabular data

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>
    Page content goes here.
  </body>
</html>

The doctype selects standards mode, and the <title> text appears in the browser tab rather than as a page heading.

How to build a page with fundamental HTML elements

Build the page from its document shell inward. Each element below has a job, so the markup remains understandable without relying on its visual styling.

Step 1: Set up the document and its metadata

Start with the root, then put the character encoding and page title in the head. The title element supplies document metadata, while the heading in the body labels the page content.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Neighborhood Garden</title>
  </head>
  <body>
    <header><h1>Neighborhood Garden</h1></header>
    <nav aria-label="Main navigation"><a href="#hours">Opening hours</a></nav>
    <main>
      <section id="hours">
        <h2>Visit the garden</h2>
        <p>Open every Saturday morning.</p>
        <ul><li>Bring gloves</li><li>Meet at the gate</li></ul>
      </section>
    </main>
    <footer><p>Contact the garden team.</p></footer>
  </body>
</html>

Step 2: Add the text and page regions

A heading names a page section, and a paragraph holds prose. Use <header> for introductory or navigational content. <main> marks the page’s primary content.

The <section> groups content around a topic, while <nav> groups important navigation links. A <footer> holds information about its nearest section or the page.

Step 3: Link the page and check the rendered result

An anchor uses its href attribute to point to a destination. In this example, the destination is the section whose id is hours. Each instruction sits in its own list item.

I ran this document through Python’s HTMLParser and checked for the document shell, landmarks, heading, link text and both list items. All assertions passed. The browser render below shows the headings, link, list and footer.



The browser displays a link and separate list items. HTML defines that structure, while CSS can change their appearance.

HTML tag mistakes that change the result

Choose among the remaining common elements by the content they mark, not by a default style. The table distinguishes their roles and points out where a generic wrapper stops adding meaning.

Element	What it marks	Use it when
<h1> to <h6>	Heading elements mark section levels	You are naming a section, so choose the level that fits the document outline.
<div>	A generic flow-content container	You need a group for styling or scripting and no semantic element describes it.
<span>	A generic phrasing-content container	You need to target a short inline portion without adding its own meaning.
<br>	A line break within text	A line break belongs to the content, such as an address, not use it to create page spacing.
<ul> and <ol>	Unordered and ordered lists	The items form a list, with each item inside an <li>.
<table>	Data arranged in rows and columns	The relationship between row and column values matters, so use header cells for labels and data cells for values.
<img>	An embedded image	Include a useful alt value when the image conveys content.
<script>	Executable or linked script data	A document needs client-side code, kept its behavior separate from its content structure.

The table’s header row labels its columns, and its data rows hold related values. Add <thead> and <tbody> when they help group the header and body rows.

Void elements such as <img>, <br> and <meta> have no content or closing tag. For other elements, close and nest tags in the reverse order in which they open.

A <div> is not a vertical version of <span>. The former groups flow content and the latter phrasing content, and neither describes what its contents mean. Prefer <nav>, <main> or another semantic element when its role fits.

Conclusion

Start with the meaning of the content, then choose the element that expresses it. A useful next exercise is to mark up one page section with a heading, paragraph, link and list before adding CSS.

For the full element inventory, start with the MDN HTML elements reference. The MDN basic HTML syntax guide explains nesting and void elements.

• Pick one page section and write its content structure before styling it.
• Check that headings, links and lists express the roles their text suggests.

Frequently asked questions

These answers clear up common questions about HTML tags and elements.

What is the difference between an HTML tag and an element?

A tag is the markup such as <p> or </p>. An element is the complete structure, including its tags and content where applicable.

Which HTML tags do not need a closing tag?

Void elements such as <img>, <br>, and <meta> do not have end tags. Do not add a closing tag for them.

When should I use a div instead of a section?

Use <section> for a thematic section of content, usually with a heading. Use <div> as a generic container when no semantic element describes the group.