This post was written a while ago (September 2008) and hence the information presented below may have less relevance compared to new practices since the original publish date. Please take this into consideration when reading the information below.

HTML Quick List

Here is probably one of the most effective ways of remembering key elements and attributes by using a quick list. We explain various elements and attributes in tutorials but wouldn’t it be nice to have a page that lists every HTML tag, element and attribute with explanation of what they are? The HTML quick list will do just that, each element and attribute in HTML is listed with a explanation and of course a example of it’s use. Dive into the HTML quick list as your about to get everything downloaded into your brain!

The basic HTML structureThis is the structure that any html document must follow to be proper HTML. It is crucial that it is not overlooked:

<html>
<head>
<title>HTML Document</title>
<body>
Webpage content here…..
</body>
</html>

Header elementsHeaders can be set in HTML using header elements using the scale of h1 – h6 (h1 being the biggest and h6 being the smallest):

<h1>I am the biggest header</h1>
<h2>I am the second biggest header</h2>
<h3>I am the third biggest header</h3>
<h4>I am the fourth biggest header</h4>
<h5>I am the fifth biggest header<h5>
<h6>I am the smallest header of them all</h6>

Text elementsText elements in HTML are elements you must use in order to place text content within your HTML properly:

<p>Creates a automatic paragraph spacing when placed within text
<hr>Generates a line (horizontal rule) that could be used as a content seperator
<br>Creates a line break that forces any content below the line break down by one line
<pre>Makes any content within preformatted

Text styles - Styles can be applied to text in HTML to make them differ from other text content on a webpage

<b>Makes text bold
<i>Makes text italic
<u>Makes text underlined
<strong>Makes text strong
<em>Makes text emphasized
<strike>Makes text to appear with a line strike though it

Anchor elementsTo generate links in HTML you would use the anchor tag

<a href=”http://google.com”>Google</a>This is a anchor text link and clicking on it would take you to google

<a href=”http://google.com”><img src=”image.gif”></a>This is a anchor link combined with a image. The image would become clickable and it would take you to the url specified in the href

<a href=”mailto:someone@microsoft.com”>Email Link</a>This is a anchor link using the property mailto. The mailto property defines the link as a email address, so when clicking on it, the clients default email program will automatically load up and open a blank message with this email address in the href in the To field

<a name=”story”>My Story</a>Creates a place marker to where the below link will jump to

<a href=”#story”>Jump to my story</a>Using a standard link and having # followed by the name of the title (In this case it’s “story”) will allow this standard link to move the page to the location of the <a name=”story”>My Story</a>

FramesHTML can use frames to produce content

<frameset>Defines that a frame is going to be produced
<frame>Defines what frame this tag is

Example:

<frameset cols="20%,80%">
<frame src="page1.htm">
<frame src="page2.htm"
</frameset>

Lists elementsYou can create lists in HTML. There are few different list types.

<ul>Creates a un-ordered list (Bullet point style)
<li>Followed after the <ul> tag to create the lists content

Example:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ol>Creates a ordered list (Numbered list)
<li>Followed after the <ol> tag to create the lists content

Example:

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<dl>Creates a defition list
<dt>Definition Term
<dd>The definition of the term above

Example:

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Second Term</dt>
<dd>Definition</dd>
</dl>

TablesCan be created in HTML to produce data in a organised format

<table>Creates a table
<tr>Structures the below tags to form a correct table
<th>Creates a table header
<td>Table content goes here

Example:

<table border="1">
<tr>
<th>Table Column 1</th>
<th>Table Column 2</th>
</tr>
<tr>
<td>Data for table column 1</td>
<td>Data for table column 2</td>
</tr>
</table>

FormsCan display various content in different ways such as drop down menus and input fields

<form>Creates a form enviorment
<input>Defines what input the form will be

Input types:

<input type=”text”>Creates a text field
<input type=”password”>Creates a password field
<input type=”checkbox”>Creates a checkbox
<input type=”radio”>Creates a circular checkbox button
<input type=”submit”>Creates a submit button
<input type=”reset”>Creates a reset button
<input type=”hidden”>Makes input information within it hidden

Example:

<form action="http://www.nonexistantpage.com/login.php" method="post">
<input type="text" name="username" value="user" size="30" maxlength="50">
<input type="password">
<input type="submit">
</form>

<select>Creates a drop down menu
<option>Creates a drop down option within the menu

Example:

<select>
<option selected>Select option:
<option>Option 1
<option>Option 2
<option>Option 3
</select>

<textarea>Creates a text box

Example:

<textarea rows="60" cols="20">This produces a nice text box</textarea>

Other ElementsAny other elements that HTML uses

<!– This is a comment –> - This text will not be displayed in a browser but can be seen in a pages source code

<blockquote>Automatically formats text to a quote format

Example:

This is my famous quote of the day:
<blockquote>Well I'll be damned</blockquote>

<address> - Formats content within the tag to a address format that you may find on a letter

Example:

<address>
House number and road<br />
Town<br />
City<br />
</address>

Share This: