[Show/Hide Right Column]

Krystel Gosselin

Krystel Gosselin
Read Blog
View Profile

The Basics of HTML - Part 2

Published by gosk02@uqo.ca on 2012-06-29

Please note that to prevent issues with your internet browser, I have added extra spaces to the tags. They would normally be written without the extra spaces before and after the brackets (< >).


Back when I knew little about HTML, I often imagined what a page of code would look like. What my mind conjured was a frightening picture that I thought I would never understand, and for a few years, it delayed my interest in learning anything related to HTML. Lines upon lines of code, for pages on end… It was quite the nightmare!



Figure 1- Source code taken from http://www.facebook.com, viewable by right-clicking on any web page and selecting “view page source”.


While there can be a lot of lines of code in HTML tags, they are much simpler than they appear to be. There is a strict structure to follow and very simple logic behind it all. Once these concepts have been grasped, the task becomes more about patience than skills!


The Basic Structure


Every HTML code starts with a basic structure. Think of the codes as the frame of your website.

< html >

< head >

< title > Title of the document < /title >

< /head >

< body >

< /body >

< /html >


Every blank HTML webpage starts off like a blank canvas. Let’s take a look.


< html > < /html >


This tag will essentially contain the structure and any additional tags added to the webpage. Anything added outside of these tags will not appear on the website, so it is important to make sure that they are the first and last tags you see on your page.


< head > < /head >


The head tag contains all the head elements of the webpage. This is where the < title > will be inserted.


< title > < /title >


The title of your website will be written between these two tags and is required for the website to function. This tag will make the title appear in your web browser, give a title in the favorite folder when added to favorites, and most importantly, display a title for the webpage in the search-engine results.


< body > < /body >


Aptly named, the body tag is where the action happens! Beyond the basic tags listed in this blog, this is where commands will be entered to give life to your website. Simply put, you will be adding tags within tags. This is called nesting.


Nesting will be useful to format your text. This is what will allow you to make your text bold, underlined, and italic. And this is just the beginning!


An important point to mention about tags is that they always come in pairs. During the lecture given by Loranger in our Rédaction Web class, most students forgot to add the matching pair of the tag to end their code. I noticed this as I was helping some of them with their HTML. It is also important to note that the second tag will always have a forward slash between the brackets and before the letters (i.e. < html > < /html >). This forward slash “tells” the HTML code to stop at that point. If your entire text is suddenly bolded or underlined, do not worry! It is probably due to a stray forward slash and this can easily be fixed.


For my next blog, I will talk about the other basic tags used in an HTML page. I will teach you how to create headings and paragraphs, add links to other websites, and how to add pictures.