# Tags, Attributes, and Elements

Updated on Dec 22, 2021 by [Alan Morel](/content/alanmorel/index.html)

## Table of Contents

1. [Elements](/content/classes/html/tags-attributes-elements#elements/index.html)
2. [Tags](/content/classes/html/tags-attributes-elements#tags/index.html)
3. [Attributes](/content/classes/html/tags-attributes-elements#attributes/index.html)
4. [Resources](/content/classes/html/tags-attributes-elements#resources/index.html)

Let's learn the difference between [HTML](/content/classes/html/index.html) elements, tags, and attributes. We'll also take a look at a very basic HTML document.

## Elements

**Elements** are the building blocks of HTML. They are the smallest units of content and you use them to build larger elements. Elements can be nested to create more complex content.

Here's an example of an HTML element:

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

Notice that the element is surrounded by angle brackets (< and >). This element is using a `p` tag, and its content is "This is a paragraph."

## Tags

**Tags** are the names of the elements. They are used to identify the type of element that you are creating. An opening and closing tags makes a complete element, however, you can also use self-closing tags. Self-closing tags are used to create elements that don't contain content.

Here is an example of a self-closing tag:

```html
<br />
```

Here's a look at the syntax of any generic tag:

```html
<tag>The opening tag is on the left, closing tag on the right.</tag>
```

Here are some other examples of tags:

- `a`
- `p`
- `h1`
- `div`
- `span`

## Attributes

In addition to tags, HTML has another way of helping you give meaning to your content, called **attributes**.

Attributes describe the tags that they are placed inside of. The syntax for attributes is extremely simple. A valid attribute is a name-value pair, separated by an equals sign.

```html
<div class="special">I am a special heading!</div>
```

In this example, `class` is the attribute, and `special` is the value. Attributes describe tags because now this `div` tag might act or look differently than another `div` tag with another class attribute, or no class attribute at all.

The following is a generic example of how an attribute with a value can be applied to a tag.

```html
<tag attribute="value">I am a generic example.</tag>
```

Hopefully now you know the difference between HTML tags, attributes and elements!

HTML is fun!

## Resources

- [HTML Elements - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
- [HTML Attributes - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)