[Show/Hide Right Column]

Krystel Gosselin

Krystel Gosselin
Read Blog
View Profile

HTML Part 3: Useful Tags

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

In part 2 of my HTML blog, we looked at the tags that make up the structure of a webpage. The next set of tags will enable you to input elements that will bring the structure to life. This includes heading tags, paragraph tags, line break tags and text formatting tags.


< h1 > < /h1 >


The heading tag needs to be placed before a paragraph, or a new area of content. There are six levels of headings with different size fonts, based on the needs of the webpage. The first, < h1 >, is the largest size, and level six, < h6 >, is the smallest. The most important headlines should be placed in < h1 > tags. Please note that these tags should not be used to make the text bolder or larger within a paragraph or in any text other than the heading.



Figure 1 - source


< p > < /p > and < br / >


Paragraphs are a basic component of any webpage. To make the text big and bold, paragraph tags will need to have nested HTML elements (< i >< b >example of nested elements< /b >< /i >) to have the same effect. This can make the HTML code look complicated depending on the amount of formatting that needs to be done. In HTML 4.0, a paragraph tag can be added without the closing tag (< /pr > without causing an error. However, I will explain a bit further why I advise against this practice.


Rather than adding a new paragraph, a < br / > tag can be used to put a line break in the text. Unlike the rest of the HTML code we’ve seen so far, this tag is the only one that doesn’t require a closing tag to end the code in HTML 4.0 and HTML 5.0.


In some of the HTML tutorials that I have seen, the line break tag was written without the forward slash. This is because some types of HTML (HTML 4.0) do not require a closing tag to make the code function (the paragraph and the line break tags are examples of this). There are, however, two reasons why I advise you to include a closing tag in the HTML code:


1-      Making a habit of closing the tags will lower your chances of forgetting one.

2-      XHTML, a more recent type of HTML code, requires all tags to be closed, including the line break and paragraph tags.


For those who haven’t heard of XHTML, or HTML 5, worry not! I will write about the different kinds of HTML in an upcoming blog.


Format tags < strong > < /strong >, < em > < /em >, < small > < /small >, < sub > < /sub >, < sup > < /sup >


For those already familiar with basic HTML, either from forums or message boards with the HTML enabled, some of these tags might seem unfamiliar.  Back in the days of HTML 4.0, the formatting tags that were used were < b > for bold and < i > for italics. While these tags still work and are sometimes used while writing HTML code, the tags listed above are more current. The W3School website has a small article about the formatting tags:


Often, < strong > renders as < b >, and < em > renders as < i >.

However, there is a difference in the meaning of these tags:

< b > or < i > defines bold or italic text only.

< strong > or < em > means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, it is possible for a text highlighted with the strong feature to become cursive instead of bold.


Philippe Loranger taught us the functions of the new tags I have discussed today. According to him, older tags will soon vanish from use. I found it important to explain the differences between the old and new tags.


Here is an example of the formatting tags I listed above and their effect on the text format. In my upcoming blog, we will see the tags used to input hyperlinks, images, bullet lists, acronyms and abbreviations.




Figure 2 and 3- source