Basic HTML Elements

TAG Element name Explanation Attributes
HTML Example View HTML

Contents

  1. Document Elements
  2. Body Elements
  3. Style and Appearance Elements
  4. Anchor Element: Links and Named Targets
  5. Image Element
  6. List Elements
  7. Other Elements

Document Elements

HTML HTML Tells browser that the included text is in HTML format Element includes Head, Body, and other elements
<HTML>
<HEAD></HEAD>
<BODY>
</BODY>
</HTML>
HEAD Header Includes 'header', non-displaying information about the document, like the TITLE and other descriptive tags Element can include Title, Meta, Base and other elements
<HEAD>
<TITLE>Basic HTML Elements</TITLE>
</HEAD>
TITLE Document Title Title that appears in Browser header and on bookmark lists. Should be concise and meaningful.
<TITLE>Basic HTML Elements</TITLE> [see top of this page]
BODY Document Body Defines the content of the document. BGCOLOR, BACKGROUND, TEXT, LINK, ALINK, VLINK
<BODY> </BODY> See the background of this page

Body Elements

H1
H2
H3
H4
H5
H6		 Heading Text of the Element is a section heading. Headings are numbered and displayed in order of decreasing importance. Headings are separate paragraphs. ALIGN
<H1 ALIGN="CENTER">Page Name</H1>
<H2>Section Heading</H2>

Page Name

Section Heading
P Paragraph Defines paragraphs in the document. Usually paragraphs ALIGN
<P>First paragraph, no content.</P>
<P>Second paragraph, slightly more content here.</P> 		First paragraph, no content.

Second paragraph, slightly more content here.
BR Break or Line Break Puts a single break in the middle of a paragraph, list item, etc.
<P>First paragraph, <BR> no content.</P> First paragraph,
no content.
HR Horizontal Rule Runs a horizontal line across the page (or table cell) SIZE
WIDTH
<HR SIZE="10" WIDTH="50%">
DIV Division Defines a particular section of the document. Used to spread document attributes across a whole section. ALIGN
VALIGN, etc
<DIV ALIGN="RIGHT">
</DIV>
BLOCKQUOTE Block Quote Displays a block of text quoted from another document. Usually indented on all four sides.
<BLOCKQUOTE>Far off in a distant backwater of the unfashionable end of the western spiral arm of the galaxy....</BLOCKQUOTE>

Far off in a distant backwater of the unfashionable end of the western spiral arm of the galaxy...
PRE Preformatted Text Uses formatting (spacing, tabs, carriage returns, breaks, etc.) exactly as in the plain ASCII text of the document. Usually displays in a fixed font, such as Courier.
<PRE>User Services Begins
Here</PRE> 
User Services    Begins
      Here

Style and Appearance Elements

STRONG Strong emphasis (logical formatting). Very important text. Generally displays as Bold.
<STRONG>Very Important</STRONG> Very Important
EM Emphasis (logical formatting) Important text. Generally displays as Italic
<EM>Important information</EM> Important information
CITE Citation Title of a cited work. Generally displays as Italic
<CITE>Huckleberry Finn,</CITE>, by Mark Twain. Huckleberry Finn, by Mark Twain
CODE Computer Code Indicates computer code, such as programming languages, computer commands, etc. Usually displays in a fixed font.
<CODE>cd /ahome/userid/public/www-data</CODE> cd /ahome/userid/public/www-data
B Bold Displays text as bold.
<B>Bloody, bold and resolute</B> Bloody, bold and resolute
I Italic Displays text as italic
<I>Caveat emptor</I>: let the buyer beware! Caveat emptor: let the buyer beware!
U Underline Shows text as underlined (not supported by older versions of Netscape).
<U>Underlined Text</U> Underlined Text
TT Fixed font Displays text in a 'fixed' font (in which each letter is the same size, such as Courier)-- similar to PRE , CODE, etc.
<TT>Fixed Text</TT> Fixed Text
FONT Font appearance. Sets relative or absolute font size, font color. SIZE
COLOR
<FONT SIZE="+2" COLOR="#bb4732">Colored text</FONT> Colored text

Anchor Element: Links and Named Targets

A
HREF="URL"		 Hypertext link (Special case of the Anchor element) Allows the user to retrieve the document at the specified URL by clicking on the contents of the element. (Usually displayed as blue and underlined.) The URL may include a named target. NAME, REL, REV URN,TITLE,TARGET
Go to <A HREF="htmlchart.html#named_target">
named anchor section</A>		 Go to named anchor section.
A
NAME="name"		 Named Anchor, or target Sets a 'target'/'anchor' which hypertext links can point to. HREF, REL, REV URN,TITLE,TARGET
<A NAME="named_target">Named Target</A> Named Target

Image Element

IMG
 Image Displays an 'inline' (embedded in the document) image in the document. Source (SRC="") gives the full or partial URL of the image file to use; ALT gives the alternative/caption text for the image SOURCE, ALT, HEIGHT, WIDTH, BORDER
<IMG SRC="/icons/mthawk.gif" ALT="Lehigh mountain hawk"> Lehigh mountain hawk

List Elements

UL Unordered List Bullet List. Items in the list are LI elements.
Lists can be nested.		 TYPE
<UL>
<LI>First Item
<LI>Second Item
</UL>
  • First Item
  • Second Item
OL Ordered List Numberd (or lettered) list.
Items in the list are LI elements.
Lists can be nested.		 TYPE
<OL TYPE="A">
<LI>First Item
<LI>Second Item
</OL>
  1. First Item
  2. Second Item
LI List item An item in a bullet or numbered list.
List items can include other lists (nesting lists), line breaks, and other HTML tags.
Close tags </LI> are optional.
<UL>
<LI>List item One
<UL>
<LI>Niggle One
<LI>Niggle Two
</UL>
<LI>List item Two
</UL>
  • List item One
    • Niggle One
    • Niggle Two
  • List item Two
DL Descriptive List or
Definition List		 A list of terms with definitions or entries with annotations.
Contains DT and DD elements.
DT elements are the 'terms' or main entries
DD elements are the definitions or annotations.
<DL>
<DT>Hack
<DD>To program skillfully.
<DT>Crack
<DD>To break into a computer system
</DL>
Hack
To program skillfully.
Crack
To break into a computer system.
DT Term in Definiton list In an annotated list, the item or term being annotated
<DL>
<DT>Hack
<DD>To program skillfully
</DL>
Hack
To program skillfully.
DD Definition in Definition list In an annotated list, the annotation or definition 
<DL>
<DT>Hack
<DD>
   <OL>
   <LI>[v.]to program skillfully
   <LI>[n.,archaic]a makeshift, a kludge
   </OL>
</DD>
</DL>
Hack
  1. [v.] to program skillfully
  2. [n.,archaic] a makeshift, a kludge

Other Elements

<!-- --> Comment Inserts a 'comment' which does not display on the browser screen, but can be seen in the file itself when viewing the source or editing the HTML.
<!-- This is a comment -->

created 9/97 by JAH