XHTML Introduction

A little note, I use XHTML (transitional to be specific), which is a revision of the old HTML specification. Don't let that intimidate you, there's minimal differences between XHTML and HTML (an extra slash '/' at the end of single tags being one of the more significant differences I find).

Reference

Book that I used to learn XHTML:

Creating Cool Websites with HTML, XHTML, and CSS
by Dave Taylor
Wiley Publishing, Inc
Published in 2004

XHTML intro

XHTML is just a way of structuring the content of your page, meaning that its just used to separate and label different things in your web page. There are a few things that you may need to put in that's for the browser and not the reader though.

Tag intro

Tags are what are used to structure the content. What makes a tag a tag are angle brackets (<>). Something is then put inside the angle brackets so that it can be clear what kind of tag it is.
<html>

Other things to know about tags are that they usually come in pairs (to indicate which part of the text is affected by the tag) and tags can have attributes attached to them.

An opening tag is your 'normal' tag (<html>) and your closing tag has a forward slash after the opening angle bracket (</html>).
<h1>Heading</h1>

There are singular tags (i.e. don't come in pairs), most notably the break tag (<br>); with xhtml, tags must always be closed so the way to close a singular tag is to put the slash (and a preceding space) before the closing angle bracket.
<br />

Attributes for tags are placed within the tag itself, the attribute (name of) is then 'made equal' to the desired value.
<a href="index.html">

Tags can be nested, but you should always close the last opened tag first.
<a href="home.html"><img src="home.jpg" alt="home" /></a>

Bit more about tags

So the main thing is using the right tag and right attributes at the right time. Web browsers are usually quite forgiving so slightly incorrect tags will still work as the browser will guess what you meant (but you should still try and make it all correct to ensure that you get what you want).

There's not that many tags, so it won't be hard to code up a web page using just a text editor. The main thing to remember are the attribute names, but you'll only be constantly using a few so that won't be hard either.

With HTML, the tags are case insensitive but for XHTML, the tag names should be in lowercase.

Tag attributes can be presented in any order.

XHTML (and HTML) is whitespace tolerant. Meaning that you can have lots of whitespace (space, tab, newline) between things (tags or words) and it won't make a difference to the output shown.

Escape characters

As the angle brackets have a special meaning in XHTML, if you want it to be shown you can't just type it as is, because then the browser will think that there's going to be a tag. So you need indicate to the browser that you want a < to be shown. To do so, an escape character is needed.

In XHTML (and HTML), the escape sequences are a bit different to programming escape sequences; names are used to indicate which character is meant. An escape sequence is started with an ampersand (&) and terminated with a semi-colon (;). Common escape sequences are presented below.

  • &lt; - <
  • &gt; - >
  • &amp; - &
  • &copy; - ©
  • &quot; - "
  • &#N; - character with unicode value N
  • &#39; - '

Commonly used tags

An unordered list of commonly used tags are presented below. Use a reference book to find out what attributes each tag can have.

  • Essential tags
    • <html xmlns="...">...</html> - xhtml tag
    • <head>...</head> - head section of web page (usually for browsers)
    • <meta ... /> - meta information for the browser
    • <link ... /> - extra files to be linked in (for browsers)
    • <title>...</title> - set the titel of the web page
    • <body>...</body> - body section of web page (usually for users)
  • General tags
    • <br /> - insert a line break
    • <hr /> - insert a horizontal rule
    • <img alt="..." src="URL" /> - insert an image
    • <a href="URL">...</a> - a link (or anchor point)
    • <hN>...</hN> - a heading, where N can be from 1 to 6 (inclusive)
    • <p>...</p> - delimits a paragraph
    • <em>...</em> - delimits emphasis (usually italics)
    • <strong>...</strong> - delimits strong emphasis (usually bold)
    • <div>...</div> - a block, usually used in conjunction with CSS
    • <span>...</span> - usually used in conjuntion with CSS
  • List tags
    • <ol>...</ol> - an ordered list (numbered)
    • <ul>...</ul> - an unordered list (bullets)
    • <li>...</li> - a list item (for the ordered/unorded lists)
  • Table tags
    • <table>...</table> - introduces a table
    • <th>...</th> - table header
    • <tr>...</tr> - table row
    • <td>...</td> - table data
  • Form tags
    • <form>...</form> - introduces a form
    • <input ... /> - a simple text field
    • <input ... type="file" /> - file upload input
    • <input ... type="radio" /> - a radio button
    • <select ...>...</select> - introduces a combo-box
    • <option>...</option> - a combo-box option
    • <textarea ...>...</textarea> - a textarea
    • <input ... type="submit" /> - submit form button
    • <input ... type="reset" /> - reset form button

There's quite a few more tags available but those are the ones that are most commonly used.


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