Runnable HTML Docs: Tags

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

A tag is the markup you type, like or . An element is the whole thing the browser builds from it: the opening tag, its attributes, the content and the closing tag. Hi is two tags that make one p element.

Q: Are HTML tags case sensitive?

No. and produce the same element, and so does any mix of upper and lower case. Lowercase is the standard style and what most formatters output.

What an HTML tag is

An HTML tag is a name in angle brackets that marks up a piece of content. Most tags come in pairs: an opening tag like <p> and a closing tag with a slash like </p>. Everything between them is the content, and the whole package is an element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Change <h1> to <h2> (both the opening and the closing tag) and the heading gets smaller. The tag name is what tells the browser what the content is.

Anatomy: tags, attributes and elements

<a href="/docs/html/links" class="nav">Links</a>

Part	In the example
Opening tag	`<a href="/docs/html/links" class="nav">`
Tag name	`a`
Attributes	`href="/docs/html/links"` and `class="nav"`
Content	`Links`
Closing tag	`</a>`
Element	all of the above together

Attributes always go in the opening tag, never the closing one. They are covered on the attributes page.

Tag names are case insensitive: <P> and <p> are the same. Write them in lowercase.

Void tags: no closing tag

Some elements cannot contain anything, so they have only an opening tag. These are called void elements (people also say self closing tags):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

The full list: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

You may write them as <br /> with a slash. The slash does nothing in HTML; it is allowed so that XHTML style code keeps working. A slash on a normal tag, like <div />, is ignored as well, which means the div is still open.

Nesting tags

Elements go inside other elements. The rule is: close tags in the reverse order you opened them. The last one opened is the first one closed.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Browsers do not reject broken nesting. They repair it, and the repair is not always what you meant. This example hands two badly nested snippets to the browser's parser and prints the structure it actually built:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Two repairs happen. The overlapping <b> and <i> get split into extra elements. And a <p> cannot contain a <div>, so the browser closes the paragraph before the div and turns the stray </p> into a new, empty paragraph. When CSS or JavaScript behaves strangely, broken nesting is one of the first things to check.

Block and inline elements

Most tags fall into two display groups. Block elements (div, p, h1 to h6, ul, section) start on a new line and take the full width. Inline elements (span, a, strong, em, code) sit inside a line of text and are only as wide as their content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

The blue boxes stretch across the page; the amber ones wrap only their text. CSS can change this with the display property, but each tag starts with its default. See div and span for the two generic containers.

The most common HTML tags

Tag	Purpose
`<html>`, `<head>`, `<body>`	The document skeleton
`<title>`, `<meta>`, `<link>`	Page information in the head
`<h1>` to `<h6>`	Headings
`<p>`	Paragraph
`<a>`	Link
`<img>`	Image
`<ul>`, `<ol>`, `<li>`	Lists
`<strong>`, `<em>`	Important and emphasized text
`<br>`, `<hr>`	Line break, thematic break
`<div>`, `<span>`	Generic block and inline containers
`<table>`, `<tr>`, `<th>`, `<td>`	Tables
`<form>`, `<input>`, `<label>`, `<button>`	Forms
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Page structure with meaning

For a one-page list you can print, see the HTML cheat sheet.

Tags that do not exist

If you type a tag the browser does not know, it does not fail. It creates an unknown element, shows its content, and treats it as inline:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

An unknown tag has no meaning for search engines or screen readers, so prefer a real tag. If you are building your own component with JavaScript, give it a name with a hyphen (user-badge): hyphenated names are reserved for custom elements and never clash with future HTML tags.

Common mistakes

Forgetting a closing tag. A missing </a> or </strong> makes the rest of the page a link or bold. Browsers close some tags for you (</p>, </li>), but not these.
Closing a void tag. </br> and </img> are not valid. Browsers even read </br> as an opening <br>, so <br></br> gives two line breaks.
Overlapping tags. Close in reverse order: <b><i>x</i></b>, never <b><i>x</b></i>.
Putting a block inside a paragraph. A <div>, list or heading inside <p> ends the paragraph early. Use a <div> as the outer container.
Choosing tags for their look. Use <h2> because it is a heading, not because it is big. Size and weight belong in CSS.

Frequently Asked Questions

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

A tag is the markup you type, like <p> or </p>. An element is the whole thing the browser builds from it: the opening tag, its attributes, the content and the closing tag. <p>Hi</p> is two tags that make one p element.

Which HTML tags do not need a closing tag?

Void elements cannot have content, so they have no closing tag: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> and <embed>.

Should I write <br> or <br />?

Both are valid HTML. The trailing slash is allowed on void elements and ignored by the browser. On a non-void tag such as <div /> the slash is ignored too, so the div stays open until a </div>.

Are HTML tags case sensitive?

No. <P> and <p> produce the same element, and so does any mix of upper and lower case. Lowercase is the standard style and what most formatters output.

How many HTML tags are there?

The current HTML standard defines more than 100 elements, but everyday pages use about 20 to 30 of them: headings, paragraphs, links, images, lists, div, span, forms and the semantic layout tags.

What happens if I use a tag that does not exist?

The browser still creates an element for it, displays its content, and treats it as an inline element with no special meaning. Custom elements are allowed if the name contains a hyphen, such as <user-card>.

Related concepts