HTML Tags

HTML stands for (H)yper(T)ext (M)arkup (L)anguage. It has certain tags and attributes defined, and is geared towards document display over the World Wide Web. HTML documents can be viewed in browsers such as Internet Explorer, Mozilla, Opera, and Safari. On this page, we will introduce the notion of tags and attributes.

Tags

Tags are elements of the HTML document used to specify how the document should be displayed by the browser. In HTML, each tag has its own specific meaning, which is (in general) common across all different browsers. In fact, you may think of this tutorial as an introduction to the tags that are commonly used in writing HTML.

Attributes

Attributes are associated with each tag to further define the tags.

The general syntax is as follows:

<tag attribute 1 = “value” attribute 2 = “value” … >

A couple of other notes before we dive into the tutorial:

– HTML tag codes are case-insensitive.

– Many browsers will ignore badly-formed HTML documents. In other words, it is often okay to have a tag without the corresponding closing tag.

Basic HTML Tags

The basic tags include <html>, <title>, <meta>, and <body>. We introduce each of the four in the following:

<html>

This tag is used to indicate that this is a HTML document. Most HTML documents should start and end with this tag.

<head>

This tag is used to indicate the header section of the HTML document, which typically includes the <title> and <meta> tags, and is not displayed in the main window of the browser.

<title>

This indicates the title of this HTML page. The title is what is displayed on the upper left corner of your browser when you view a web page. For example, right now you can see “Basic Tags: html, head, title, meta, body” there. That is the title of this page.

The title tag is important when it comes to search engine ranking. Many of the search engines pay special attention to the text in the <title> tag. This is because (logically) that words in the <title> tag indicate what the page content is.

<meta>

The <meta> tag information is not directly displayed when the page is rendered on the browser. Rather, this is used for the author of the HTML page to record information related to this page. Two common attributes are name and content. The <meta> tag used to hold great importance in search engine optimization, with authors carefully drafting what’s inside the tag to gain better search engine ranking, but recently its importance has been decreasing steadily.

<body>

The <body> tag includes the HTML body of the document. Everything inside the <body> tag (other than those within the <script> tag) is displayed on the browser inside the main browser window.

The <body> tag may contain several attributes. The most commonly used ones are listed below:

  • bgcolor: This is the background color of the entire HTML document, and may be specified either by the color name directly or by the six-digit hex code.
  • alink: The color of the links.
  • vlink: The color of the visited links.
  • topmargin: The margin from the top of the browser window.
  • leftmargin: The margin from the left of the browser window.

So, in general, all HTML documents have the following format:

<html>
<head>
<title>
Here is the title of the HTML document.
</title>
<meta name=” ” content=” ” />
… (there may be one or more meta tags)
</meta>
</head>
<body>
Here is the body of the HTML document.
</body>
</html>

HTML Format

This section includes the tags often used for formatting the HTML text.

<font>

The <font> tag is used to change the format of the text on the web page. The most important attributes are as follows:

  • face: The type of font. Common ones include “Time New Roman”, “Verdana”, and “Helvetica.”
  • size: This indicates the size of the text. This can be absolute (0 .. 6), or relative (“+1”, “+2”, … or “-1”, “-2” …)
  • color: This indicates the color of the text. Either the color name or the six-character color code may be used to specify color.

Below are some examples:

Example 1

HTML:
<font size=2 face=”Helvetica” color=red>This illustrates the attributes of the font tag.</font>

Display:
This illustrates the attributes of the font tag.

Example 2

HTML:
<font size=”+1″ face=”Verdana” color=AA5088>This illustrates the attributes of the font tag.</font>

Display:
This illustrates the attributes of the font tag.

<b>

The <b> tag will bold the text inside the tag.

<i>

The <i> tag will italicize the text inside the tag.

<u>

The <u> tag will underline the text inside the tag.

Here’s an example using <b>, <i>, and <u>:

Example 3

HTML:
This <b>example</b> shows how <i>important</i> it is to use <u>tags</u>.

Display:
This example shows how important it is to use tags.

