Last updated on November 16th, 2019. Posted in HTML & CSS.
HTML elements versus attributes -- it's very common to mix up these two components of HTML. But, it's important to have a clear understanding of exactly what they are and their differences. A clear definition of HTML elements and attributes not only makes things much easier if you're speaking with others, but it also helps keep everything straight in your head. And the good news is, none of this is very difficult. Let's take a look!
In HTML, there are three common terms that are often used interchangeably: elements, tags, and attributes. But to really understand HTML elements versus attributes, it's important to get clear on exactly what these terms mean. Very simply, an HTML element is any object that sits on your page. An attribute provides further detail about a particular HTML element. That's it! That's the gist at least on the differences between HTML elements and attributes.
Where things get confusing is when the phrase "HTML tag" starts getting thrown around -- just what are HTML tags and where are they used? And further, what are HTML elements and what are they used for? And, what are HTML attributes?
To clear up all this confusion, let's break things down a little further. Take a look at the video below, where I've detailed everything out for you...
If video isn't your thing (and if you'd rather take a closer look at HTML elements versus attributes with some examples) then keep reading! Let's start with HTML elements...
So exactly what is an HTML element? And, what are they used for? As briefly mentioned above, an HTML element is an object that sits on a web page. What kinds of objects can sit on a web page? Things like paragraphs, images, headings and subheadings, navigation menus, bulleted lists, a footer...these are all examples of HTML elements.
So really, anything that sits on your web page is an element.
And, it's important to know that nearly all HTML elements are comprised of both a starting tag and an end tag. So for example, a paragraph might look like this...
<p>Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small, unregarded yellow sun.</p>
Notice that the paragraph element's opening tag starts with an open angle bracket, followed by the element (in this case, "p" for "paragraph") followed by a closing angle bracket. Then, we have the contents of the paragraph element -- the content that will actually appear on the page inside your visitor's web browser. Following that, the element closes with the closing paragraph tag.
So most HTML elements open, contain some content, and the close.
But not all HTML elements work like this. Some only have opening tags. A great example of this is an image. An image element looks like this...
That's it...just an opening "img" tag specifies an image. But what about the image itself? And what about things like the image's width, height, it's positioning on the page, and so on? We'll talk about that in a moment when we get to attributes.
But first, oftentimes you'll see HTML elements that are comprised of just a single tag also include a trailing forward slash, like this...
Including a forward slash in an HTML element that has just a single tag was a part of an earlier version of HTML (specifically XHTML). These days, leaving out this trailing forwards slash is fine. Or you can leave it in. Either will work, so don't get hung up if you see it.
Now, think of HTML elements as building blocks that are used to construct the raw structure of a web page. Because in fact, in web design, that's exactly what HTML elements do -- they stack on top of one another to form the structure of all web pages.
So, think of them as being like bricks or building blocks for your web page.
But now, what about HTML attributes? Let's take a look at these next...
So we know that HTML elements are simply objects that sit on your web page. And stacked together, they construct your web page. But what about HTML attributes...what are they?
An HTML attribute is simply a further definition of an HTML element. Said another way, attributes allow you to add additional properties to HTML elements.
For example, just a moment ago we talked about using
<img> to insert images. But maybe you want to specify dimensions for your image, positioning values, and other settings for your image, too. These can all be done with HTML attributes -- to further define the
Before we get to some examples, there's a few things you need to know about HTML attributes:
I hope this all makes sense. How about some examples of HTML attributes?
We could take our paragraph from earlier and further define it like this:
<p align="center">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small, unregarded yellow sun.</p>
So here, we're further defining our paragraph by changing it's alignment to
"center." Notice that the attribute appears in the opening paragraph tag, specifies the property (in this case,
align) and in quotes, some kind of value (here of course,
Now please note that what I've shown you here is just an example. In fact, this alignment method is far outdated -- I'm only using it here as a quick demonstration. These days, we'd use CSS (Cascading Style Sheets) to change a paragraph's alignment...but that's a whole can of different worms!
If you'd like to know more about how HTML and CSS work together (it isn't complicated!), take a look at Difference Between HTML And CSS – How HTML And CSS Work Together.
Want another example of HTML attributes?
How about our image? First, let's specify the graphic file that we'd like to load into our web page. We do that with the
src attribute, like this:
And of course, because the
<img> element only has an opening tag, the
src attribute simply goes inside it. Note too that the value specified in quotes for
src is the filepath to the image that will be loaded onto the web page.
What if we want to set some dimensions for the image? We can do that by adding more attributes to the
img element, like this.
<img src="https://www.yourwebsite.com/images/yourimage.jpg" width="600" height="200">
As with our paragraph alignment example above, using CSS to set dimensions for images is a much more modern approach -- again, this is just an example!
And notice too that these attributes follow the same structure of
value="property" and note that the order of the attributes doesn't matter, so long as they're separated by a space.
See? It's not so bad, is it?!
So that's what HTML attributes are. I hope all that makes sense. But what about HTML tags? What are HTML tags are and how are they're used? That's next...
We've covered HTML elements, and we know what HTML attributes are. And we've seen some examples of HTML elements and HTML attributes, too.
But what about HTML tags?
Well often times, the phrase HTML elements and HTML tags are used interchangeably. Many people use them when referring to the same thing.
But they're not the same thing.
As we discussed earlier, an HTML element is the entire structural block that sits on a page. HTML tags appear at the beginning and end of an HTML element.
<p align="center">Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small, unregarded yellow sun.</p> is an HTML element, whereas
</p> are HTML tags -- one's an opening tag, the other's a closing tag.
Now, you might be sitting there thinking isn't all this just semantics?! But it's actually very important to be clear on the differences between HTML elements and HTML tags...especially when you're trying to communicate with others -- especially web designers and developers.
Now, I'll leave you with one final thing...one final area where HTML and web design terminology gets messy.
When it comes to adding alt text, or alternative text, to images, the terminology can get messy. Alternative text is often used by screen reading devices for the visually impaired, and it also plays a role in SEO (Search Engine Optimization).
Where things get messy is, people will often refer to alt text as alt tags. You might here people say things like, "Make sure to add alt tags to all your images," or "Alt tags play a role in SEO." Even I do this!
But in HTML, there's no such thing as alt tags
But, for those who've been around the worlds of web design and SEO, they know that alt tags and alt text means the same thing.
Those who are more experienced in web design and building websites understand that these sorts of phrases and terms often get used imprecisely. But, by using the right terminology for the right component, it simply makes communication with others much easier. And, it tells others you know what the heck you're talking about, too!
And so now you're clear on HTML elements versus attributes, and how they work together!