NHS Designs

Web Design
XHTML

XHTML Cheat Sheet

XHTML Skeleton

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>
Title goes here</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=ISO-8859-1" />
  </head>
  <body>

    All content goes here
  </body>
</html>

 

Basic Elements

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"></html>
Creates an XHTML document

<head></head>
Sets off the title and other information that isn't displayed on the Web page itself

<body></body>
Sets off the visible portion of the document

 

Head Elements

<title></title>
Puts the name of the document in the title bar

<style type="text/css"></style>
Inserts some internal CSS onto the page

<link type="text/css" rel="stylesheet" href="style.css" />
Links to an external CSS style sheet

 

Text Elements: Block

<h1></h1>
Creates the main headline

<h2></h2>
Creates the second-level headline

<h3></h3>
Creates the third-level headline

<p></p>
Creates a paragraph

<blockquote></blockquote>
Creates a long quote

 

Text Elements: Inline

<strong></strong>
Creates strong (bold) text

<em></em>
Creates emphasizes (italic) text

<q></q>
Creates a short quote

 

Text Formatting Elements

<br />
Inserts a line break

<hr />
Inserts a horizontal rule

 

Relative Paths

filename.html
Goes to a file in the same folder

foldername/filename.html
Goes to a file in a lower folder

../filename.html
Goes to a file in a folder one level above the current folder

../../filename.html
Goes to a file in a folder two levels above the current folder

 

Link Elements

<a href="URL">label</a>
Creates a hyperlink

<a href="URL" title="brief description">label</a>
Creates a hyperlink with a brief description upon hover

<a href="URL" target="_new">label</a>
Creates a hyperlink which opens the page in a new window

<a href="mailto:email">label</a>
Creates a mailto link

<a name="name">label</a>
Creates a destination location within a document

<a href="URL#name">label</a>
Links to a destination location from elsewhere

 

List Elements

<ul></ul>
Creates an unordered (bulleted) list

<ol></ol>
Creates an ordered (numbered) list

<li></li>
Encloses each list item

 

Image Elements

<img src="URL" alt="alternative text goes here" width="100" height="100" />
Adds an image

 

Some Common Mistakes

Common Problem #1: Missing Angle Bracket
Oooops!  That tag just isn’t working.  The first thing to check is: does it have both the opening (<) and closing (>) angle brackets?  It’s easy to accidentally forget to include a bracket, or even to delete one as you edit your page.

Common Problem #2: Missing or Curly Quotation Mark
Are things just disappearing from your page?  Check to be sure that every place you have used an open quote for an attribute, there is also a closing quote.  If a browser doesn’t find a closing quote it will think that everything on the page is part of the tag attribute value, rather than content to be displayed.

VERY IMPORTANT: If you have copied and pasted code from another source, make sure to replace any curly quotes with regular ones.

Common Problem #3: Missing End Tag
Suddenly you have some odd indents.  Suddenly all your text is bold.  You probably entered an opening tag, but forgot to enter the closing tag.

Common Problem #4: Good Old Typos
The tag isn’t working as you expected.  Go back to your file and double check for typos.  It’s not uncommon for a hard-coder to mean to type a <title> tag and instead slip and type a <tittle> tag.  One will create a page title and the other wil break the whole page.

Common Problem #5: Broken Images
You have created an image tag but when you look at your page all you see is a little red X, the alternative text, or nothing at all.  There could be several reasons why your image does not work.  Check each of the following:

  • Have you saved your image into the correct location?
  • Have you included the correct extension? Probably .gif or .jpg.
  • Have you spelled the filename and path correctly?
  • Will the image open if you double click in the folder view?

 

XHTML Rules

  • ALL tags and attributes must be lowercase.  Do not use uppercase tags.
  • ALL tags must be properly nested.  Example: <p><strong>Title Text</strong></p>
  • ALL attribute values must be enclosed in a set of double quotes.
  • ALL images must have an alt attribute.
  • EVERY inline element inside the <body> element must be enclosed within a block element.

 


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Website designed by
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com
>