Scribd
Upload
1K views

See Working Example. Anchor Tutorial

This document provides descriptions of common HTML tags used in website design. Some key tags include: <A> for creating hyperlinks, <BODY> which contains the content of a webpage, <IMG> for inserting images, <FORM> for creating forms, and <H1-H6> for different levels of headings. The document lists over 40 HTML tags in alphabetical order and briefly describes their function.

Uploaded by

Frenzie Mae Vasquez Rivera
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1K views

See Working Example. Anchor Tutorial

This document provides descriptions of common HTML tags used in website design. Some key tags include: <A> for creating hyperlinks, <BODY> which contains the content of a webpage, <IMG> for inserting images, <FORM> for creating forms, and <H1-H6> for different levels of headings. The document lists over 40 HTML tags in alphabetical order and briefly describes their function.

Uploaded by

Frenzie Mae Vasquez Rivera
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML Tags to help you create your own  <BASE> Supply a base address that

website design must be used for resolving relative


URI's to absolute URI's.
Below are the most common used html tags
used in website design and a short description  <BASEFONT> Change the appearance
of the function of each. Some have examples of the default font that is used to
of how they are used with their html codes. draw the text.
Website HTML tags are arranged in
alphabetical order.  <BDO></BDO> This element overrides
the bidirectional algorithm, the
 <A></A> This element is what the default algorithm to resolve the
hyperlinked structure of the World direction to show the text.
Wide Web is based on. It is used in
two ways:  <BGSOUND> Play a background sound
1. Create a hyperlink to another when your webpage is opened. This
anchor (Link to another page or element must be placed in the HEAD
website) section of the document
2. Create an anchor in a document .
See working example. or see anchor  <BIG></BIG> Increase the current size
tutorial of the font by 1. The maximum size is
7.
 <ABBR></ABBR> Identifies that the
content is an abbreviated form of  <BLACKFACE></BLACKFACE> This
some kind. element will render the text in a
double-weight boldface font.
 <ACRONYM></ACRONYM> Identifies
that some text is an acronym.  <BLINK></BLINK> Changes the text to
blinking. Drives people insane.
 <ADDRESS></ADDRESS> Specifies *smiles*
information such as authorship and
contact details for the current  <BLOCKQUOTE></BLOCKQUOTE> This
document. Browsers should render is used to enclose larger quotations
the content with paragraph-breaks from other works in the page. See
before and after. working example.
See working example
 <BODY></BODY> This element
 <APPLET></APPLET> Embed a Java contains the body of your website
applet into your website document. document. If a <HEAD> section is
present in the page then the body
 <AREA></AREA> Used to implement a must be placed after this section.
client-side image map.
 <BQ></BQ> This element is an alias of
 <AUDIOSCOPE> This element displays the blockquote element.
the audioscope, the graphical display
of the amplitude of the current sound  <BR> Line Break. Break the current
over time. line and continue on the next line.

 <B></B> Change your website text to  <BUTTON></BUTTON> This attribute


bold. See working example. creates a button that the user can
<bold></bold> or <strong></strong> push.
can also be used.
 <CAPTION></CAPTION> Specify the  <DFN></DFN> This is a element that is
caption of a table. This element is used to indicate a word or phrase that
only valid inside the TABLE element. is being defined.

 <CENTER></CENTER> Centers  <DIR></DIR> Create a directory list.


everything inside the opening and See working example.
closing element.
This tag is equivalent to <DIV  <DIV></DIV> HTML DIV tags. This
align="center">. See working example element is a general container for a
part of the contents of a page.
 <CITE></CITE> Used for citations or Through the DIV element you can add
references to other sources. See attributes, like style information, to
working example this whole division. The DIV element
will not show anything when used
 <CODE></CODE> Used for source without any other attribute. A division
code examples. will terminate a paragraph opened
with the P element.
 <COL> This element sets the attribute <DIV align="center"> is the same as
values for one or more columns. the deprecated <CENTER> element.

 <COLGROUP> This tag creates a  <DL></DL> Create a definition list.


column group and sets attribute This is a list where each item consists
values for all the columns in this of two parts.
group.
 <EM></EM> Put "emphasis" on the
 <COMMENT></COMMENT> Used to enclosed text.
