HTML - Tagged and Bagged

HTML isn't that difficult to learn. Here are the most commonly used tags and what they do.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This tells the browser what type of HTML is being used (HTML 4.01), the coding style (strict) and the language the code is written in (English). There are 3 types of doctypes - HTML Transitional, HTML Strict and HTML Frameset. Transitional is outdated and the frameset doctype is only used for framed pages.
<html></html>
This tells the browser that the page is written in HTML.
<head></head>
This tag begins the invisible information that the browser will need to create the page, and information for search engines.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
This indicates what type of characters (letters/numbers) are being used for the content.
<meta http-equiv="Content-Language" content="en-gb">
This indicates what language the content is written in, in this case, British English, as opposed to American English.
<meta name="Keywords" content="word, word, word, 'more than one word', word, 'more words', word">>
The Keywords content is used by search engines to index your page. The words included in the list must be on your page. Any description that contains more than one word needs to be enclosed in single quotations (').
<meta name="Description" content="A description of your page in sentence form.">
The sentence description of your web page. You can have more than one sentence in it, too.
<title></title>
This puts the title of your page on top of the browser window.
<style></style>
This is how you put CSS information directly onto your page. The CSS is written between the tags in exactly the same manner as you'd put CSS on a separate page.
<link rel="stylesheet" href="mycss.css" type="text/css">
This is another way to add CSS information to your page. This links your .css page to the HTML page. CSS pages cannot contain any HTML at all, not even a doctype.
<body></body>
This is where your page information goes. This is the part of the page that is shown on the screen.
<p></p>
This is the main way of putting text on your HTML page. It creates paragraphs of text, with one line in between paragraphs.
<img src="myimage.jpg" alt="A picture I made for you." height="100px" width="100px">
This is how images are added to your page. The 'alt' attribute is used for adding text information for text readers and for describing the contents of an image in case it doesn't show up on the page. The 'height' and 'width' measurements are given in pixels and tell the browser to leave 'this amount' of space for the image.
<a href="mypage.html">My Page</a>
This is how links are created. They can also be written as "../folder/mypage.html" (when the page is on the same site but in a different folder to the original page), or they can be written as "http://www.mysite.com" (to link to another site on the Internet).
<a name="anchor1"></a>
This is how anchors are added to a page. You link to them by writing <a href="#anchor1"> or, if the anchor is on a different page, <a href="notherpage.html#anchor1">
<blockquote></blockquote>
This creates a paragraph that is indented at both margins.
<br>
This tag puts the text that follows it on a new line without creating a new paragraph.
<h#></h#>
This tag creates a 'headline'. The # is replaced by a number between 1 and 6. The larger the number, the smaller and less important the text. Search engines index headlines as well as content and meta tags. You'll have a better search engine placement if your meta tags include the content of your headlines.
<hr>
This creates a horizontal line or rule. The width, colour and height can be adjusted using CSS.
<div></div>
The contents of this tag are set as a separate section or block of the HTML page. It is most often used in conjunction with CSS layouts ("Look Ma! No Tables!")
<span></span>
This tag is similar to the <div>. The main difference is that it is an inline section that is primarily used to change formatting for a small section of a larger one. You can have a <span> tag inside a <div> tag, but not the other way around.
<ol></ol>
This opens an ordered or numbered list.
<ul></ul>
This opens an unordered or bulleted list.
<li></li>
This tag is used to add items to either of the above lists.
<table></table>
This is the opening tag of a table.
<tr></tr>
Browsers read tables top to bottom, left to right, so the first thing you will need to do is create a table row.
<th></th>
This tag centers and makes bold the contents of the cell. It is also something else that search engines will look for. Don't use the 'table header' for the entire contents of a table, only for the main headers.
<td></td>
This tag creates the individual cells of the table, dividing the rows into columns.
<td rowspan="#";>
There will be times when you want one or two cells to be larger than a single row. The <td> is written like this, with the # being the number of rows you want the cell to 'cover'. Make sure that you have the same number of rows in each column, otherwise your table will not appear as it should.
<td colspan="#">
Similar to the rowspan, the colspan combines cells in a single row to be combined, or merged. Again, the # refers to the number of cells/columns the first cell is to span. As well, you'll have to make sure that you have the same number of columns in each row.
 
Special Codes
Symbol Code Symbol Code
<  > &lt;   &gt; & &amp;
non-breaking space &nbsp; " &quot;
© &copy; £ &pound;
¢ &cent; ° &deg;