NHS Designs

Web Design

HTML Element Reference

HTML Skeleton

Title goes here</title>

    All content goes here


Basic Elements

Creates an HTML document

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

Sets off the visible portion of the document


Head Elements

Puts the name of the document in the title bar

Inserts some CSS onto the page


Text Elements: Block

Creates the main headline

Creates the second-level headline

Creates the third-level headline

Creates a paragraph

Creates a long quote


Text Elements: Inline

Creates strong (bold) text

Creates emphasizes (italic) text

Creates a short quote


Text Formatting Elements

Inserts a line break

Inserts a horizontal rule


Relative Paths

Goes to a file in the same folder

Goes to a file in a lower folder

Goes to a file in a folder one level above the current folder

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

Creates an unordered (bulleted) list

Creates an ordered (numbered) list

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 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.

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 Readiness

  • 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.


resources · copyright information · Website designed by
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com