How can I learn some basic HTML?

Print There are lots of easy HTML tags that you can add to your text to change i
ts appearance. This page lists some of the most common tags. If you want to lear
n more, please see: How can I learn more about HTML? Code
Text
Examples
<strong>TEXT</strong> <em>TEXT</em>
This text is bold. This text is italicized.
Surround text with <strong></strong> tags to make it bold, or with <em></em> to
italicize it.
<blockquote>TEXT</blockquote>
Regular text goes here. This text is in a blockquote.
Surround text with <blockquote></blockquote> tags to indent it and set it apart
from the rest of your text. Useful for quoting longer sections of other pages.
<h1>TEXT</h1> <h2>TEXT</h2> <h3>TEXT</h3> <h4>TEXT</h4> <h5>TEXT</h5> <h6>TEXT</
h6>
Header 1
Header 3
Header 6
Header tags are used for various levels of headers, titles and subtitles on a pa
ge. The size choices are 1 (largest) through 6 (smallest).
Links
<a href='http://URL'>TEXT</a>
This is a link to Blogger.
The text between the <a> tags will be what your reader sees and clicks on. The U
RL indicated by href= is the address they will be taken to. For more information
on links, please see How can I do more with links?
<a href='mailto:ADDRESS'>TEXT</a>
This is an email link.
Email links work like webpage links. Just replace http:// with mailto: and repla
ce the URL with an email address.
Lists
<ol> <li>TEXT</li> </ol> <ul> <li>TEXT</li> </ul>
1. First list item. 2. Second list item.
â ¢ â ¢
First list item. Second list item.
You can create ordered (numbered) lists with the <ol> tags and unordered (bullet
ed) lists with the <ul> tags. In either one, individual list items are contained
in <li></li> tags and get numbered or bulleted automatically. You can also nest
lists, by including the complete code for a second list within the <li></li> ta
gs for the first list.
Dividers
<p>TEXT</p> <p>TEXT</p>
Paragraphs are blocks of text separated by blank lines.
First paragraph. Second paragraph
TEXT <br /> TEXT
First line. Second line.
Break tags start a new line where ever you enter them. Note that it is just a si
ngle tag, so it doesn't have to surround any text.
TEXT <hr /> TEXT
First line. Second line.
Horizontal lines can be used to separate anything you want. Like break tags, thi
s are single items that don't surround text.
Colors, Fonts, Alignment and anything else you can think of...
You can adjust the precise appearance and positioning of all the elements listed
above and more, through the magic of CSS. See: What else can I do with CSS?
Learn More HTMLs: (http://werbach.com/barebones/barebones.html)
The latest version of this document is available at http://werbach.com/barebones
/, where you will also find the text version, translations, and background mater
ials. The Bare Bones Guide to HTML lists all the tags that current browsers are
likely to recognize. I have included all the elements in the official HTML 4.0 r
ecommendation with common attributes, as well as Netscape and Microsoft extensio
ns. This document is a quick reference, not a complete specification; for offici
al information about HTML and its development, see the World Wide Web Consortium
site at http://www.w3.org/MarkUp/. The Guide is designed to be as concise as po
ssible, and therefore it doesn't go into any detail about how to use the various
tags. A few tags link to notes that address frequentlyasked questions. If you'r
e looking for more detailed step-by-step information, see my WWW Help Page.
Table of Contents
1. INTRODUCTORY MATERIAL o What is unique about this guide o Which HTML tags are
included o How this document is formatted (including a description of symbols a
nd abbreviations) 2. HTML TAGS o basic elements (all HTML documents should have
these) o structural definition (appearance controlled by the browser's preferenc
es) o presentation formatting (author specifies text appearance) o links, graphi
cs, and sounds o positioning o dividers o lists o backgrounds and colors o speci
al characters o forms o tables o frames o scripts and java o miscellaneous Impor
tant: If you are not clear about the differences between the various versions of
HTML, I suggest that you read my discussion of the development of HTML, or the
World Wide Web Consortium HTML activity statement.
BASIC ELEMENTS
Document Type Title Header Body
<HTML></HTML> <TITLE></TITLE> <HEAD></HEAD> <BODY></BODY>
(beginning and end of file) (must be in header) (descriptive info, such as title
) (bulk of the page)
STRUCTURAL DEFINITION
Heading Align Heading Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV> Align
Division Defined Content <SPAN></SPAN> <BLOCKQUOTE></BLOCKQUOTE> Block Quote (u
sually indented) <Q></Q> Quote (for short quotations) <Q CITE="URL"></Q> Citatio
n <EM></EM> Emphasis (usually displayed as italic) Strong Emphasis <STRONG></STR
ONG> (usually displayed as bold) <CITE></CITE> Citation (usually italics) <CODE>
</CODE> Code (for source code listings) <SAMP></SAMP> Sample Output Keyboard Inp
ut <KBD></KBD> <VAR></VAR> Variable <DFN></DFN> Definition (not widely implement
ed) Author's Address <ADDRESS></ADDRESS> Large Font Size <BIG></BIG> Small Font
Size <SMALL></SMALL> (marks additions in a new <INS></INS> Insert version) Time
of Change <INS DATETIME=":::"></INS> <INS CITE="URL"></INS> Comments (marks dele
tions in a new <DEL></DEL> Delete version) <DEL DATETIME=":::"></DEL> Time of Ch
ange <DEL CITE="URL"></DEL> Comments <ACRONYM></ACRONYM> Acronym <ABBR></ABBR> A
bbreviation
<H?></H?> <H? ALIGN=LEFT|CENTER| RIGHT></H?> <DIV></DIV>
(the spec. defines 6 levels)
4.0 4.0 4.0
4.0 4.0 4.0 4.0 4.0 4.0 4.0 4.0
PRESENTATION FORMATTING
Bold Italic 4.0* Underline
<B></B> <I></I> <U></U>
(not widely implemented)
Strikeout 4.0* Strikeout Subscript Superscript Typewriter Preformatted Width Cen
ter N1 Blinking Font Size Change Font Size Font Color 4.0* Select Font N4 Point
size N4 Weight 4.0* Base Font Size MS Marquee
<STRIKE></STRIKE> <S></S> <SUB></SUB> <SUP></SUP> <TT></TT> <PRE></PRE> <PRE WID
TH=?></PRE> <CENTER></CENTER> <BLINK></BLINK> <FONT SIZE=?></FONT> <FONT SIZE="+
|-? "></FONT> <FONT COLOR="#$$$$$$"></FONT> <FONT FACE="***"></FONT> <FONT POINT
SIZE=?></FONT> <FONT WEIGHT=?></FONT> <BASEFONT SIZE=?> <MARQUEE></MARQUEE>
(not widely implemented) (not widely implemented)
(displays in a monospaced font) (display text spacing as-is) (in characters) (fo
r both text and images) (the most derided tag ever) (ranges from 1-7)
(from 1-7; default is 3)
POSITIONING
N3 N3 N3 N3 N3 N3 N3 N3 N4 N4 N4 N4 N4 N4 N4 N4 N4 N4 N4 Multi-Column Column Gut
ter Column Width Spacer Spacer Type Size Dimensions Alignment Layer Name Locatio
n Rel. Position Source File Stacking Stack Position Dimensions Clipping Path Vis
ible? Background
<MULTICOL COLS=?></MULTICOL> <MULTICOL GUTTER=?></MULTICOL> <MULTICOL WIDTH=?></
MULTICOL> <SPACER> <SPACER TYPE=HORIZONTAL| VERTICAL|BLOCK> <SPACER SIZE=?> <SPA
CER WIDTH=? HEIGHT=?> <SPACER ALIGN=LEFT|RIGHT| CENTER> <LAYER></LAYER> <LAYER I
D="***"></LAYER> <LAYER LEFT=? TOP=?></LAYER> <LAYER PAGEX=? PAGEY=?></LAYER> <L
AYER SRC="***"></LAYER> <LAYER Z-INDEX=?></LAYER> <LAYER ABOVE="***" BELOW="***"
></LAYER> <LAYER HEIGHT=? WIDTH=?></LAYER> <LAYER CLIP=,,,></LAYER> <LAYER VISIB
ILITY=SHOW|HIDDEN|INHERIT></LAYER> <LAYER
N4 N4 N4
Color Inline Layer Alt. Content
BACKGROUND="$$$$$$"></LAYER> <LAYER BGCOLOR="$$$$$$"></LAYER> <ILAYER></ILAYER>
<NOLAYER></NOLAYER>
(takes same attributes as LAYER)
LINKS, GRAPHICS, AND SOUNDS
Link Something <A HREF="URL"></A> Link to Location <A HREF="URL#***"></A>
<A HREF="#***"></A>
(if in another document) (if in current document) (Javascript)
4.0* Target Window 4.0* Action on Click Mouseover 4.0* Action Mouse out 4.0* Act
ion Link to Email N, Specify Subject MS Define Location Display Image Alignment
N1 Alignment Alternate Dimensions
<A HREF="URL" TARGET="***"></A> <A HREF="URL" ONCLICK="***"></A>
<A HREF="URL" ONMOUSEOVER="***"></A> (Javascript) <A HREF="URL" ONMOUSEOUT="***"
></A> <A HREF="mailto:@"></A> <A HREF="mailto:@?SUBJECT=***"></A> <A NAME="***">
</A> <IMG SRC="URL"> <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> <IMG SRC
="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE| ABSBOTTOM> <IMG SRC="URL" ALT="***"> <I
MG SRC="URL" WIDTH=? HEIGHT=?> <IMG SRC="URL" WIDTH=% HEIGHT=%>
(Javascript) (use a real question mark)
N1
Border Runaround Space Low-Res Proxy Imagemap Imagemap Movie Clip
<IMG SRC="URL" BORDER=?> <IMG SRC="URL" HSPACE=? VSPACE=?> <IMG SRC="URL" LOWSRC
="URL"> <IMG SRC="URL" ISMAP> <IMG SRC="URL" USEMAP="URL"> <IMG DYNSRC="***" STA
RT="***" LOOP=?>
(if image not displayed) (in pixels) (as percentage of page width/height) (in pi
xels) (in pixels) (requires a script)
MS MS
Background <BGSOUND SRC="***" LOOP=?|INFINITE> Sound Client-Side Map <MAP NAME="
***"></MAP> (describes the
map) Map Section N1 N2 N2 4.0 4.0 Client Pull Embed Object Object Size Object Pa
rameters
<AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF> <META HTT
P-EQUIV="Refresh" CONTENT="?; URL=URL"> <EMBED SRC="URL"> <EMBED SRC="URL" WIDTH
=? HEIGHT=?> <OBJECT></OBJECT> <PARAM>
(insert object into page)
DIVIDERS
Paragraph Align Text N Justify Text Line Break Clear Textwrap Horizontal Rule Al
ignment Thickness Width Width Percent N1 N1 Solid Line No Break Word Break
<P></P> <P ALIGN=LEFT|CENTER| RIGHT></P> <P ALIGN=JUSTIFY></P> <BR> <BR CLEAR=LE
FT|RIGHT|ALL> <HR> <HR ALIGN=LEFT|RIGHT|CENTER> <HR SIZE=?> <HR WIDTH=?> <HR WID
TH="%"> <HR NOSHADE> <NOBR></NOBR> <WBR>
(closing tag often unnecessary)
(a single carriage return)
(in pixels) (in pixels) (as a percentage of page width) (without the 3D cutout l
ook) (prevents line breaks) (where to break a line if needed)
LISTS
Unordered List Compact Bullet Type Bullet Type Ordered List Compact Numbering Ty
pe Numbering Type Starting Number Starting Number Definition List Compact
<UL><LI></UL> <UL COMPACT></UL> <UL TYPE=DISC|CIRCLE| SQUARE> <LI TYPE=DISC|CIRC
LE| SQUARE> <OL><LI></OL> <OL COMPACT></OL> <OL TYPE=A|a|I|i|1> <LI TYPE=A|a|I|i
|1> <OL START=?> <LI VALUE=?> <DL><DT><DD></DL> <DL COMPACT></DL>
(before each list item) (for the whole list) (this & subsequent) (before each li
st item) (for the whole list) (this & subsequent) (for the whole list) (this & s
ubsequent) (<DT>=term, <DD>=definition)
Menu List Compact Directory List Compact
<MENU><LI></MENU> <MENU COMPACT></MENU> <DIR><LI></DIR> <DIR COMPACT></DIR>
(before each list item) (before each list item)
BACKGROUNDS AND COLORS
Tiled Bkground <BODY BACKGROUND="URL"> MS
<BODY BGPROPERTIES="FIXED"> Bkground Color <BODY BGCOLOR="#$$$$$$"> (order is re
d/green/blue) <BODY TEXT="#$$$$$$"> Text Color
Watermark
<BODY LINK="#$$$$$$"> Link Color <BODY VLINK="#$$$$$$"> Visited Link <BODY ALINK
="#$$$$$$"> Active Link (More info at http://werbach.com/web/wwwhelp.html#color)
SPECIAL CHARACTERS
Special &#?; (where ? is the ISO 8859-1 code) Character &lt; < &gt; > &amp; & &q
uot; " Registered TM &#174; Registered TM &reg; &#169; Copyright &copy; Copyrigh
t Non-Breaking &nbsp; Space (Complete list at http://www.htmlhelp.com/reference/
charset)
FORMS
Define Form 4.0* File Upload Input Field Field Name Field Value Checked? Field S
ize Max Length Button
<FORM ACTION="URL" METHOD=GET|POST></FORM> <FORM ENCTYPE="multipart/form-data"><
/FORM> <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| FILE|BUTTON|IMAGE|HIDDEN|SUBMI
T|RESET"> <INPUT NAME="***"> <INPUT VALUE="***"> <INPUT CHECKED> <INPUT SIZE=?>
<INPUT MAXLENGTH=?> <BUTTON></BUTTON>
(checkboxes and radio boxes) (in characters) (in characters)
4.0
4.0 4.0 4.0 4.0 4.0
Button Name Button Type Default Value Label Item Labelled Selection List Name of
List # of Options Multiple Choice Option Default Option Option Value
<BUTTON NAME="***"></BUTTON> <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON> <BUTTO
N VALUE="***"></BUTTON> <LABEL></LABEL> <LABEL FOR="***"></LABEL> <SELECT></SELE
CT> <SELECT NAME="***"></SELECT> <SELECT SIZE=?></SELECT> <SELECT MULTIPLE> <OPT
ION> <OPTION SELECTED> <OPTION VALUE="***"> <OPTGROUP LABEL="***"></OPTGROUP> <T
EXTAREA ROWS=? COLS=?></TEXTAREA> <TEXTAREA NAME="***"></TEXTAREA> <TEXTAREA WRA
P=OFF|HARD|SOFT></TEXTAREA>
(can select more than one) (items that can be selected)
4.0
Option Group Input Box Size Name of Box
N2 4.0 4.0 4.0
Wrap Text Group elements <FIELDSET></FIELDSET> <LEGEND></LEGEND> Legend (caption
for fieldsets) <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND> Alignment
TABLES
<TABLE></TABLE> Define Table 4.0* Table Alignment <TABLE ALIGN=LEFT|RIGHT|CENTER
> <TABLE BORDER></TABLE> Table Border
Table Border Cell Spacing Cell Padding Desired Width Width Percent 4.0* Table Co
lor 4.0 4.0 MS MS MS Table Frame Table Rules Border Color Dark Border Light Bord
er
<TABLE BORDER=?></TABLE> <TABLE CELLSPACING=?> <TABLE CELLPADDING=?> <TABLE WIDT
H=?> <TABLE WIDTH=%>
(either on or off) (you can set the value)
(in pixels) (percentage of page)
<TABLE BGCOLOR="$$$$$$"></TABLE> <TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS| V
SIDES|BOX|BORDER></TABLE> <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE> <TABLE
BORDERCOLOR="$$$$$$"></TABLE> <TABLE BORDERCOLORDARK="$$$$$$"></TABLE> <TABLE B
ORDERCOLORLIGHT="$$$$$$"></TABLE>
Table Row Alignment Table Cell Alignment
<TR></TR> <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> <TD></TD>
(must appear within table rows)
No linebreaks Columns to Span <TD <TD Rows to Span 4.0* Desired Width <TD N3 Wid
th Percent <TD <TD 4.0* Cell Color Header Cell
<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE| BOTTOM> <TD NOWRAP> COLSPAN=?> RO
WSPAN=?> WIDTH=?> WIDTH="%"> BGCOLOR="#$$$$$$">
(in pixels) (percentage of table) (same as data, except bold centered)
<TH></TH>
<TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> Alignment No Linebreaks <TH NOWRAP> C
olumns to Span <TH COLSPAN=?> <TH ROWSPAN=?> Rows to Span 4.0* Desired Width <TH
WIDTH=?> (in pixels) <TH WIDTH="%"> N3 Width Percent (percentage of table) <TH
BGCOLOR="#$$$$$$"> 4.0* Cell Color <TBODY> 4.0 Table Body (must come before <TFO
OT></TFOOT> 4.0 Table Footer THEAD>
4.0
Table Header Table Caption Alignment
<THEAD></THEAD> <CAPTION></CAPTION> <CAPTION ALIGN=TOP|BOTTOM|LEFT| RIGHT> <COL>
</COL> <COL SPAN=?></COL> <COL WIDTH=?></COL> <COL WIDTH="%"></COL> <COLGROUP></
COLGROUP> <COLGROUP SPAN=?></COLGROUP> <COLGROUP WIDTH=?></COLGROUP> <COLGROUP W
IDTH="%"></COLGROUP>
4.0 4.0 4.0 4.0 4.0 4.0 4.0 4.0
Column Columns Spanned Column Width Width Percent Group columns Columns Spanned
Group Width Width Percent
(groups column attributes)
(groups column structure)
FRAMES
4.0* Frame Document <FRAMESET></FRAMESET> <FRAMESET 4.0* Row Heights (instead of
<BODY>) (pixels or %)
4.0* Row Heights 4.0* Column Widths 4.0* Column Widths 4.0* Borders 4.0* Border
Width 4.0* Border Color N3 Frame Spacing
ROWS=,,,></FRAMESET> <FRAMESET (* = relative size) ROWS=*></FRAMESET> <FRAMESET
(pixels or %) COLS=,,,></FRAMESET> <FRAMESET (* = relative size) COLS=*></FRAMES
ET> <FRAMESET FRAMEBORDER="yes|no"></FRAMESET> <FRAMESET BORDER=?></FRAMESET> <F
RAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> <FRAMESET FRAMESPACING=?></FRAMESET> <
FRAME> <FRAME SRC="URL"> <FRAME NAME="***"|_blank|_self|_parent|_top> <FRAME MAR
GINWIDTH=?>
4.0* Define Frame Display Document 4.0* Frame Name 4.0* Margin Width 4.0* Margin
Height 4.0* 4.0* Scrollbar? 4.0* Not Resizable 4.0* Borders 4.0* Border Color 4
.0* 4.0 4.0 4.0 Unframed Content Inline Frame Dimensions Dimensions
(contents of an individual frame)
(left and right margins)
<FRAME MARGINHEIGHT=?> (top and bottom margins) <FRAME SCROLLING="YES|NO| AUTO">
<FRAME NORESIZE> <FRAME FRAMEBORDER="yes| no"> <FRAME BORDERCOLOR="#$$$$$$"> <N
OFRAMES></NOFRAMES> <IFRAME></IFRAME> <IFRAME WIDTH=? HEIGHT=?></IFRAME> <IFRAME
WIDTH="%" HEIGHT="%"></IFRAME>
(for non-frames browsers) (takes same attributes as FRAME)
SCRIPTS AND JAVA
Script Location Type Language 4.0* Other Content Applet File Name Parameters
<SCRIPT></SCRIPT> <SCRIPT SRC="URL"></SCRIPT> <SCRIPT TYPE="***"></SCRIPT> <SCRI
PT LANGUAGE="***"></SCRIPT> <NOSCRIPT></NOSCRIPT> <APPLET></APPLET> <APPLET CODE
="***"> <APPLET PARAM NAME="***">
(if scripts not supported)
Location Identifier Alt Text Alignment Size Spacing Server Script
<APPLET CODEBASE="URL"> <APPLET NAME="***"> <APPLET ALT="***"> <APPLET ALIGN="LE
FT|RIGHT| CENTER"> <APPLET WIDTH=? HEIGHT=?> (in pixels) <APPLET HSPACE=? VSPACE
=?> (in pixels) <SERVER></SERVER>
(for references) (for non-Java browsers)
N4
MISCELLANEOUS
Comment Prologue Searchable Prompt Send Search URL of This File Base Window 4.0*
Name Relationship N4 Linked File Meta Information Style Sheets Bidirect Off
<!-- *** --> <ISINDEX> <ISINDEX PROMPT="***"> <A HREF="URL?***"></a> <BASE HREF=
"URL"> <BASE TARGET="***"> <LINK REV="***" REL="***" HREF="URL"> <LINK TYPE="***
" SRC="***"></LINK> <META> <STYLE></STYLE> <BDO DIR=LTR|RTL></BDO>
(not displayed by the browser) (indicates a searchable index) (text to prompt in
put) (use a real question mark) (must be in header) (must be in header) (in head
er)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
(must be in header) (implementations vary) (for certain character sets)
4.0