[Show/Hide Right Column]

Krystel Gosselin

Krystel Gosselin
Read Blog
View Profile

HTML Part 4: More Useful Tags

Published by gosk02@uqo.ca on 2012-07-11

In this blog, we will see the last of the basic HTML tags required to build a webpage. While I chose what I considered essential, there are a lot more tags to learn and discover. To that end, I will list a few online sources and books that I found particularly helpful at the end of this blog.


Today’s HTML content includes hyperlinks, images, acronyms and abbreviations.


< a href=" " > < /a >


The hyperlink and image tags are slightly different than the ones we’ve seen so far. While the basics remain unchanged, there is an added element in the opening tag. This is best shown with an example. Here is the HTML code used to link to the Google homepage:


< a href="http://www.google.com/">Google homepage< /a >


As you may have noticed, the opening bracket has more content than usual. This is called the href attribute, which serves to create a link to another document. It can be used to link the user to another webpage, or to a page on the same website. This feature is particularly useful to lead the user to a page where more detailed information can be found. It can also prevent additional content from being written or making the page too dense with information. Text can also be added between the closing and opening brackets, making it appear as a hyperlink.


< img src=" "/ >


Like the line break tag, the image tag does not come in pairs, but it is still very important to add the forward slash before the closing bracket for the picture to display correctly.


To put a picture on a website, it first needs to be hosted on another website. This basically means that a picture cannot be directly uploaded from a hard drive and onto the webpage. There are several free websites that makes it possible for users to upload pictures for the specific purpose of hosting them, thus allowing them to post them on either social media websites or their own webpage.


Here are a few of those websites:

-          Photobucket : http://photobucket.com/(external link)

-          Flickr: http://www.flickr.com/(external link)

-          ImageShack: http://www.imageshack.us/(external link)

-          Imgur: http://imgur.com/(external link)


These are all websites I have used in the past. They are all user-friendly, but there are a lot more at your disposal on the World Wide Web!


Once a picture has been uploaded, the website will provide a link. It is important to note that it is not the link to the webpage where the picture is displayed! It will be another link that will specify the source of the picture to the image tag. Here is an example:


< img src="http://www.example.com/picture.jpeg"/ >


Alternate text can also be added to a picture. This text appears when the cursor is placed on top of an image for a few seconds. It will usually show up in a beige box and can take the form of a short description of the picture, a caption, or its title.


To do so, use the same tag as earlier:


< img src="http://www.example.com/picture.jpeg"/ >


Now add the following code after the link and before the forward slash:


alt="this is where the alternate text goes"


The final result should look like this:


< img src="http://www.example.com/picture.jpeg" alt="this is where the alternate text goes"/ >


The textbox and the font size for the alternate text are usually quite small, so it’s a good idea to keep the text short and to the point to make it easy to read.


< acronym > < /acronym > < abbr > < /abbr >


At the end of the lecture we received in our Rédaction Web class, the lecturer gave us one last HTML tag he found particularly useful for us.


An abbreviation or an acronym must be spelled out upon its first use. But on a webpage, information can end up being scattered and make it less accessible for users.


This HTML tag will have the same effect as hidden text with an image: as the user places his cursor on top of the abbreviation or acronym, an alternate text box will appear with the full spelling. This is a good accessibility feature and helps prevent the users from constantly scrolling or searching for the full spelling of the word in the text or website.


Here’s what it will look like.




< acronym title="Conseil de recherches en sciences naturelles et en génie" >CRSNG< /acronym >




< abbr title="Boulevard">blvd.< /abbr >


And there we have it, the basics of HTML! This is where the fun begins.


HTML takes a lot of patience, especially at the beginning. Even when writing every tag carefully, you are bound to make mistakes. I made plenty myself! Always remember that these mistakes can easily be fixed.


Here are the websites I mentioned earlier. They were very helpful in writing this blog because they provided a lot of interactive content specifically designed to help users learn through practice:


-          W3Schools.com, the world’s largest web development site: http://www.w3schools.com/(external link)

-          30 Days to Learn HTML & CSS: http://learncss.tutsplus.com/(external link)

-          HTML.net: http://www.html.net/(external link)


As for books, I recommend the following two:


-          HTML for Dummies, by Ed Tittel and Stephen J. James, 1997 (available on Amazon)

-          HTML & XHTML : The Definitive Guide, by Chuck Musciano and Bill Kennedy, 2006 (available on Amazon)


But these are just a few pages out of thousands written about HTML. My suggestion for those interested in picking up a book would be to stop by the local library and see that they have on their shelves!


I hope these blogs helped some of you understand the concept of HTML. To me, its logic makes it feel like another language altogether. I had a lot of fun writing my first webpage using HTML during the lecture in class. Seeing the elements come to life as I got the codes right, fixing and understanding my mistakes and even taking a few initiatives of my own felt very satisfying! I can only hope you will all feel the same when you attempt the same experiment.


Thank you for reading!