XHTML Reference Guide
Mark Up or Shut Up
This reference guide is not intended to be an exhaustive list of all XHTML tags. The tags listed here are those that you are most likely to encounter when editing your web site.
What are XHTML Tags?
XHTML (Extensible Hypertext Markup Language) is a markup language that is used to create a web page. It specifies how text and other elements of a web page are formatted and displayed in a web browser (such as Microsoft's Internet Explorer and Mozilla's Firefox).
Tags are elements of a XHTML document. They are used to define the structure, appearance, and behaviors of the XHTML document. Without tags, a web page would just be a big block of text! When editing a web page it is important to remember that most tags have an "open" and "close" version and that it is the text between these tags that should be edited.
Commonly Edited Tags
Here are some tags that you can expect to edit with your CMS:
- Paragraph Tag: <p> and </p>
This is most common tag that you will edit. Edit the text between the open and close tags to change the text found in the paragraphs on your web pages. Add new paragraph tags to add another paragraph to a web page.
- Bold Tag: <strong> and </strong>
Placing <strong> and </strong> around text within a paragraph will cause the text to be displayed in bold lettering.
- Emphasize Tag: <em> and </em>
Placing <em> and </em> around text within a paragraph will cause the text to be displayed in italics lettering.
- Heading Tag: <h1> and </h1>
Heading tags typically used as headlines on a web page. They usually appear larger and more bold than the surrounding text. Headings are often set apart from the rest of a page's information in a way that introduces a subject or a change in subject. There are several different heading tags ranging from <h1> (the largest and most important) to <h3> (smallest and less important). Typically, only one <h1> tag is used per page.
- Anchor (Link) Tag: <a> and </a>
Anchor tags are used to create a link to another web page or file. They are slightly different in that you must include a "path" to the web page or file you are linking to inside the opening tag. For example, this code...
<a href="http://www.blistermania.com">this link</a>
...was written to create this link. The important thing to note is that should you need to edit a link, you must edit the file path as well as the actual link text.
- List Tags: <ol> , <ul> , and List Item Tags: <li>
List tags are used when you have several items you wish to display on a web page in a list format. There are two types of lists: Ordered Lists <ol> </ol> and Unordered Lists <ul> </ul>.
Ordered Lists are used when you want the list items to be numbered. For example, the following code...
<ol>
<li>The First</li>
<li>The Second</li>
<li>The Third</li>
</ol>
...produces this result:
1) The First
2) The Second
3) The Third
Notice the use of list item tags <li> for each item listed. Each item included in the list must be between an <li> and </li> tags.
Unordered Lists <ul> </ul> are structured exactly like Ordered Lists. The only difference is that Unordered Lists are not numbered.
- Title Tag: <title> and </title>
Depending on your web site, you may be able to edit the title of a web page. The title is displayed in the top left corner of your web browser. For example, the title of this web page was coded as...
<title>BlisterMania.com - xHTML Reference</title>.
- Division Tags: <div> </div>
Division tags (along with some CSS code) are used to add structure to a web page.
- Image Tags: <img />
Image tags are used to place images within a web page.
- ID's and Classes
When editing a web page, you may come across various ID and Class references. These are special references to code within a CSS file that control how your web page looks and behaves. Editing these ID and Class reference can potentially break your web page. Please do not edit ID and Class references.
An example of an ID reference:
<div id="no_edit">
<p>The text between paragraph tags is ok to edit.</p>.
</div>
An example of a Class reference:
<div class="never_change">
<p>The text between paragraph tags is ok to edit.</p>.
</div>