Basic HTML Commands

Hyper Text Markup Language

Firstly a brief background

The commonly used HTML tags referred to below are those applicable to HTML4. Click here to "dive" into HTML5.

 

HTML Tags

The first thing to remember about HTML tags is that most of them are used in pairs, ie., they have an opening and closing tag. Whenever you use a tag - say <span> - you must also close it off with another tag - in this case, </span>. Note the slash - / - before the word "span"; is what distinguishes a closing tag from an opening tag. A few of the HTML tags (br p li image hr) do not need a closing tag. All HTML commands are enclosed in <> braces. These <> brace sequences are what the Internet browser uses in determining how a page should be displayed.

All special HTML character entities and foreign characters are enclosed in & ; braces e.g. &lt; will display the < character.

Use of colour in the HTML commands. In the HTML tags listed, items shown in green are HTML command tags. Items in blue then illustrate actual HTML coding with the results of that coding shown immediately after it. Note, HTML command tags may be entered in either upper or lower case (or a combination of upper and lower case).

 

Click here for more information on these commands.



Text Tags    Return to Top of Menu

<center></center>
Centers a portion of text

<center>This text is centered</center>
This text is centered

<hl></hl> (h and the number one)
Creates the largest headline

<hl>Biggest Heading</hl>

Biggest Heading



Please note HTML tags can be combined. In this next example the center and the h1 tags are combined. Also, note that the closing HTML tags must be in the opposite order (work from inside out).
<center><hl>Biggest Heading Centered</hl></center>

Biggest Heading Centered


<h2></h2> (h and the number two)
Creates the next biggest headline. Heading Numbers range from 1 to 6. One is the largest and six is the smallest.

<h2>Next Biggest Heading</h2>

Next Biggest Heading


<h6></h6> (h and the number six)
Creates the smallest headline

<h6>Smallest Heading</h6>
Smallest Heading

<b></b>
Creates bold text

<b>Bold Print</b>
Bold Print
<i></i>
Creates italic text

<i>Italic Print</i>
Italic Print
<font size=?></font>
Sets size of font, from 1 to 7.

<font size="3">Example of size 3</font>
Example of size 3 font
<span></span>
Alternative span command that changes Font size and, optionally, Font family

<span style='font-size:16pt;font-family:Arial'>This is an example of a span that changes the font size to 16pt and the font family to Arial.</span>
This is an example of a span that changes the font size to 16pt and the font family to Arial.
<font color=?></font>
Sets font color, using name or hex value. Note that the color and size tags may be set into the same command.

<font color="red" size="2">Red text size equal 2</font>
Red text size equal 2

<font color="#ff0000" size="2">Same using hex color codes</font>
Same using hex color codes

Note: Good site for HTML Color Codes.
<pre></pre>
Preformatted text - the text is displayed the same way it is typed. Sometimes this is used to get text to align in columns. However, the table command (below) is a much better command to use to align text in columns.

<pre>
This is an example of the pre command.

When you use this command type the
text exactly as you wish it to appear.

Column 1   Column 2   Column 3
  item1      item2      item3
  item4      item5      item6
</pre>
<tt></tt>
Creates teletype, or typewriter-style text

<tt>This is an example of teletype text.</tt>
This is an example of teletype text.
<cite></cite>
Creates a citation, usually italic

<cite>This is an example of a citation.</cite>
This is an example of a citation.
<br>
Inserts a line break (line feed).

<a href="URL"></a>
Creates a hyperlink.

The URL can be either of two formats.
  • First format: If the link is to a page external to your web site then the link must be preceded by http://. For example http://www.yahoo.com.
     
  • Second Format: If you were linking to a page hosted at your own domain (i.e. on your own website), the http://www.yourdomain.com portion of the URL could be omitted. For example if the URL was http://www.yourdomain.com /example/images/mylink.htm, where yourdomain.com was your own website you could reference it as /example/images/mylink.htm.
A link to <a href="http://www.google.com"> google.com</a>.
A link to google.com.
<a href="mailto:EMAIL"></a>
Creates a mailto link


Send an email to <a href="mailto:steve@swcs.com.au"> steve@swcs.com.au</a>.

Send an email to steve@swcs.com.au.

Formatting Blocks    Return to Top of Menu

<div>
Creates a new division
<p>
Creates a new paragraph. Inserts an extra line feed prior to the beginning of the text.
<p align=?>
Aligns a paragraph to the left, right, or center
<blockquote>
</blockquote>

Indents text from both sides

<blockquote>This is an example of a blockquote.</blockquote>
This is an example of a blockquote.

<ol></ol>
Creates a numbered list

<ul></ul>
Creates a bulleted list

<li>
Precedes each list item, and adds a number

Numbered list.

<ol>
<li>Line 1.
<li>Line 2.
<li>Line 3.
</ol>
  1. Line 1.
  2. Line 2.
  3. Line 3.



Bulleted list.

<ul>
<li>Item 1.
<li>Item 2.
<li>Item 3.
</ul>
  • Item 1.
  • Item 2.
  • Item 3.


Graphical Elements    Return to Top of Menu

<img src="URL">
Adds an image. Please note the URL is the same format as described in the <a href="URL"> command above.
<img src="URL" align=?>
Aligns an image: left, right, center; bottom, top, middle
<img src="URL" height=? width=?>
Aligns an image with the height and width set. Setting the height and width of the image allows the browser to load the page fractionally quicker and without "jiggling" the page since it knows beforehand how much space to allocate to the image.
<img src="URL" border=?>
Sets size of border around an image

Insert the swcs logo and have it left aligned with no border and with height and width set.
Note: The align, height, width, and border tags are optional.

<img src="https://www.swcs.com.au /swcslogo.gif" height="54" width="65" align="left" border="0">



<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule, in percentage or absolute value
<hr noshade>
Creates a rule without a shadow

Insert an unshaded ruler of height 4 and width 300.

<hr size="4" noshade width="300">



Tables    Return to Top of Menu

<table></table>
Creates a table
<tr></tr>
Sets off each row in a table
<td></td>
Sets off each cell in a row
<th></th>
Sets off the table header (a normal cell with bold, centered text)

Table Attributes
<table border=#>
Sets width of border around table cells
<table cellspacing=#>
Sets amount of space between table cells
<table cellpadding=#>
Sets amount of space between a cell's border and its contents
<table width=# or %>
Sets width of table — in pixels or as a percentage of document width
<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)
<td width=# or %>
Sets width of cell — in pixels or as a percentage of table width
<td colspan=#>
Sets number of columns a cell should span (default=1)
<td rowspan=#>
Sets number of rows a cell should span (default=1)
<td nowrap>
Prevents the lines within a cell from being broken to fit

Three further notes re styles in Heading layouts

 

With all due appreciation to InfoSports which provided much of the background to this page