insert comments in the HTML source
which will be ignored by the browser.  <EMBED></EMBED> The EMBED
All HTML elements inside the element lets you display output from
comment will be ignored. You can use a plug-in application in an HTML
this code to put comments in your document.
pages, which can help you when you
have to edit the source later.  <FIELDSET></FIELDSET> Group a set
HTML generating programs of related controls in a form together.
sometimes store program-specific See working example
information inside comments,
so they will not be visible, but still  <FONT></FONT> HTML font tags
available to the program. change the font which is used to draw
This code is not a container, but inside the text. See working example
it you can put one or more
comments,  <FORM></FORM> HTML form tags.
by surrounding with "--". The end of Create a form inside a document. See
the code is indicated with the working example
sequence -->.
 <FRAME> In a page with frames, this
 <DD></DD> The description of a term element defines how the a specific
in a definition list. frame looks and what is initially
shown inside the frame, when the
 <DEL></DEL> This is a tag that is used framed page is loaded.
to indicate webpage text that has This element is only allowed inside a
been deleted. FRAMESET element. Frames tutorial
 <FRAMESET></FRAMESET> Container  <IMG> HTML image tag. Place an
for creating a document that consists image in the document. See working
of several frames. Frames tutorial Example

 <H1></H1> The elements H1, H2, H3,  <INPUT> Create a control for a form.
H4, H5 and H6 are used to create A control is an element which the
several levels of headers, with H1 as user can use to enter data, like
the most important header and H6 as textboxes, radiobuttons and
the least important. See working checkboxes and is only valid inside
example the FORM element.

 <HEAD></HEAD> Container for  <ISINDEX> This element will show an


elements describing the current text input field. After pressing the
document. This section contains no <Enter> key the browser will
contents the browser should display construct a new URL, with the current
in the body of the text. address, a question mark and the text
The following elements are allowed the user entered in the text field, and
inside the HEAD section : send it to the server

BASE  <KBD></KBD> This is used to identify


BASEFONT text that a user is supposed to enter.
BGSOUND
ISINDEX  <LABEL></LABEL> Attach information
LINK to a specific field of a form.
META
SCRIPT  <LAYER></LAYER> With this element
STYLE you can create several layers of
TITLE content on a page. These layers can
be stacked on top of each other,
 <HR> Draw a horizontal rule. See showing parts of underlying layers
working example through non-occupied space.

 <HTML></HTML> The container for a  <LEGEND></LEGEND> Give the


complete HTML document. caption for a group of related
controls, created with the FIELDSET
 <I></I> Change the text to italic. See element. See working example
working example.
<italic></italic> can also be used.  <LI></LI>List tags Identify an item in a
list. See working example.
 <IFRAME></IFRAME> This element is
a container to create an inline or  <MAP></MAP> This element is a
floating frame. A floating frame is a container for the map that is used in a
frame in which the contents of client-side image map.
another HTML document can be seen.
 <MARQUEE></MARQUEE> HTML
 <ILAYER></ILAYER> With this element marquee tag. This element is a
you can create several layers of container that enables you to create a
content on a page. These layers can scrolling text marquee. See working
be stacked on top of each other, example
showing parts of underlying layers
through non-occupied space.  <MENU></MENU> A container for a
list of menu items.
 <META> This element supplies meta-  <PRE></PRE> This element allows you
information about the current to show preformatted text as it is,
document. using the supplied whitespace of the
text.
 <NOBR></NOBR> The NOBR element
stands for NO BReak. This means all  <Q></Q> This is used to enclose short
the text between the start and end of quotations from other works in the
the NOBR elements cannot have line page.
breaks inserted between them.
 <S></S> Render text as strikethrough.
 <NOEMBED></NOEMBED> This See working example.
element defines content within
EMBED content that is to be ignored  <SAMP></SAMP> This element
by browsers that can activate the describes text that is output from a
EMBED plug-in application. program.

 <NOFRAMES></NOFRAMES> This  <SCRIPT></SCRIPT> This element adds


element provides a way to create the possibility of programming inside
alternative content that is intended a HTML document by using a scripting
for browsers that can't show frames, language.
or are configured not to show them. A
browser that displays the frames  <SELECT></SELECT> This element lets
ignores the contents of the you create a listbox as an input field
NOFRAMES element. on a form.
See working example.
 <OBJECT></OBJECT> The object
element allows the author to embed  <SERVER></SERVER> This element is
an object into the document. This used to write JavaScripts that will be
element also replaces the APPLET executed on the server, in the process
element. of serving the page to the browser.

 <OPTION></OPTION> This describes  <SMALL></SMALL> Draw the text


an option in a listbox of a form. See using a smaller font than the one that
working example is used for normal text.

 <P></P> This indicates a paragraph in  <SPACER> With a spacer you can


