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.
