Often times, marketers might get a technical term wrong. Sometimes when enough people call something by an incorrect name, that incorrect name becomes an accepted norm. It’s even possible that this incorrect name become so prevalent that the correct name sounds foreign and becomes lost.
This is the case with the image tag’s alt attribute, or you might know it more commonly referred to as the “alt tag” albeit incorrectly. If you don’t know what either are, read this basic beginner’s guide to SEO.
I like to start off by saying that it is okay to refer to it as an “alt tag” as long as who you are talking to knows exactly what you are talking about. However, for your reports or simply for providence, it might be a good idea to use the actual term “alt attribute” to prevent perpetuating the misnomer.
Okay, what is a “tag” really then?
A tag is a type of building block in HTML code. HTML code is the code your browser receives from a web server when you enter a URL address or click and open a web page. The browser translates this HTML code and follows its instructions to build and render a beautiful looking web page for you.
HTML code, and similarly XML, has a concept of nesting things inside other things, namely tags. To illustrate this, below is an example. Please note this is not real code.
<person>
<name>Joseph</name>
<gender>Male</gender>
</person>
Can you spot a pattern. We have a person indicated by a, you guessed it, opening <person> tag. Then inside that tag, there is an opening <name> tag. Then a name followed by a closing </name> tag. Then an opening <gender> tag with the word “Male” and followed by a closing </gender> tag. At the end, we have a closing </person> tag.
Please note I used the words opening and closing to refer to the tags. Tags are like boxes and you can put other boxes inside them: tags inside tags. There are also self-closing tags that are like boxes that you cannot put stuff into. They cannot hold anything and thus do not need a closing tag, hence the term self-closing.
HTML looks like the following. Please note that the opening <p> tag is simply a paragraph tag.
<p>
<img src="http://www.example.com/image.jpg" alt="Some image">
</p>
If you look closely, you will see that the image <img> tag is a little different.
First, as mentioned above, image tags are self-closing so they do not need a closing </img> tag. In our box analogy, this means the image tag is a box that cannot hold anything.
However, the immediate thing you’ll notice is that there is a src="[URL]" thing and an alt="[DESC]" put inside the <img> tag. This is called an attribute. This image tag has two attributes, a src attribute (source attribute) and an alt attribute (altenative text attribute).
What’s an “attribute”?
Going back to our box analogy. If tags are the boxes, then attributes are like the writings on the sides of the boxes. They contain information that humans do not see after the page is rendered. Attributes are instructions for the browser to use to help translate the HTML tags into a web page you look at. It can help format, style, or identify the box.
Let’s recap
I will leave you with this example:
<tag attributeA="" attributeB="" attributeC=""></tag>
To reiterate, tags are like boxes that you can put other tags or other boxes into. Attributes are the labels or writings on the boxes.
<box labelA="" labelB="" labelC=""></box>
Now, for our self-closing image tag and alt attribute.
<img src="" alt="">
As you can see, the “img” part is the tag and the “alt” part and for that matter the “src” part are attributes. I hope this helps clarify things up!
