HTML Lesson #2: Common HTML Tags

HTML Lesson #2

"Common HTML Tags"

This is a list of the most common tags and how to use them (with examples!). It's divided into types for easy understanding. This page will be a little long but I'll try to keep the text down. Many of these tags are being phased out or it is recommended that you use CSS (Cascading StyleSheets) instead. Since CSS is a little advanced, I recommend that you use these tags if you're just starting out. All tags that have been depreciated will be marked with an asterisk (*) while tags/attributes that have been depreciated and replaced by CSS will be marked by two asterisks (**).

The indented text that is started by (-) are attributes of the tag it's indented under. This means that these attributes are to be used with the tag. The settings of these attributes don't need to be enclosed in quotes in HTML but it's considered good formatting if you do so. The "=" is required. (width="200" vs. width=200)

Font Formatting - Page Formatting - Tables - Lists - Forms - Miscellaneous

Font Formatting: Basically a font is how the words look in a webpage. It's made up of the letter style, the size, whether it's bold or italic, etc.

<font> **: This tells the browser how you want your text to look. Professionals frown upon using this tag instead of CSS.

color

face

here

size

<font face="Times New Roman" size="3" color="yellow">My text is in the Times New Roman style and is yellow!</font>

My text is in the Times New Roman style and is yellow!

<b>: Makes the font bold. An alternate <strong> exists.

<i>: Italicizes the font. An alternate <em> exists.

<u> *: Underlines the font. Has been depreciated because underlined text resembles links.

<h1> - <h6>: Defines a page header. H1 is the largest while H6 is the smallest.

align

back to the top

Page Formatting: These tags assist you with the organization of your webpage.

<br>: This adds a linebreak to your text. It has no closing tag so add a backslash before >.

<center>: This centers your text.

<hr>: This draws a horizontal rule across the page like the one above this section.

align

noshade

size

width

<p>: Defines a paragraph. These are automatically double-spaced.

<pre>: Defines preformatted text that displays exactly how you type it in a monospaced font. The examples are making use of the <pre> tag.

width

<span>: Defines a section of text that will have special formatting. CSS must be used with this tag, otherwise it's pointless to use it.

style

<style>: Defines CSS properties that will be used in your webpage. This goes between <head></head>.

back to the top

Tables: These are actually meant to organize information in a spreadsheet style but have been used since the dawn of the World Wide Web for webpage layouts. A word of warning, however. If you eventually want to move onto tableless (CSS) layouts, this method is difficult to unlearn.

<table>: Defines a table. Without at least <tr> and <td> inside it's useless.

align

bgcolor

border

cellpadding

cellspacing

width

<table border="1" align="center"><tr><td>This is my table with one cell.</td></tr></table>

This is my table with one cell.

<th>: Defines the header in a table. The text is usually made bold. Align **, bgcolor **, and width ** can be used in addition to what's listed below.

align

char

colspan

height

rowspan

valign

<table border="1" align="center"><tr><th>Header</th></tr><tr><td>Table cell.</td></tr></table>

Header
Table cell.

<tr>: Defines a table row. Align **, bgcolor **, and valign can be used with this.

<td>: Defines a table cell. Align **, bgcolor **, colspan, height **, rowspan, valign, and width ** can be used with this.

<caption>: Defines the table's caption. Must be used right after <table>.

align

<table border="1" align="center"><caption>This is my caption.</caption><tr><td>Table cell.</td></tr></table>

This is my caption.
Table cell.

back to the top

Lists: Ordered and unordered lists are used all over the Internet for various reasons.

<ul>: Defines an unordered list. This list's items will have bullets.

type

<ol>: Defines an ordered list. This list's items will have a character.

start

type

<li>: Defines a list item. You can use the type attribute ** with this (bullet or character).

back to the top

Forms: These are used to process data. Some sort of server-side script (such as CGI or PHP) must be used to process the information most of the time.

<form>: Defines a form for user input.

action

method

name

target

