Skip to main content

The difference between elements and tags in HTML

Posted in Development

People often refer to HTML ‘tags’ and ‘elements’ interchangeably, but there is a distinction. That distinction has been really important to me as I’ve given talks on HTML within UK Government over the last year or so.

So what’s the deal?

Tags

Tags are the bits that are encapsulated in those angular brackets (which are basically ‘less than’ and ‘greater than’ symbols): < and >.

So this is a tag:

<blockquote>

This is also a tag:

</blockquote>

The first is an opening tag, the latter, with forward slash before the word, a closing tag.

Elements

On the other hand, this excellent quote from Steve Jobs is an element:

<blockquote>Design is not just what it looks like and feels like. Design is how it works.</blockquote>

An element (usually) consists of two tags: the opening tag and the closing tag. It starts with the opening tag, continues until it’s closed, and consists of everything in between, including other elements:

<blockquote>
<p>Design is not just what it looks like and feels like. Design is how it <em>works</em>.</p>
</blockquote>

In that example, the <blockquote> element contains a paragraph of text with an emphasised word, but it can be a lot, lot more – think of the <html> element, which contains an entire webpage and all of its behind-the-scenes metadata!

So if you’re ever talking to someone about an HTML element, you’re talking about the whole thing, where if you’re talking bout a tag, you’re referring to just the bits where an element begins and ends.

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Getting started with NVDA

    Everyone who works in digital product development should be familiar with screen reader software. Here’s how to get started with NVDA on Windows.

  2. An enhancement to accessible responsive tables

    I’ve written about accessible responsive tables before but something has been bugging me. So here’s another step to make those tables even better.