Tags, Attributes, and Elements
Table of Contents
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
- How to Install Node on Windows, macOS and Linux
- Getting Started with Electron
- Git Tutorial: Learn how to use Version Control
- How to Serve Static Files with Nginx and Docker
- How to deploy a .NET app using Docker
- How to build a Discord bot using TypeScript
- How to deploy a PHP app using Docker
- Getting Started with Sass
- Getting Started with Handlebars.js
- Using Push.js to Display Web Browser Notifications
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up Stylus CSS Preprocessor