<input>: Defines an input field that may be a textbox, a submit button, a checkbox, or a group of radio buttons. There is no closing tag.

align

alt

checked

maxlength

name

readonly

size

src

type

value

<input type="button" value="Hello!" />

<input type="radio" name="radiotest" value="radio1"> -
<input type="radio" name="radiotest" value="radio2"> -
<input type="radio" name="radiotest" value="radio3">

- -
<select>: Defines a dropdown list.

multiple

name

size

<option>: Defines an option in a dropdown list.

selected

value

<select>
<option>Blue</option>.
<option selected="selected">Red</option>
<option>Purple</option>
</select>

<textarea>: Defines a multi-line text input field. You can have text display in the textarea by default by placing it between the tags.

cols

name

readonly

rows

<textarea cols="30" rows="7"></textarea>

<label>: Defines a label for an element. Clicking on it will cause the element to be triggered.

for

<label for="clickme">Click Me:</label><input type="checkbox" id="clickme" />

Click Me:
back to the top

Miscellaneous: Tags that don't fit anywhere else.

<!DOCTYPE>: Defines the document type. This goes before <html> There is no closing tag, but it's not valid to use a forward slash.

Transitional HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Strict HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Frameset HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Transitional XHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Strict XHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Frameset XHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

: Defines webpage comments that won't be seen by your visitors unless they view your source code. There is no closing tag. Replace the periods with your text.

<a>: Defines an anchor. This can be used to link to another webpage or website or to create a bookmark in a long document. To create an e-mail link, add "mailto:" before the e-mail address. To link to a sub-directory, add the name of the directory followed by a forward slash "/" before the filename (/dir/file.jpg). To link from a sub-directory to the another directory, use "../" for each level you want to go back to. This is called the "relative path". The "absolute path" is the full one: http://www.yourwebsite.com/file.html.

href

name

target

<div>: Defines a division/section (also known as a layer). This is used most often with tableless CSS designs. Most browsers place a line break before and after this tag.

<frame>: Defines a frame. This must be used with <frameset> and there is no closing tag. See <frameset> for an example.

frameborder

marginheight

marginwidth

name

noresize

scrolling

src

<frameset>: Defines a frameset used to group together multiple webpages. Cannot use the <body> tag. Generally the frameset is on the index page of a website (index.html). Set the title of this frameset as you would an ordinary webpage.

cols

rows

<html>
<frameset cols="120, *">
<frame src="left.html" />
<frame src="index2.html" />
</frameset>
</html>

<img>: Defines an image. There is no closing tag.

align

alt

border

height

align

src

vspace

width

<meta>: Defines webpage information. This tag goes between <head></head> There is no closing tag. It's mainly used by search engines.

content

http-equiv

name

<meta name="description" content="This is Goku Girl's HTML tutorial #2." />
<meta name="keywords" content="HTML, tutorial, beginners" />
<meta http-equiv="refresh" content="10" url="http://www.mynewurl.com" />

<link>: Defines a relationship between two documents. It has no closing tag.

href

media

rel

rev

src

target

type

Examples:

<link rel="stylesheet" type="text/css" href="style.css" />

<noframes>: Sends a message to browsers that don't support frames. If you use this, you must use the <body> tag or else your message won't display in the web browser. Browsers that do support frames will ignore the message and execute the frame set.

<html>
<frameset cols="120, *">
<noframes>
<body>Your browser cannot display frames.</body>
</noframes>
<frame src="left.html" />
<frame src="index2.html" />
</frameset>
</html>

<script>: Defines a script. This must go between <head></head> See the example in <noscript>.

type

src

<noscript>: Tells a browser that doesn't support scripting (JavaScript, VBScript) to ignore it and give an alternate message. Comments () should also be used with this.

<script type="text/javascript">
<!--
document.write("Hi everybody!")
//-->
</script>
<noscript>Sorry, your browser doesn't support JavaScript.</noscript>

<applet> *: Defines an embedded applet. It's now preferred that a web designer use <object> instead.

align

alt

code

hspace

name

title

vspace

back to the top