HTML Tag Definition – Table of Contents
Table of Content
- Simple Link
- Simple Paragraphs
- Html Title as Tooltip
- HTML Alt attribute
- Hyperlink tags
- List Group and Lists
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
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.
HyperLink Tag <a href=”#”>Click here</a>
<a href="https://cnn.com" alt="A click here will take the user to the cnn news site">cnn informational news site</a>
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=”#”>
A demonstration of the visible source code above is down below.
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.