NHS Designs

Web Design
HTML

HTML Element Reference

HTML Skeleton

<html>
  <head>
    <title>
Title goes here</title>
  </head>
  <body>

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

 

Basic Elements

<html></html>
Creates an HTML 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></style>
Inserts some CSS onto the page

 

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

 


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