Common XHTML tags

Essential tags

  • <html>
  • <head>
  • <meta>
  • <link>
  • <title>
  • <body>

<html>

The first tag you should know for HTML!
Nothing fancy, just open it at the top of your page and close it at the end.

Only thing to note is that XHTML requires an attribute to be present in the html tag (attribute name: "xmlns" and value: "http://www.w3.org/1999/xhtml").

<html xmlns="http://www.w3.org/1999/xhtml">
  ....
</html>

<head>

One of those basic tags that you'll have to use. Fairly basic, just put this after the html tag and put the relevant things in it (meta, link and title mainly).

<meta>

Used for additional information about the page for the browser.

    Common uses for the meta tag are:
  • Define description for search engine
    <meta name="description" content="INSERT DESCRIPTION HERE" />
  • Include keywords for search engines
    <meta name="keywords" content="WORDS/PHRASES SEPARATED BY COMMAS" />
  • Define page content type
    <meta name="Content-type" content="text/html; charset=utf-8" />
  • Force page reload after XYZ seconds
    <meta http-equiv="refresh" content="XYZ;url=NEW_URL" />

<link>

Used to link in extra files. Mainly used to link in external CSS style sheets, there are other uses but none particularly noteworthy.
<link rel="stylesheet" type="text/css" href="URL_OF_CSS_FILE" />

<title>

Very easy to understand tag, just sets the title of the web page (displayed by the browser as the window title).
<title>TITLE OF WEB PAGE FOR BROWSER</title>

<body>

Very similar to the head tag. Open this after the head tag and put the body of the web page here (stuff that will be seen).

General tags

  • <br>
  • <hr>
  • <img>
  • <a>
  • <hN>
  • <p>
  • <em>
  • <strong>
  • <div>
  • <span>
  • <sub>
  • <sup>

<br />

This just inserts a line break into the page, remember that HTML is whitespace tolerant. So that a newline in the page source will NOT be interpreted as a newline to be displayed. Nothing fancy but quite useful.

<hr />

Nothing fancy, just puts a horizontal rule.

<img>

A fairly essential tag, this includes an image into the web page. Nothing too complex but there are a few attributes worth mentioning.

First attribute to note is "src", which you use to specify the url of the image (where it is).
<img src="IMAGE.JPG" /> or
<img src="HTTP://WWW.SOMEWHERE.COM/IMAGE.GIF" />

Width and height attributes ("width" and "height") can be set, this is to speed up page rendering. If a width and height attribute is set then the browser can go and reserve the screen space for the image and continue to render the rest of the page. You can also use this to 'resize' the image but thats not advised as the result is not the best.
<img src="IMAGE.GIF" height="32" width="175" />

Lastly, the image can have a text string to it (using the "alt" attribute). This text string is used if there's a problem loading the image or the browser doesn't load images for whatever reason (can't or don't want to). This text string is also usually displayed when the page is loaded and then replaced by the actual image when the image is loaded.
<img src="IMAGE.PNG" alt="SOME TEXT STRING" />

<a>

An essential tag for a web site, but not for a web page (if that made sense?). This tag is used to indicate anchors (or addresses), which are essentially links to other pages.

The most basic form is just to use it to link to another page or website, the target url is assigned to the "href" attribute (hyperlink reference) and whatever is between the opening and closing tags is what the user can click on to take them to the target.
<a href="SOMEWHERE.HTML">CLICK HERE</a>

An interesting thing that you can do is that you can include an image between the tags and hence be able to use that as the thing to click.
<a href="URL.HTM"><img src="IMG.JPG" /></a>

Or you can go to a particular point of a page by appending "#" and a name to end of the url (href). You must then include an anchor point in the page directed to. The example should explain this better. Or just look at my page source since I used this quite a bit to allow quick jumping/referring to.

<a name="SOME_NAME"></a>
...
<a href=#SOME_NAME">GO BACK UP</a>

<hN>

Usually used to format some text as a heading (larger font size and bold). Fairly easy to use, replace "N" with a number from 1 to 6. The smaller the number the bigger the heading.
<h1>BIG HEADING</h1> or
<h6>SMALL HEADING</h6>

<p>

The paragraph tag. As far as I can tell its just a matter of style if you want to use this tag to show where paragraphs end and start. You could always just use two <br /> to force line breaks (hence a paragraph). I personally try and have everything in tags, so I use this tag quite a bit. Just surround the body of text with an opening and closing tag.

<em>

A logical style tag which usually causes the text to become italicized. An equivalent tag would be <i>. Choosing between "em" and "i" should just be a matter of style. Just surround the bit of text with the opening and closing tag.
<em>EMPHASIS</em> or
<i>ITALICS</i>

<strong>

