Tags - what are they and how do you use them?

Published 24/05/2004 18:32   |    Updated 08/05/2008 17:50
What are Tags and how do I use them?



All your HTML files should begin with this tag, which tells the browser immediately that it's dealing with an HTML document. In much the same way, the closing tag, </html>, should be included at the bottom of the document to signal the end of your HTML code.



Your whole document including other tags goes in here.





Each of your pages will need opening and ending title tags (this dictates the title of the live window).


<title>John's Homepage</title>




Covers everything that appears inside the 'live' window of your page. Allows the designer to specify the colour of the page's background and to include background graphics. Colours must be specified in hexadecimal format. You alter the background colour using the instruction "bgcolor", and change the colour of background text using the "text" command. Again, don't forget to include a closing </body> tag when you've finished.


<body bgcolor="ffffff" text= "3344cc">

<body background="johns_cat.gif">



Inside Knowledge

Look out for US spellings in HTML. E.g. 'Color' is spelt the American way.




Indicates the beginning of a new paragraph. You should again use opening <p> and closing </p> tags.


<p>This is my first paragraph.</p>

<p>This is my second.</p>




This specifies the size and colour of your main text as well as the font itself. Size is controlled by increasing or decreasing the text's default size. For example, Size="+2" increases the font by two point sizes. Size="-2" decreases it by two. "Face" is used to change fonts, but you (and anyone else viewing the page) will need the correct fonts installed on your computer in order for it to display correctly.


<font size="+2">This is Dave's cat.</font>

<font size="-1" color="ff00ff" face="tahoma">Text. </font>

<font size="+4" color="ffff00" face="arial">Text. </font>



Essential text formatting


To make text bold, italic, or underlined use opening and closing <b>, <i> and <u> tags respectively.


<b>This text will display as bold</b>

<i>This text will display in italics</i>

<u>This text will be underlined</u>




This tag controls any graphics in the body of your page, such as photographs, logos, diagrams or charts. You can also use the <img> tag to add borders to your images. Border="1" generates a border one pixel thick and so on. N.B. <img> doesn't need a closing tag.


<img width="100" height="25" SRC= "johns_cat.gif">

<img border="1" SRC= "johns_house.jpeg">


Inside Knowledge

Make sure you store your graphics in the same folder as your web pages. That's where the browser will look for them.




« The Basics: HTML

Colours & Hexadecimal Format »


Please tell us how we can make this answer more useful.