Elements and Tags

Overview

An HTML element is the building block of a page: it usually consists of an opening tag, some content, and a closing tag. Tags are the keywords in angle brackets that tell the browser what kind of element it is. Understanding the difference between elements, tags, and content makes the rest of HTML far easier to read and write.

Syntax / Usage

Most elements wrap content between a matching pair of tags. Some, called void elements, have no content and no closing tag.

<!-- Element with opening tag, content, and closing tag -->
<p>This is a paragraph.</p>

<!-- Elements can nest inside one another -->
<p>Some <strong>bold</strong> and <em>italic</em> text.</p>

<!-- Void elements have no closing tag -->
<br />
<hr />
<img src="logo.png" alt="Company logo" />

Examples

A heading followed by a list, showing nesting:

<h2>Shopping List</h2>
<ul>
  <li>Apples</li>
  <li>Bread</li>
  <li>Coffee</li>
</ul>

Inline elements combined inside a block element:

<p>
  Visit our <a href="/about">about page</a> to learn more,
  or read the <code>README</code> file.
</p>

Common Mistakes

• Forgetting the closing tag, which can break layout or nesting
• Improperly nesting tags, e.g. <b><i>text</b></i> instead of <b><i>text</i></b>
• Adding a closing tag to void elements like <img> or <br>
• Confusing block elements (<div>, <p>) with inline elements (<span>, <a>)
• Using uppercase tag names inconsistently; lowercase is the convention

See Also

html-document-structure html-attributes html-semantic-elements