Header Tags

The header tags <h1>, … <h6> allows us to place additional importance on the text within such tags. <h1> has the largest size, and <h6> the smallest. Many search engines put additional weight on the texts within the header tags.

Example 4

HTML:
<h1>This is h1 text.</h1>
<h2>This is h2 text.</h2>
<h3>This is h3 text.</h3>
<h4>This is h4 text.</h4>
<h5>This is h5 text.</h5>
<h6>This is h6 text.</h6>

Display:

This is h1 text.

This is h2 text.

This is h3 text.

This is h4 text.

This is h5 text.
This is h6 text.

<center>

The <center> tag causes all the text within the tag to be centered. An example is as follows:

Example 5

HTML:
<center>This is centered text.</center>

Display:

This is centered text.

<br>

The <br> tag indicates a line break. This tag is most often used by itself, without a corresponding closing tag.

<p>

The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often used by itself, without a corresponding closing tag.

HTML Table

This section lists the tags often used with HTML tables: <table>, <tr>, and <td>.

<table>

The <table> tag specifies the presence of a table. This is very often used in conjunction with the <tr> and the <td> tags. The following attributes are commonly used to define the properties of this table:

  • width: This specifies the width of the table. Can be specified in pixels or in relative terms (for example, 100%).
  • border: This specifies whether the table will have a border. The number indicates the thickness of the border.
  • cellspacing: The amount spacing between the cell wall and the cell border. The area enclosed by the cell walls are the maximum amount of area that text can be displayed in a cell.
  • cellpadding: The amount padding between cells and the each cell wall in a table.
  • bgcolor: This specifies the background color for this table. The color value may be specified as the color name or the six-character color code.

<tr>

The <tr> tag specifies the presence of a row. The following attributes are commonly used to define the properties of this row:

  • bgcolor: This specifies the background color for this row. The color value may be specified as the color name or the six-character color code.
  • height: This specifies the height of the row.
  • rowspan: This specifies the number of rows this particular row occupies.

<td>

The <td> tag specifies the presence of a column. Columns are specified within each row. The following attributes are commonly used to define the properties of this column:

  • valign: This specifies how the text is vertically aligned inside the column. Common values include “top”, “middle”, and “bottom.”
  • width: This specifies the width of the column. Can be specified in pixels or in relative terms (for example, 50%).
  • bgcolor: This specifies the background color for this column. The color value may be specified as the color name or the six-character color code.
  • colspan: This specifies the number of columns this particular column occupies.

Example 1

HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1 Element 2 Element 3
Element 4 Element 5 Element 6

Example 2

HTML:
<table border=1 width=500>
<tr><td width=200>Element 1</td><td width=150>Element 2</td><td width=150>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1 Element 2 Element 3
Element 4 Element 5 Element 6

Example 3

HTML:
<table border=1 width=500>
<tr bgcolor=red><td width=200><b>Element 1</b></td><td width=150>Element 2</td><td width=150>Element 3</td></tr>
<tr><td bgcolor=55ff55>Element 4</td><td>Element 5</td><td><i>Element 6</i></td></tr>
</table>

Display:

Element 1 Element 2 Element 3
Element 4 Element 5 Element 6

Example 4

HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td colspan=2>Element 4</td><td>Element 5</td></tr>
</table>

Display:

Element 1 Element 2 Element 3
Element 4 Element 5

Example 5: cellspacing and cellpadding attributes.

HTML:
<table border=1 cellspacing=10 cellpadding=0>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1 Element 2 Element 3
Element 4 Element 5 Element 6

Example 6: cellspacing and cellpadding attributes.

HTML:
<table border=1 cellspacing=0 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1 Element 2 Element 3
Element 4 Element 5 Element 6

Example 7: cellspacing and cellpadding attributes.

HTML:
<table border=1 cellspacing=10 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1 Element 2 Element 3
Element 4 Element 5 Element 6

HTML List

This section lists the tags often used with HTML lists: <ol>, <ul>, and <li>.

<ol>