Very similar to "em", except now the text usually becomes bold. Equivalent tag would be <b>.
<strong>STRONG EMPHASIS</strong> or
<b>BOLD</b>

<div>

Usually used in conjunction with CSS. This tag basically just causes the things inside of it to become another block. This should be further explained in the CSS section.

<span>

Also used in conjunction with CSS. Difference to div is that this is an inline tag, meaning that it does not cause a separate block to be created. Again, this should be further explained in the CSS section.

<sub>

Rarely used but useful to know its there. Text inside opening and closing tags become subscript (smaller and lower). Usage could be H2O
H<sub>2</sub>O

<sup>

Like "sub", but now its superscript. Usage could be 1st
1<sup>st</sup>

List tags

  • <ol>
  • <ul>
  • <li>

<ol>

Introduces an ordered list, ordered meaning numbered. Its important to note that each list item must be surrounded by the list item tag ("li"). Otherwise quite easy to use and understand.

<ol>
  <li>A LIST ITEM</li>
  ...
</ol>

<ul>

Introduces an unordered list, meaning bullets. I find this a bit more useful than ordered lists but maybe it has something to do with what I do? Again each item must be a list item.

<ul>
  <li>A LIST ITEM</li>
  ...
</ul>

<li>

Basic tag to used for lists (either list type). This is just to indicate where one list item starts and another ends (for the numbering/bulleting). Nothing particularly fancy or extra.
<li>LIST ITEM</li>

Table tags

  • <table>
  • <tr>
  • <th>
  • <td>

<table>

A surprisingly useful tag for page layout, even though a table should in theory contain only data; but it is used in page layouts nonetheless. However, this is being phased out in favour of using CSS (but I still find tables easier).

Open a table tag to introduce a table and then use the relevant table tags to indicate the table structure (rows and columns).

<tr>

The first tag to be placed inside of a table (usually the first). It just indicates a table row, a row of cells.

<th>

Indicates a table header, meaning that its been made bold. Table header can be thought of as just a special table data (meaning that it still needs to be part of a table row).

<td>

Probably the most commonly used tag inside of tables. This just indicates the start and end of a table cell. Often images (img) and even other tables are placed inside of this tag.

<table>
  <tr> <th>HEADING</th> </tr>
  <tr> <td>SOMETHING</td> </tr>
</table>

Form tags

  • <form>
  • <input>
  • <select>
  • <option>
  • <textarea>

<form>

Introduces a form. There are some things to take note of to make sure that the form behaves likes a form and submits the data to the server correctly (all done using attributes).

    Important attributes
  • action - url to send the form data to
  • enctype - encoding type of the form, usually set to "multipart/form-data"
  • method - set to "get" or "post", this will make sense on the server side

Note that only the contained form elements (input, select, textarea) are sent when the form is submitted. Elements not contained, are not sent.

<form action="URL.PHP" enctype="multipart/form-data" method="POST">
...
</form>

<input>

Used for the common form input fields. The most important attribute for this tag is the "type" attribute, this specifies many different types of input controls.

    Input types
  • none - when the attribute is not set, a plain text field is displayed (starting text = `value`)
    <input />
  • button - a clickable button (button text = `value`)
    <input type="button" value="CLICK ME" />
  • file - a file upload control (includes text field and browse button)
    <input type="file" />
  • radio - a radio control. `name` is used for grouping and `value` is used to help the server figure out which one was selected. Note that text next to the radio button is not provided
    <input type="radio" name="GROUP" selected="selected" value="A" />
    <input type="radio" name="GROUP" value="B" />
  • reset - resets all the contained form elements to the original values, somewhat useful (button text = `value`)
    <input type="reset" value="CLICK ME TO RESET FORM" />
  • submit - arguably the most important type. Creates a button (button text = `value`) that when clicked sends off the form data to the server
    <input type="submit" value="CLICK ME TO SUBMIT" />
    Other important attributes (touched upon above)
  • name - used on the server side to determine which input the value applies to
  • value - depends on the context, but essentially is the value that gets sent to the server

<select>

Introduces a combo-box of options to choose from (or drop down box). Is a bit equivalent to <ol> or <ul> in that its a container and the actual items is in different tag (in this case "option").

<select>
  <option>A SELECT OPTION</option>
  ...
</select>

<option>

Use this to indicate the start and end of the text for one option in the combo-box of options. Equivalent to the "li" tag in that it contains a bit of data for the container.
<option>A SELECT OPTION</option>

<textarea>

Similar to a simple text field (<input>), the difference is that its larger. It has a larger area, spanning more than one line; so its useful for providing an area in which to enter a larger amount of text.
<textarea name="TEXTAREA">SOME INITIAL TEXT</textarea>

Copyright © 2007 Min-Young Wu. All rights reserved.