Tags, Attributes, and Elements

Let's learn the difference between 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
• HTML Attributes - MDN Web Docs

• Support Us
• Discord
• Share
• Post
• Share