HTML/XHTML quick list
A quick reference for the different HTML/XHTML elements as well as the structure of an HTML/XHTML document.
Click on a link to jump to that section.
HTML/XHTML document structure | Text | Text formatting | Links | Images | Image maps | Tables | Frames | Forms | Stylesheets | Document type | Scripts | Comments | Entities
HTML/XHTML document structure
A basic HTML/XHTML document
<html> <head> <title>A basic HTML/XHTML document</title> </head> <body> This is a basic HTML/XHTML document. </body> </html>
Text
Headings
<h1> - <h6> </h1> - </h6> (the smaller the number, the bigger the text)
<h6>Heading six</h6>
<h5>Heading five</h5>
<h4>Heading four</h4>
<h3>Heading three</h3>
<h2>Heading two</h2>
<h1>Heading one</h1>
Bold, italic, and underlined text
<b>this text will be bold</b>
<i>this text will be italic</i>
<u>this text will be underlined</u>
Text formatting
Paragraphs
<p>This text will be a paragraph</p>
Line breaks
The <br> tag skips one line.
Lists
Ordered lists:
<ol>
<li>First item in ordered list</li>
<li>Second item in ordered list</li>
</ol>
Unordered lists:
<ul>
<li>First item in unordered list</li>
<li>Second item in unordered list</li>
</ul>
Horizontal lines
The <hr> tag creates a horizontal line.
Preformatted text
<pre>This text will be preformatted</pre>
Links
Linking to another page in same window:
<a href="page.html">Click here</a>
Linking to another page in new window:
<a href="page.html" target="_blank">Click here</a>
Linking to another part of a page
<a href="#anchorName" target="_blank">Click here</a>
Back to topImages
<img src="image.jpg" alt="This is an image" />
Using an image as a link:
<a href="page.html"><img src="image.jpg" alt="This is an image link" /></a>
Back to topImage maps
<map name="aMap">
<area shape="rect | circle | poly" coords="10,10,10,10"
href="page.html" />
<area shape="rect | circle | poly" coords="20,20,20,20"
href="page2.html" />
<area shape="rect | circle | poly" coords="30,30,30,30"
href="page3.html" />
</map />
Tables
<table border="1">
<tr>
<th>Table heading</th>
<th>Table heading 2</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
Frames
<frameset rows="50%, 50%"> <frame src="frameone.php" src="frameone" /> <frame src="frametwo.php" src="frametwo" /> </frameset>
Dealing with browsers that do no support frames
<noframes> Your browser does not support frames. Are you still using Windows 95 as well? </noframes>
Inline frames
<iframe src="page1.html" name="iframeone" width="110" height="110"></iframe>
Back to topForms
A basic form
<form name="formone" action="page1.php" method="post">
<input type="text" />
<input type="submit" value="Submit" />
</form>
Form elements
<input type="text" name="textbox" /> (textbox)
<input type="button" value="This is a button" /> (button)
<textarea rows="20" cols="20">This is a textarea</textarea> (textarea)
<input type="radio" name="radionButtons" value="One" />Radio button one
<input type="radio" name="radionButtons" value="Two" />Radio button two (radio buttons)
<input type="checkbox" name="checkboxes" value="One" />Checkbox one
<input type="checkbox" name="checkboxes" value="Two" />Checkbox two (checkboxes)
<select name="dropDowList">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select> (drop down list)
Submitting a form
<input type="submit" value="Submit" />
Resetting a form
<input type="reset" value="Reset" />
Back to topStyle sheets
Internal style sheet
<style type="text/css"> styles go here </style>
NOTE: An internal style sheet goes in the HEAD element of an HTML document.
External style sheet
<link rel="stylesheet" type="text/css" href="style1.css" />
NOTE: The <link> tag goes inside the HEAD element of an HTML document.
Inline style sheet
<p style="color:green;">This text will be green.</p>
Back to topMeta tags
<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4" /> (offering keywords to search engines)
<meta name="description" content="Description of the page" /> (offering page description to search engines)
<meta name="generator" content="Software_used_to_create_page" /> (telling search engines what software was used to create a page)
<meta name="author" content="Someone A. Person" /> (telling search engines who created a page)
<meta name="expires" content="February 1st, 2876" /> (telling search engines when a page expires)
<meta http-equiv="refresh" content="5" /> (will reload the page every five seconds)
<meta http-equiv="window-target" content="_top" /> (preventing a page from being viewed inside some other websites frames page)
Document type
HTML Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Back to topScripts
<script type="script language">
script goes here
</script>
Handling browsers that do not support scripts
<noscript>
Your browser does not support scripts!! How's that going for you?
</noscript>
Comments
<!-- this is a comment -->
Back to topEntities
| Entity Name | Entity Number | Type of Character | Output |
|---|---|---|---|
| |   | space | |
| < | < | less than sign | < |
| > | > | greater than sign | > |
| & | & | ampersand | & |
| " | " | quotation mark | " |
| ' | " | apostrophe | ' |
| © | © | copyright symbol | © |
| ® | ® | registered trademark symbol | ® |
| × | × | multiplication symbol | x |
| ÷ | ÷ | division symbol | ÷ |