The <ol> tag specifies that the following list is ordered.

<ul>

The <ul> tag specifies that the following list is unordered.

<li>

The <li> tag lists each item, whether ordered or numbered. Note that each item is indented.

Example 1: Ordered List

HTML:
<ol>
<li>Ordered list 1.</li>
<li>Ordered list 2.</li>
</ol>

Display:

  1. Ordered list 1.
  2. Ordered list 2.

Example 2: Unordered List

HTML:
<ul>
<li>Unordered list 1.</li>
<li>Unordered list 2.</li>
</ul>

Display:

    • Unordered list 1.
    • Unordered list 2.

HTML Hyperlink

<a>

      The essence of an HTML document lies in the first two words: (H)yper(T)ext. In other words, it is the ability to link to other documents that makes HTML unique. How do HTML documents link to other documents? It does so via the <a> tag. The attributes for the <a> tag are href and name. Below we show an example for each:

Example 1: Link to an external document.

HTML:
<a href=”sample.html”>This link</a> takes you to a document called “sample.html.”

Display:
This link takes you to a document called “sample.html.”

Example 2: Link to an anchor within the same document.

HTML:
<a href=”#atag”>This link</a> takes you to a pre-determined location on the same page.

Display:
This link takes to a you to a pre-determined location on the same page.

Note that you may also link to an anchor within an external document.

 

HTML Image

<img>

The <img> tag is used to embed an image on the HTML document. The attributes are as follows:

  • src: The file path to the image file.
  • width: The width of the image, in pixels.
  • height: The height of the image, in pixels.
  • alt: The text the browser will display when visitors mouse over the image. Search engines often places more weight on the text in the alt attribute.

HTML Frames

This section introduces the tags related to HTML frames: <frameset> and <frame>.

<frameset>

The <frameset> tag specifies the number of columns/rows on a frame. Note that you may embed a frameset within another frameset. The attributes include:

  • cols: Specifies the number of columns, as well as the width of each column. For example, cols=”30%,70%” means that there will be two columns, the first column occupies 30% of the available space, while the second column occupies 70% of the available space.
  • rows: Specifies the number of rows, as well as the width of each row. For example, rows=”40%,60%” means that there will be two rows, the first row occupies 40% of the available space, while the second row occupies 60% of the available space.

<frame>

The <frame> tag specifies the properties within a particular frame. The attributes include:

  • src: This attribute specifies the HTML document source.
  • marginwidth: The margin on the left and right side of the frame.
  • marginheight: The margin on the top and bottom of the frame.
  • scrolling: This attribute specifies whether users may scroll up and down within this frame. The possible values are {yes|no|auto}.
  • noresize: This attribute specifies whether users may resize the frame.

Note that search engines typically do not like the use of the frames. Therefore, please consider using the frame feature carefully.

Example 1

HTML:
<frameset cols=”50%,50%”>
<frameset rows=”100%”>
<frame src=”frame1.html”>
</frameset>
<frameset rows=”50%,50%”>
<frame src=”frame2.html”>
<frame src=”frame3.html”>
</frameset>
</frameset>

Display:


--------------------------------
|              |               |
|              |  frame2.html  |
|              |               |
|  frame1.html |---------------|
|              |               |
|              |  frame3.html  |
|              |               |
--------------------------------

HTML SEO Considerations

The table below shows the importance of each HTML tag in terms of search engine optimization.

 

Tag Name
Essential
Somewhat Important
No Influence
Detrimental
<h1>…<h6>
l
     
<title>
l
     
<b>
 
l
   
<i>
 
l
   
<img>
 
l
   
<meta>
 
l
   
<u>
 
l
   
<a>
   
l
 
<body>
   
l
 
<br>
   
l
 
<center>
   
l
 
<font>
   
l
 
<head>
   
l
 
<li>
   
l
 
<ol>
   
l
 
<p>
   
l
 
<table>
   
l
 
<td>
   
l
 
<tr>
   
l
 
<ul>
   
l
 
<frame>
     
l
<frameset>
     
l