Home > Tutorials > HTML/CSS/JS Tutorials > Proper Use of Heading, ALT & Title Tags

Proper Use of Heading, ALT & Title Tags

Improve web design and search engine performance all in one easy step! Believe it or not, it is possible, easy, and really straightforward. There are 3 extremely useful tags and attributes that most people overlook, or do not take advantage of properly. These are the alt tags, title attributes in links and heading tags. The reason you want to spend some time focusing on these 3 facets of your web site is simple. Two of them make the web site easier to understand and navigate, for people and the search engines. The third one is much cleaner than the <font size= > tags, and works really well for key phrases and terms within the search engines. This article deals with the merits and value of each of these mostly misused, or ignored opportunities.


The first opportunity is the one that is most often used, and misused: The alt tag. Alt tags are comments that should be used whenever you add a graphic, or image to a web page. Pictures are worth a thousand words to you and me, but zero to a search engine. An alt tag should be a little bit of short, descriptive text which helps any user (and search engine) understand what the reference is pointing to. If you are not aware of what an alt tag looks like, here’s an example:


<a href="http://www.rapidpurple.com/"></a>
When you move your mouse over the graphic, words appear. The words tell people what the graphic refers to, what it is about, and where it leads to. Internally, if you had a hardware store, you could use an image of a power tool link to a “tools” section, with the words “Tools & Power Tools” in the alt tag. It may be obvious, but most people don’t take advantage of this opportunity. Most people don’t even have alt tags attached to their images, or have alt tags that look like this – alt=”” – not much good, they’re blank. That’s all the search engines, and some old web browsers will see – blank space.Alt tags also afford you an opportunity to give the search engines more meaningful content to work with. If you have a graphics rich web site, there’s very little to no text for the search engine spiders to use to analyze your site. If you attach a relevant alt tag to each image however, the search engines will read them as your textual content, and your web site will show up in relevant searches. Even if your website is content rich, the alt tags allow you to reinforce what is highly important, the key terms, within the content. Here’s the key – use relevant terms. Don’t just put “About Us”. Use descriptive key terms, such as “About Acme Power Tools”.


Next, we have the Heading tags. Often, when web designers are building pages they use <b> tags, and <font size= > to emphasize the page heading, and subheadings for each section. Whenever you get the chance, use <h> tags instead. There are 5 different <h> tags. The largest – <h1> and <h2> – should be used for the major title on each page, and then the next three – <h3>, <h4> and <h5> – for subheadings. The smallest, <h5>, will look just like regular <b> bold text on a page.
So why use them? The single most important reason to use these, aside from consistency of output, is for the search engines. The search engines weight different text within a page differently. We have found that terms used in <h> tags are weighted heavier than regular text. This doesn’t happen with the <font size= > attribute. The larger the <h> text is (1 being largest, and 5 smallest size), the more weighty or important the key terms in the heading are viewed as being with respect to the overall document. Use the terms in these tags judiciously. Especially in the larger sizes. The search engines give these <h> tags weight, because logically, the header for a page, and for each section of a page conveys the concept of what the entire document’s focus is oriented towards. For this reason be very sure that you only use terms which you intend the web page to be found by.


Different from a <title> tag, this piece of code really should be used by everybody, without exception, just for the sake of being courteous. An example of a title attribute looks like this:


<a href="http://www.rapidpurple.com" title="Rapid Purple - Webmaster Articles and Resources">Rapid Purple</a>
Note the title=”…” segment in the hyperlink. Most people never use this attribute. The reason you should use it is simple: It’s there for the blind. Text to speech browsers read the title attributes aloud, so that people who cannot see can still know what the page being linked to is about. If you are linking to a web page about John Deere Tractors, have your title attribute in the link say so.

Using this attribute also has the benefit of adding search engine related content. After all, the terms you use will be highly relevant and specific; you have just added one more instance of them to the page. Plus, it’s one more thing in the design of the web site that will have been done right from the perspective of the search engines. The search engines look favorably on web sites that have taken the time to get all the details right. This simple addition to your web page may do little, or it may give your web site the push it needs to move to the next level in search results.


The three features discussed in this article are all simple and easy to implement throughout a web site. If you only do one thing, make sure it’s the title attribute: Anyone who is sight impaired will thank you. Getting all three right will help make your web site stand out, and your work stand out as that of a good web designer. They will also contribute to better search engine performance for your web site.

About Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Check Also

Installing Gnome Software Center on a Chromebook

Linux is pretty much all the rage these days when it comes to Chromebooks – ...

Like every other website, this site uses cookies to analyze our traffic. Cookies may also be utilized by our advertisers and partners. By using this website you agree to the use of said cookies. More Information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings, continuing to navigate past this message, or you click "Accept" below then you are consenting to the use of cookies on the Rapid Purple website.