the document. It is a container but control the horizontal whitespace that
most browsers allow you to omit the appears between words in a line, the
closing element. vertical whitespace that appears
between lines on a page, or set up
 <PARAM> This element is for rectangular spacing elements.
supplying parameters to a JAVA
applet or another object and is only  <SPAN></SPAN> This element is used
valid inside the APPLET and OBJECT to create a structure in a document.
elements. By using this element you can give a
part of the document a name, or
 <PLAINTEXT></PLAINTEXT> All HTML apply style sheet information to the
elements inside this container are part.
ignored by the browser, and shown as See Working Example
they were only text.
 <STRIKE></STRIKE> Render text as
strikethrough. Same as the <S> tag.
 <STRONG></STRONG> Render the  <U></U>
text with strong emphasis. See Underline your text.
working example
 <UL></UL>
 <STYLE></STYLE> This element is a Create an unordered list of items,
container for style sheet elements to where unordered means the
use with this document. individual items are not numbered,
but have a bullet in front of them. If
 <SUB></SUB> This is a container for you want numbered items use an
text that should be displayed as a ordered list. The items in the list are
subscript, and, if practical, using a identified with the LI element.
smaller font (compared with normal See working example
text). See working example.
 <VAR></VAR>
 <SUP></SUP> Display the text as a Used to describe a metasyntactic
superscript. See working example variable, where the user is to replace
the variable with a specific instance.
 <TABLE></TABLE> Typically displayed in italics.
HTML table tags. Create a table layout
which can contain cells in rows and  <WBR>
columns. The cells of a table are The WBR element stands for Word
specified with the TR, TH and TD Break.
elements.

 <TBODY></TBODY>
This element defines the body part of
Commonly Used
a table. HTML Codes
 <TD></TD>
HTML table tags. The container for a
cell in a table. Inside this you can put
Header tags
all the HTML coding
HTML Code Sample
you want to appear in the cell.

 <TEXTAREA></TEXTAREA> <H1>Header 1</H1>   


Define a multiline text field in a form.
This element is only valid inside the Header 1
FORM element. <H2>Header 2</H2>
Header 2
 <TFOOT></TFOOT> <H3>Header 3</H3>
This element defines the footer of a Header 3
table. <H4>Header 4</H4>
Header 4
 <TITLE></TITLE> <H5>Header 5</H5> Header 5
Specify the title of the HTML
document. This element is only <H6>Header 6</H6>
allowed inside the HEAD element. Header 6

 <TR></TR>  
Define a row inside a table.

Text formatting tags


HTML Code Sample </UL>

<B>bold</B> bold
 
<U>underline</U> underline

<I>italic</I> italic Definition list


HTML Code Sample

  <DL>
<DT>Term Term

Alignment tags <DD>Description Description


</DL>
HTML Code Sample

<P ALIGN=Left>your  
text your text

<P
Horizontal line tag
ALIGN=Center>your HTML Code Sample
your text
text
<HR>
<P ALIGN=Right>your
your text <HR SIZE=6
text
WIDTH=50%>

 
 

Ordered list (numbers) Break tags


HTML Code Sample HTML Code Description

<OL> <P> Paragraph break


<LI>First row 1. First row
2. Second row <BR> Forced line break
<LI>Second row
</OL>
 
 
Indentation tag
Unordered list (bullets) HTML Code Sample

HTML Code Sample Here is some text. Here is some text.


<DIR>Here is one line
<UL>  First row of indented text.<BR> Here is one
<LI>First row  Second row Here is another line of line of
<LI>Second row indented text. indented
text.
Here is name">Introduction</A
</DIR> another line >
of indented
text.  

  Graphic tags
HTML Code Sample
External link tags
HTML Code Sample <IMG
SRC="balloon.gif">
<A HREF="filename or (By default, the
URL">description</A> graphic is left aligned.)
CNN
For example: <IMG
<A HREF="filename SRC="balloon.gif"
or URL">CNN</A> Align=right>

  <P ALIGN=Center>
<IMG
SRC="balloon.gif">
Internal link tag (anchor
<IMG
tag) SRC="balloon.gif"
Align=right
HTML Code Sample
Vspace=20>
<A NAME="anchor
<IMG
name">Section name</A>
SRC="balloon.gif"
Align=left Hspace=30>
For example: Introduction
<A NAME="anchor
name">Introduction</A
>

Internal link tag (link tag)


HTML Code Sample

<A HREF="#anchor
name">Destination</A>
Introduction
For example:
<A HREF="#anchor

You might also like