HTML Elements

Understanding HTML Elements

HTML elements are the building blocks used to structure and describe the content of a webpage, including headings, paragraphs, links, images, lists, forms, and many other types of content.

Most HTML elements consist of a start tag, content, and an end tag, although some elements follow different rules. Understanding what an element represents and how elements relate to one another is fundamental to writing well-structured HTML.

Anatomy of an HTML Element

Many HTML elements contain three basic parts: a start tag, content, and an end tag. Together, these parts make up the complete element.

<p>This is a paragraph.</p>

The paragraph element can be broken down like this:

• <p> — the start tag.
• This is a paragraph. — the content of the element.
• </p> — the end tag.

The complete element includes all three parts:

<p>This is a paragraph.</p>
└───────── element ─────────┘

Different HTML elements represent different types of content. For example, h1 represents a heading, p represents a paragraph, and a represents a hyperlink.

Elements & Tags

The terms element and tag are sometimes used interchangeably in casual conversation, but they do not mean exactly the same thing.

A tag is part of the markup used to identify an element. For example, the paragraph element uses a start tag and an end tag:

<p>        ← start tag

</p>       ← end tag

The element is the complete HTML structure represented by the markup, including its tags and content:

<p>This is a paragraph.</p>
└───────── element ─────────┘

Therefore, <p> is a tag, while <p>This is a paragraph.</p> represents the complete paragraph element.

The next tutorial examines HTML tags in greater detail, including start tags, end tags, tag names, and the syntax used to write them.

Element Content

The content of an HTML element appears between its start and end tags. Depending on the element, the content can consist of text, other HTML elements, or a combination of both.

A paragraph can contain plain text:

<p>Welcome to my website.</p>

It can also contain other elements where the HTML content model permits them:

<p>Welcome to <strong>my website</strong>.</p>

In this example, the text and the strong element are both part of the content of the p element.

Not every type of content is permitted inside every HTML element. Each element has rules describing the types of content it may contain, which helps HTML documents maintain a meaningful structure.

Elements & Attributes

HTML elements can have attributes that provide additional information or configure certain characteristics of the element. Attributes are written inside the start tag.

<a href="about.html">About Us</a>

Here, the a element has an href attribute that identifies the destination of the hyperlink.

An element can have multiple attributes:

<a href="about.html" title="About Our Company">About Us</a>

Attributes are part of an element's markup, but they are not separate HTML elements. You will learn how attributes and their values work in greater detail in the upcoming Attributes tutorial.

Nested Elements

HTML elements can contain other HTML elements. Placing one element inside another is called nesting, and nested elements are one of the primary ways HTML documents develop their structure.

<section>
  <h2>About Us</h2>
  <p>Learn more about our company.</p>
</section>

In this example, the h2 and p elements are nested inside the section element.

Indenting nested elements makes the relationship easier to recognize:

<section>
  ├── <h2>About Us</h2>
  └── <p>Learn more about our company.</p>
</section>

Elements must also be nested correctly. An element opened inside another element should generally be closed before the containing element is closed.

Correct:

<p>This is <strong>important</strong> text.</p>

Incorrect:

<p>This is <strong>important</p></strong> text.

The dedicated Nesting Elements tutorial later in this section explores nesting rules and element relationships in greater detail.

Element Relationships

Nesting creates relationships between HTML elements. Understanding these relationships helps you describe the structure of a document and becomes especially useful when you begin working with CSS and JavaScript.

<section>
  <h2>Products</h2>
  <p>View our latest products.</p>
</section>

In this example:

• The section element is the parent of the h2 and p elements.
• The h2 and p elements are children of the section element.
• The h2 and p elements are siblings because they share the same parent.

With deeper nesting, you will also encounter terms such as ancestor and descendant. These relationships are covered more thoroughly in the Nesting Elements tutorial.

Void Elements

Some HTML elements cannot contain child nodes and do not have end tags. These are called void elements.

For example, the img element embeds an image:

<img src="photo.jpg" alt="Mountain landscape">

Unlike a paragraph, an image element is not written with content between a start and end tag:

<!-- Incorrect HTML -->
<img>Mountain landscape</img>

Other void elements include br, hr, input, link, and meta. You will learn about void elements and their syntax in the dedicated Empty Elements tutorial.

Elements & Semantic Meaning

HTML elements do more than create a visual arrangement on a webpage. Many elements describe the meaning or purpose of the content they contain.

For example:

<h1>HTML Tutorial</h1>

<p>Learn how to create webpages using HTML.</p>

<nav>
  <a href="index.html">Home</a>
</nav>

The h1 element identifies a heading, the p element identifies a paragraph, and the nav element identifies a section containing navigation links.

Using elements according to their intended meaning helps create more understandable document structures and can benefit accessibility, browsers, search engines, and other software that processes HTML.

Choosing the Right Element

When creating HTML, choose an element based primarily on the meaning and purpose of the content rather than how you want that content to look.

For example, if text is a heading, use an appropriate heading element:

<h2>Contact Information</h2>

Do not choose an HTML element simply because its browser default styling happens to produce the appearance you want. Presentation should generally be controlled with CSS, while HTML describes the structure and meaning of the content.

As you continue through these tutorials, you will learn which elements are available and how to choose the element that best represents each type of webpage content.

HTML Element Best Practices

Using HTML elements consistently and according to their intended purpose creates markup that is easier to understand, maintain, and reuse.

• Choose elements based on the meaning and purpose of the content.
• Use required start and end tags correctly.
• Nest elements according to HTML's content rules.
• Indent nested elements consistently to make the hierarchy easier to read.
• Keep sibling elements at the same indentation level.
• Do not add end tags to void elements.
• Use CSS rather than inappropriate HTML elements solely to achieve a particular appearance.
• Keep your markup organized so other people can understand and edit it.

Learning what each HTML element means and when it should be used is more important than simply memorizing a list of element names.

Summary

HTML elements are the building blocks of a webpage. Many elements consist of a start tag, content, and an end tag, while void elements follow different rules and do not have end tags.

Elements can contain attributes and can be nested inside other elements to create a structured document hierarchy. Choosing elements according to the meaning of the content and organizing them consistently helps produce HTML that is understandable, accessible, and easier to maintain.