The HTML
HTML
Displayed below are samples of nearly all the HTML tags out there. I could annotate each tag I list here, but frankly, I haven't the time to make an extremely comprehensive reference sheet of HTML tags and their attributes (properties). Nevertheless, this webpage that I've created for you should be at least a decent and fairly comprehensive resource for all you webmasters out there.
If you'd like a brief history of this section, read this. The HTML Workshop was created at the beginning of 1999 as a place where I randomly placed new HTML I was learning. It was a reference or library to which I could refer whenever I needed some code that I hadn't in my memory yet. There were buttons and text fields and random links and images all over the place. In 2000, I organized the mess into separate text areas (now tables) for others to use. There has been a lot for me to add since then, but the amount of material to put here is rather overwhelming. Hopefully, what I have here so far will suffice.
XHTML
By the way, we were at HTML version 4.01 when I created this section, (and we still are). You may have come across the term "XHTML", which is essentially a stricter version (by XML's rules) of HTML, with differences like stricter rules about...
- closing your tags: <p>your face</p> instead of <p>your face, and <br /> instead of <br>, and <img /> instead of <img>
- using only lowercase tags: <body> instead of <BODY>
- sandwiching your nested tags: <b><u>still your face</u></b> instead of <b><u>still your face</b></u>
- placing quotes around attributes: <p align="right"> instead of <p align=right>
(If you already code your HTML like this, wonderful. I almost do, except for the next part. The quirky part is getting used to closing single tags like <br />. Sorry, I didn't make up the rules.) XHTML is the successor of HTML, and it's currently a parallel standard coexisting with HTML for smoother transitions into the future. There's a little more to the whole XHTML story, but all you need to know is that HTML is probably not going to disappear ever. But for those who fancy XHTML, just know that once you know HTML, you pretty much know XHTML. So get cracking and hacking!
[Last major content updates: 1999-2000; Last introduction text update: 2004;]
- Background Features
- Font Features
- Image Features
- Links Features
- Table Features
- Form Features
- Spacing and Alignment
- MetaTags
- Other Text Features
- Other Page Display Features
- Proprietary Tags
<!-->,
<!doctype>,
<a>,
<abbr>,
<acronym>,
<address>,
<applet>,
<area>,
<b>,
<base>,
<basefont>,
<bdo>,
<big>,
<blockquote>,
<body>,
<br>,
<button>,
<caption>,
<center>,
<cite>,
<code>,
<col>,
<colgroup>,
<dd>,
<del>,
<dfn>,
<dir>,
<div>,
<dl>,
<dt>,
<em>,
<fieldset>,
<font>,
<form>,
<frame>,
<frameset>,
<head>,
<h1>, - <h6>,
<hr>,
<html>,
<i>,
<iframe>,
<img>,
<input>,
<ins>,
<kbd>,
<label>,
<legend>,
<li>,
<link>,
<map>,
<menu>,
<meta>,
<noframes>,
<noscript>,
<object>,
<ol>,
<optgroup>,
<option>,
<p>,
<param>,
<pre>,
<q>,
<s>,
<samp>,
<script>,
<select>,
<small>,
<span>,
<strike>,
<strong>,
<style>,
<sub>,
<sup>,
<table>,
<tbody>,
<td>,
<textarea>,
<tfoot>,
<th>,
<thead>,
<title>,
<tr>,
<tt>,
<u>,
<ul>,
<var>
Background Features
The Body Tags
<body
bgcolor="beige" « (Background color of page)
background="image.gif" « (Image as background wallpaper if you want one)
bgproperties="fixed" « (How the background wallpaper is shown...either as fixed in place while scrolling or not)
link="blue" « (Color of a link that hasn't been clicked recently)
vlink="purple" « (Color of a link that has been clicked recently)
alink="white" « (Color of a link while it's still selected after being clicked)
text="black" « (Color of the text on the page unless specified with font tags)
marginheight="0" « (Margins at top and bottom of page)
marginwidth="0" « (Margins at left and right of page)
topmargin="0" « (Margin at top of page)
leftmargin="0" « (Margin at left of page)
rightmargin="0" « (Margin at right of page)
bottommargin="0" « (Margin at bottom of page)
>
Back to Top
bgcolor="beige" « (Background color of page)
background="image.gif" « (Image as background wallpaper if you want one)
bgproperties="fixed" « (How the background wallpaper is shown...either as fixed in place while scrolling or not)
link="blue" « (Color of a link that hasn't been clicked recently)
vlink="purple" « (Color of a link that has been clicked recently)
alink="white" « (Color of a link while it's still selected after being clicked)
text="black" « (Color of the text on the page unless specified with font tags)
marginheight="0" « (Margins at top and bottom of page)
marginwidth="0" « (Margins at left and right of page)
topmargin="0" « (Margin at top of page)
leftmargin="0" « (Margin at left of page)
rightmargin="0" « (Margin at right of page)
bottommargin="0" « (Margin at bottom of page)
>
Background Music
<embed src="song.mid" autostart="true" loop="true" volume="50">
<noembed><bgsound src="song.mid" loop="infinite"></noembed>
Back to Top
<noembed><bgsound src="song.mid" loop="infinite"></noembed>
Title Bar Text
<title>This Text Goes In The Title Bar of Your Browser Window</title>
Back to Top
Font Features
The Font Tags
<font
face="times new roman,comic sans ms,helvetica" «If the visitor's computer can't read the first font, it will try to read the second or the ones afterwards.
size="3" «Font size is defined from a scale of 1 to 7, 1 being the largest.
-OR-
size="+0"
color="white"
-OR-
color="#000000"
-OR-
color="000000"
>
</font>
* For more on color names and color hex codes, click here.
face="times new roman,comic sans ms,helvetica" «If the visitor's computer can't read the first font, it will try to read the second or the ones afterwards.
size="3" «Font size is defined from a scale of 1 to 7, 1 being the largest.
-OR-
size="+0"
color="white"
-OR-
color="#000000"
-OR-
color="000000"
>
</font>
* For the <font style='...... part, refer to my CSS section.
Font Scale
|
Font Size 1 Font Size 2 Font Size 3 Font Size 4 Font Size 5 Font Size 6 Font Size 7 |
Font Size -2 Font Size -1 Font Size +0 Font Size +1 Font Size +2 Font Size +3 Font Size +4 |
Formatted Text
<b> bold <b> ← Bold Text
<i> italics </i> ← Italic Text
<u> underlined </u> ← Underlined Text
<sup> superscript </sup> ← Superscript Text
<sub> subscript </sub> ← Subscript Text
<strike> strikeout </strike> ← Strikeout Text
Back to Top
<i> italics </i> ← Italic Text
<u> underlined </u> ← Underlined Text
<sup> superscript </sup> ← Superscript Text
<sub> subscript </sub> ← Subscript Text
<strike> strikeout </strike> ← Strikeout Text
Image Features
Image Tags
<img src="picture.gif"
alt="This text will show up in the image placeholder while the image loads."
title="This text will show when you hold the mouse cursor over the image."
height="100"
width="200"
border="2"
align="right"
hspace="1"
vspace="3">
- OR, the XHTML version -
<img src="picture.gif" />
Back to Top
alt="This text will show up in the image placeholder while the image loads."
title="This text will show when you hold the mouse cursor over the image."
height="100"
width="200"
border="2"
align="right"
hspace="1"
vspace="3">
- OR, the XHTML version -
<img src="picture.gif" />
Link Features
Links
<a href="index.html"
title="This text appears in the tooltip box when you hover and pause the mouse cursor over the link."
target="blank">Link</a>
(You can also use style="" and class="". See the CSS section for more info.)
Back to Top
title="This text appears in the tooltip box when you hover and pause the mouse cursor over the link."
target="blank">Link</a>
(You can also use style="" and class="". See the CSS section for more info.)
Anchor Links
<a href="#whee">Click here to jump to the "Whee" section.</a>
<a name=whee>
This is the "Whee" section.
Back to Top
<a name=whee>
This is the "Whee" section.
"Top of Page" Anchor Link
<a href="#top">Click here to jump to the top of this page.</a>
Back to Top
Link Button
<form method="link" action="index.html">
<input type="submit" value="Clickable Button">
</form>
Back to Top
<input type="submit" value="Clickable Button">
</form>
E-mail to:
<a href="mailto:name@company.com?subject=Insert%20Subject%20Here%20">
Back to Top
Tab Index Key
<a tabindex="1" href="something.html">Hit 'tab' key once to select this link</a>
<a tabindex="2" href="something.html">Hit 'tab' key a 2nd time to select this link</a>
<a tabindex="3" href="something.html">Hit 'tab' key a 3rd time to select this link</a>
Back to Top
<a tabindex="2" href="something.html">Hit 'tab' key a 2nd time to select this link</a>
<a tabindex="3" href="something.html">Hit 'tab' key a 3rd time to select this link</a>
Table Features
Table
<table bgcolor="white" border="2" bordercolor="red" cellpadding="3" cellspacing="2" width="320" height="400" align="right">
<tr colspan="2" rowspan="1">
<td valign="top" align="center" bgcolor="green" width="52" height="20">
This is the content of the table.
</td>
</tr>
</table>
Back to Top
<tr colspan="2" rowspan="1">
<td valign="top" align="center" bgcolor="green" width="52" height="20">
This is the content of the table.
</td>
</tr>
</table>
Table Header
<table>
<th>Header!</th>
<td valign="top" align="center" bgcolor="green" width="52" height="20">
This is the content of the table.
</td>
</table>
Back to Top
<th>Header!</th>
<td valign="top" align="center" bgcolor="green" width="52" height="20">
This is the content of the table.
</td>
</table>
Form Features
The Form Tags
<form method="post" action="mailto:gordon@gordeonbleu.com">
</form>
All the checkboxes, textfields, radio buttons, etc. go between these tags.
Back to Top
</form>
All the checkboxes, textfields, radio buttons, etc. go between these tags.
Drop-down Options Menu (Select)
<select name="">
<option>Option 1
<option>Option 2
<option>Option 3
</select>
- OR -
<select name="">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
Back to Top
<option>Option 1
<option>Option 2
<option>Option 3
</select>
- OR -
<select name="">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
Checkbox
<input type="checkbox"
value="This text will show up in the textfield and can be edited by the user."
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you">
Back to Top
value="This text will show up in the textfield and can be edited by the user."
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you">
Radio Button
<input type="radio"
value="whatever_goes_in_here_labels_this particular_radio_button"
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you">
Back to Top
value="whatever_goes_in_here_labels_this particular_radio_button"
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you">
Small Text Box (Text Field)
<input
size="13"
maxlength="50"
value="This text will show up in the textfield and can be edited by the user."
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you"
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">
(Size defines the length of the text field.)
(Maxlength defines the maximum length of text that the user inputs.)
Back to Top
size="13"
maxlength="50"
value="This text will show up in the textfield and can be edited by the user."
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you"
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">
(Size defines the length of the text field.)
(Maxlength defines the maximum length of text that the user inputs.)
Large Textbox (Textarea)
<textarea
cols=100
rows=5
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you"
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">
Text that goes here will appear in the textarea, and users can edit it.
</textarea>
(I put a space inside the tag in the last line to prevent it from being hidden. Remove it before you use this tag.)
Back to Top
rows=5
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you"
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">
Text that goes here will appear in the textarea, and users can edit it.
</textarea>
(I put a space inside the tag in the last line to prevent it from being hidden. Remove it before you use this tag.)
Submit Button
<input type="submit" value="Send"
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">
Back to Top
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">
Reset Button
<input type="reset" value="Erase"
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">
Back to Top
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">
Scroll Box
<select name="Bathroom colors" size="5" multiple>
<option>White
<option>Red
<option>Green
<option>Black
<option selected>Bronze
<option>Copper
<option>Coral
<option selected> Olive Green
<option>Cyan
<option>Yellow
</select>
Back to Top
<option>White
<option>Red
<option>Green
<option>Black
<option selected>Bronze
<option>Copper
<option>Coral
<option selected> Olive Green
<option>Cyan
<option>Yellow
</select>
Spacing and Alignment
Next Line (Carriage)
<br>
- OR, the XHTML version -
<br />
Back to Top
- OR, the XHTML version -
<br />
New Paragraph
<p>
-OR-
<p> text </p>
Back to Top
-OR-
<p> text </p>
Paragraph Alignment: Left, Center, Right, and Justify
<p align="left">text</p>
<p align="center">text</p>
<p align="right">text</p>
<p align="justify">text</p>
Back to Top
<p align="center">text</p>
<p align="right">text</p>
<p align="justify">text</p>
Blockquote Text
<blockquote>text</blockquote>
Back to Top
Centered Text
<center>text</center>
Back to Top
List Items (Bullets)
<li>Bullet 1</li>
<li>Bullet 2</li>
<li>Bullet 3</li>
- OR, to be less proper, depending on doctype -
<li>Bullet 1
Back to Top
<li>Bullet 2</li>
<li>Bullet 3</li>
- OR, to be less proper, depending on doctype -
<li>Bullet 1
Unordered Lists
<ul>
<li> All this text is indented to the right. </li>
</ul>
Back to Top
<li> All this text is indented to the right. </li>
</ul>
Ordered Lists
<ol>
<li>This text will be</li>
<li>Numbered in order</li>
</ol>
Back to Top
<li>This text will be</li>
<li>Numbered in order</li>
</ol>
Horizontal Rule (Horizontal Line Divider)
<hr color="gray" size="2" width="100%" align="center" noshade>
- OR, the XHTML version -
<hr />
Back to Top
- OR, the XHTML version -
<hr />
Definition Lists
<dl>
<dt>List Item 1 Title</dt>
<dd>This is a description of list item 1.</dd>
</dl>
Back to Top
<dt>List Item 1 Title</dt>
<dd>This is a description of list item 1.</dd>
</dl>
MetaTags
Description of website when found by search engine (unless search engine ignores metatags)
<meta name="description" content="A page with Gordon's works.">
Back to Top
Keywords for search engine
<meta name="keywords" content="stories, poetry, Gordon, soup">
Back to Top
Author for search engine
<meta name="author" content="Gordon Mei">
Back to Top
HTTP Page Redirect
<meta http-equiv="Refresh" content="0"; url=http://www.ocf.berkeley.edu/~gordeon/">
Back to Top
Other
How to show HTML tags:
Put the 4 characters in each combination together with no spaces in between. I put spaces only so that I could show these combinations. Other wise they would show us as < and >.
Back to Top
& l t ; = <
& g t ; = >
How to make consecutive HTML spaces (nbsp - nonbreaking spaces):
Put the 4 characters in each combination together with no spaces in between. I put spaces only so that I could show these combinations. Putting multiple spaces (by Spacebar) in a row in your code will interpreted as only once space. That's why nbsp is useful.
Back to Top
& n b s p ;
Frames
<frameset rows="50,*">
<frame name="navigate" src="http://www.google.com" scrolling = "no" marginheight=1 resize>
<frame name="partner" src="http://www.yahoo.com" scrolling = "yes" marginheight=1 noresize>
</frameset>
<noframes>
If the visitor's browser doesn't support frames, whatever you put here will be shown.
</noframes>
Back to Top
<frame name="navigate" src="http://www.google.com" scrolling = "no" marginheight=1 resize>
<frame name="partner" src="http://www.yahoo.com" scrolling = "yes" marginheight=1 noresize>
</frameset>
<noframes>
If the visitor's browser doesn't support frames, whatever you put here will be shown.
</noframes>
Image Maps
<img src="navigation.gif" alt="" usemap="#navigation" />
<map id="navigation" name="navigation">
<area shape="rect"#the roasted kind coords="144,52,304,71" href="peanuts.html" title="the roasted kind" />
<area shape="rect"#the 411 coords="144,89,304,107" href="info.html" title="the 411" />
<area shape="rect"#fastens paper nicely coords="144,107,304,125" href="stapler.html" title="fastens paper nicely" />
<area shape="rect"#dirty pop coords="144,125,304,143" href="pop.html" title="dirty pop" />
<area shape="rect"#warm feet coords="144,143,304,161" href="socks.html" title="warm feet" />
<area shape="rect"#pink and hard coords="144,71,304,89" href="eraser.html" title="pink and hard" />
<area shape="circle"#stickies coords="223,292,27" href="postit" title="stickies" />
<area shape="poly"#sugar goodness coords="153,240,175,218,202,207,225,204,241,206,261,213,277,222,290,236,300,250,247,273,232,262,213,262,
200,272,148,246" href="candy.html" title="sugar goodness" />
<area shape="poly"#am i being too forward? coords="248,275,300,252,307,264,311,285,310,309,300,334,287,352,239,316,249,307,252,294,252,282" href="contact.html" title="am i being too forward?" />
<area shape="poly"#step back behind the line please coords="199,273,147,247,138,270,136,296,140,322,150,340,159,351,206,316,195,303,194,284" href="info_sitehistory.html" title="step back behind the line please" />
<area shape="poly"#play those scrolling credits! coords="207,316,160,353,184,371,213,379,240,378,264,370,283,357,286,353,236,315,227,319,219,318" href="credits.html" title="play those scrolling credits!" />
<area shape="default" nohref="nohref" alt="" />
</map>
Back to Top
<map id="navigation" name="navigation">
<area shape="rect"#the roasted kind coords="144,52,304,71" href="peanuts.html" title="the roasted kind" />
<area shape="rect"#the 411 coords="144,89,304,107" href="info.html" title="the 411" />
<area shape="rect"#fastens paper nicely coords="144,107,304,125" href="stapler.html" title="fastens paper nicely" />
<area shape="rect"#dirty pop coords="144,125,304,143" href="pop.html" title="dirty pop" />
<area shape="rect"#warm feet coords="144,143,304,161" href="socks.html" title="warm feet" />
<area shape="rect"#pink and hard coords="144,71,304,89" href="eraser.html" title="pink and hard" />
<area shape="circle"#stickies coords="223,292,27" href="postit" title="stickies" />
<area shape="poly"#sugar goodness coords="153,240,175,218,202,207,225,204,241,206,261,213,277,222,290,236,300,250,247,273,232,262,213,262,
200,272,148,246" href="candy.html" title="sugar goodness" />
<area shape="poly"#am i being too forward? coords="248,275,300,252,307,264,311,285,310,309,300,334,287,352,239,316,249,307,252,294,252,282" href="contact.html" title="am i being too forward?" />
<area shape="poly"#step back behind the line please coords="199,273,147,247,138,270,136,296,140,322,150,340,159,351,206,316,195,303,194,284" href="info_sitehistory.html" title="step back behind the line please" />
<area shape="poly"#play those scrolling credits! coords="207,316,160,353,184,371,213,379,240,378,264,370,283,357,286,353,236,315,227,319,219,318" href="credits.html" title="play those scrolling credits!" />
<area shape="default" nohref="nohref" alt="" />
</map>
Embed Music on Page
<embed src="song.mid" width="145" height="55" autostart="false" loop="true" volume="50"></noembed>
Or to have the song play hidden in the background:
<embed src="song.mp3" hidden="true" autostart="true" loop="true"></noembed>
Back to Top
Or to have the song play hidden in the background:
<embed src="song.mp3" hidden="true" autostart="true" loop="true"></noembed>
Proprietary
Marquee ("Scrolling Text" Ticker)
<font size="3" color="white">
<marquee bgcolor="black" width="300" height="14" direction="up" loop="2" behavior="slide" scrollamount="100">
This is a scrolling marquee, and it is not supported by all web browsers (example: older versions of Netscape)m as it is a proprietary tag.
</marquee>
</font>
Back to Top
<marquee bgcolor="black" width="300" height="14" direction="up" loop="2" behavior="slide" scrollamount="100">
This is a scrolling marquee, and it is not supported by all web browsers (example: older versions of Netscape)m as it is a proprietary tag.
</marquee>
</font>