HTML Tag Definition Secrets

HTML Tag Definition Secrets

by Mad Programmer / On / In html
Spread the love

HTML Tag Definition – Table of Contents

Table of Content

We are going to examine a dozen popular html attributes for things that a web designer would typically do each and every hour. Things such as creating links, images, alt tags that might cause the designer or programmer to use html tag definitions.

In order to keep this simple, we are not going to put the entire html code here over and over. We may just put the code snippet and high-light the keywords with a different color.

Hyperlinks enable the user to move from page to page or within the same page 

<a href="https://yahoo.com">Click here to look at Yahoo News>/a>

The <a stands for anchor and the href is the link that we will go to if we click on that link. Click here to look at Yahoo News

Simple Paragraph

Just enclose the text within an opening and closing ‘p’ tag.
Open tag <p> and closing tag </p>

<p> Enclosing this paragraph </p>

Simple HTML Title as ToolTip

Enclosing this paragraph – hover over this and watch the tool tip 

<p title="This can act as a tool tip"> 
Enclosing this paragraph - 
<strong>hover over this</strong> and watch the tool tip </p>

The above may have been a little confusing, but did you notice that we used the title=”this is a tool tip” as an attribute of the “<p>” opening tag? This is not often used with html tag definitions and it is thought that a lot of designers simply don’t know.

HTML ALT Attribute

The “alt” attribute can also be used in this way however the tag is invisible unless you have the special reader. The alt tag is used by search engines but its real purposes was/is to help the visually impaired to navigate a website with the use of an electronic aid that looks for these hints on a web page. The alt tag is amongst the more heavily used html tag definitions for positively affecting seo. It is likely that web designers have forgotten that its original use was not really for seo at all.

Let’s create an alt tag for both a link and an image, then we will merge the two.

<a href="https://cnn.com" alt="A click here will take 
the user to the cnn news site">cnn 
informational news site</a>

cnn informational news site – notice no tooltip

cnn informational news site – notice there is a tooltip – just hover here

This time we will try to achieve 3 things

  • Its Going to Be a rather long piece of code
  • A hyper link to the Aljazeera News site
  • Hyper link using the image of an Aljazeera logo
  • Implement an alt tag and title tag that work during the hover


HTML tag definitions – <img src=”#”>

html tag definition shown in this image of a 3rd party code editor. Code is shown indented and in different colors for special keywords

A demonstration of the visible source code above is down below.

Click here takes user to Aljazeera News site

HTML Attributes – What We Have learned

  • Since HTML Code is basically short and Long paragraphs, its easy to make a mistake
  • Use an editing environment like this one because its interactive
  • Interactive means the Preview screen is always in sync with your edit screen changes
  • Review of What was Done
  • Hyperlinking a href
  • Title Attribute as ToolTip p title=’Tooltip here’
  • img src=”” Inserting an image
  • Hyperlinking and Inserting an image with a Tooltip ‘a href’
  • Would suggest for Homework that you type this code into your editor and test to see that it works


There are many more html tag definitions from time to time, we will come back and update the list of html tag definition listings here.

Go to top of html tag definition document.

Top