HTML Basics, Codes, and Tags

If you're doing business on the Internet, taking the time to learn how to design your own web site and write your own HTML code (hypertext markup language) will play a major role in your success. Not only will learning HTML coding provide you with the freedom to update your own HTML documents, but it will also save you a great deal of money, as you will be able to avoid hiring a professional web designer.

If you're looking for some HTML tags to spice up your web site, you've come to the right place. You will find a variety of HTML codes and tips to assist you below.

However, before reviewing the HTML tags, if you're new to HTML and web site design, the following section will assist you in creating an HTML web page. For additional web site design information, make sure you don't miss the web design articles and tutorials at the bottom of this page.


Creating an HTML Page


A web page is created using a language called, Hypertext Markup Language, better known as HTML Code. You can write your own coding within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for you.

HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters.

The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket.

<font size=2>

An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser.

<font size=2>

Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and followed by an equal (=) sign.

The value follows the equal sign and is enclosed in quotes.

<font size=2>


Basic HTML Document Code Structure

Begin writing your HTML tags by creating your document's basic layout. Copy and paste this code into your text or HTML editor.

<HTML>
<HEAD>
<TITLE>Your Page Title</TITLE>
</HEAD>
<BODY>

This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded.

For a complete list of HTML codes, tags and examples, see the HTML chart below.

</BODY>
</HTML>

<HTML> - Begins your HTML document.

<HEAD> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.

<TITLE> - The TITLE of your page. This will be visible in the title bar of the viewers’ browser.

</TITLE> - Closes the HTML <TITLE> tag.

</HEAD> - Closes the HTML <HEAD> tag.

<BODY> - This is where you will begin writing your document and placing your HTML codes.

</BODY> - Closes the HTML <BODY> tag.

</HTML> - Closes the <HTML> tag.


How to Copy and Paste HTML Tags / Codes

To copy and paste the HTML tags / codes from the HTML chart below into the HTML of your web page, place your mouse pointer over the beginning of the HTML code you would like to copy.  Next, click and hold your left mouse button and drag your mouse over all the HTML code you would like to copy (Example of highlighted text). Your HTML code should now be highlighted. Go to "Edit" - "Copy" on your web browser's toolbar and then place your cursor within your HTML code where you would like to place the code. Right click on your mouse and go to "Paste." Your HTML code should now be displaying within your HTML document.

To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page.

HTML Tags Chart

Tag

Name

Code Example

Browser View
<!-- comment <!--This can be viewed in the HTML part of a document--> Nothing will show
*TIP* The comment tag is used to display text within your HTML document that will not be viewable on your web page. They enable you to mark the beginning and end of sections in your HTML code for easy editing.
<A - anchor <A HREF="http://www.yourdomain.com/">Visit Our Site</A> Visit Our Site *TIP* This code is used to create a link. To link to a page within the same directory of your website, you only need to include the page name within the HTML code. Example: example.html. When linking to a page within your website in a different directory, you must include the directory name. Example: yourdirectory/example.html. When linking to another website, you must include the full URL beginning with http.
<B> bold <B>Example</B> Example
<BIG> big (text) <BIG>Example</BIG> Example *TIP* To increase the size of your word even further, you can add two BIG tags side by side.
<BODY> body of HTML document <BODY>The content of your HTML page</BODY> Contents of your web page *TIP* The contents of your web page is displayed between the BODY tags. This includes everything that is displayed when viewed through a web browser.
<BR> line break The contents of your page<BR>The contents of your page The contents of your web page
The contents of your web page
<CENTER> center <CENTER>This will center your contents</CENTER>

This will center your contents
<DD> definition description <DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>
Definition Term
Definition of the term
Definition Term
Definition of the term
<DL> definition list <DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>
Definition Term
Definition of the term
Definition Term
Definition of the term
<DT> definition term <DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>
Definition Term
Definition of the term
Definition Term
Definition of the term
<EM> emphasis This is an <EM>Example</EM> of using the emphasis tag This is an Example of using the emphasis tag
<EMBED>
 embed object <EMBED src="yourfile.mid" width="100%" height="60" align="center">
*TIP* When embedding sound in your page, the sound file must be in the same directory as your web page. If your sound file is located in another directory, you must include the directory within your link. Example: yourdirectory/sound.mid
<EMBED> embed object <EMBED src="yourfile.mid" autostart="true" hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid" loop="1"></noembed>
<bgsound src="wonderfu.mid" autostart="false" loop="1">
Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music.
<FONT> font <FONT FACE="Times New Roman">Example</FONT> Example *TIP*You can change the font style to whatever you would like, but keep in mind, your visitors must have the font you select on their computer, or your page will not be displayed as you intended. Try to select a common font. To find the fonts you have on your computer, open your word processing program and click on the font drop down menu.
<FONT> font <FONT FACE="Times New Roman" SIZE="4">Example</FONT> Example *TIP* You can change the size of your font by adding SIZE= whatever number you would like, within your FONT tag.
<FONT> font <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example</FONT> Example *TIP* You can change the color of your font by adding COLOR= whatever HTML color code you would like, within your FONT tag.
<FORM> form <FORM action="mailto:you@yourdomain.com">
Name: <INPUT name="Name" value="" size="10"><BR>
Email: <INPUT name="Email" value="" size="10"><BR>
<CENTER><INPUT type="submit"></CENTER>
</FORM>
Name: *TIP* Forms are processed via a CGI script that resides on your server within your cgi-bin. Visit the Webmaster Resource section for a list of sites offering free scripts.
Email:
<H1> heading 1 <H1>Heading 1 Example</H1>

Heading 1 Example

<H2> heading 2 <H2>Heading 2 Example</H2>

Heading 2 Example

<H3> heading 3 <H3>Heading 3 Example</H3>

Heading 3 Example

<H4> heading 4 <H4>Heading 4 Example</H4>

Heading 4 Example

<H5> heading 5 <H5>Heading 5 Example</H5>
Heading 5 Example
<H6> heading 6 <H6>Heading 6 Example</H6>
Heading 6 Example
<HEAD> heading of HTML document <HEAD>Contains elements describing the document</HEAD> Nothing will show
<HR> horizontal rule <HR>
Contents of your web page *TIP* The HR tag is used to divide subjects on your web page. You can specify the height, width, color and shading values. Examples Below.
Contents of your web page
<HR> horizontal rule <HR WIDTH="50%" SIZE="3"> Contents of your web page
Contents of your web page
<HR> horizontal rule <HR WIDTH="50%" SIZE="3" NOSHADE> Contents of your web page
Contents of your web page
<HR>
(Internet
Explorer)		 horizontal rule <HR WIDTH="75%" COLOR="*TIP* This is the HTML color code." SIZE="4"> Contents of your web page
Contents of your web page
<HR>
(Internet
Explorer)		 horizontal rule <HR WIDTH="25%" COLOR="*TIP* This is the HTML color code. Click here to view the color chart ..added soon. SIZE="6"> Contents of your web page
Contents of your web page
<HTML> hypertext markup language <HTML><HEAD><META><TITLE>Title of your web page</TITLE></HEAD><BODY>HTML web page contents</BODY></HTML> Contents of your web page
<I> italic <I>Example</I> Example
<IMG> image <IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a sentence about your web site"> a sentence about your site *TIP* You can resize your image simply by changing the height and width within your HTML document. In addition, you can add the ALT element to assist you in ranking higher in the search engines. Place a short sentence about your website, filled with your most important keywords. The text will only be displayed on your website while your image loads or when you place your mouse over it.
<INPUT> input field Example 1:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 1: *TIP* You can change the size of your INPUT box simply by changing the SIZE value. In addition, you can change the amount of text input by changing the MAXLENGTH value.
<INPUT>
(Internet Explorer)		 input field Example 2:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 2: *TIP* You can change the font, text color, text size and the background color, by changing the STYLE attributes.
<INPUT> input field Example 3:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2"><TR><TD BGCOLOR="#8463FF"><INPUT type="text" size="10" MAXLENGTH="30"></TD><TD BGCOLOR="#8463FF" VALIGN="Middle"> <INPUT type="image" name="submit" src="yourimage.gif"></TD></TR> </TABLE>
</FORM>
Example 3: *TIP*You can use a graphic image in place of the submit button to spice up your page. This example is set up in a TABLE with the TD background color set to #8463FF. The same color as the images background. It all blends together seamlessly.
<INPUT> input field Example 4:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Enter Your Comments:<BR>
<TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20 MAXLENGTH=100></TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">
<INPUT type="Reset" VALUE="Clear">
</FORM>
Example 4: *TIP* You can change the size of your text box by changing the number of ROWS and COLS (columns).
<INPUT> input field Example 5:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION >option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit" VALUE="Submit"></CENTER>
</FORM>

Example 5: *TIP* You can create a default selection in your OPTION list by adding the word SELECTED right after the word OPTION between the lesser than and greater than symbols. In this example, option 2 is the default selection.

Select an option:

<INPUT> input field Example 6:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Select an option:<BR>
<INPUT type="radio" name="option"> Option 1
<INPUT type="radio" name="option" CHECKED> Option 2
<INPUT type="radio" name="option"> Option 3
<BR>
<BR>
Select an option:<BR>
<INPUT type="checkbox" name="selection"> Selection 1
<INPUT type="checkbox" name="selection" CHECKED> Selection 2
<INPUT type="checkbox" name="selection"> Selection 3
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 6: *TIP* You can create a default selection in your RADIO and CHECKED list by adding the word CHECKED right after the OPTION elements between the lesser than and greater than symbols. In this example, option 2 and selection 2 are the default selections.

Select an option:
Option 1
Option 2
Option 3

Select an option:
Selection 1
Selection 2
Selection 3
<LI> list item Example 1:

<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>

Example 2:

<OL type="i">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>		 Example 1: *TIP* You can change the style of your bullets by adding TYPE= disc, circle or square right after LI between the lesser than and greater than symbols.
  • List item 1
  • List item 2
  • List item 3


Example 2:

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
<LINK> link Visit our <A HREF="http://www.yourdomain.com/">site</A> Visit our site
<MARQUEE>
(Internet
Explorer)		 scrolling text <MARQUEE " loop="-1" scrollamount="2" width="100%">Example Marquee</MARQUEE> Example Marquee *TIP* You can change the background color of your MARQUEE by changing the HTML color code #CCCCCC to the left. The loop determines how many times the words will scroll and is set to -1, which is indefinite. It can be set to whatever you would like. The SCROLLAMOUNT determines the speed your text will scroll.
<MENU> menu <MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>
  • List item 1
  • List item 2
  • List item 3
<META> meta <META name="Description" content="Description of your site">
<META name="keywords" content="keywords describing your site">		 Nothing will show *TIP*The META description and keyword TAGS are used to enable search engines to properly index your website. It is VERY important to use the best possible description of your site and include keywords within your description. In addition, to achieve a higher ranking in the search engines, try to use keyword phrases instead of single keywords and focus your keyword phrases on just a few specific topics that best describe your website. Utilize your TITLE and ALT tags along with the TEXT of your webpage to include your keyword phrases in readable sentences. By combining all of these optimization methods, you will increase your ranking in the search engines immensely.
<META> meta <META HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> Nothing will show *TIP* The META refresh tag is used to automatically redirect your visitor to another web address. This tag is generally used when a website moves and needs to have traffic redirected to the new location.
<META> meta <META http-equiv="Pragma" content="no-cache"> Nothing will show *TIP* The META no-cache tag is used to prevent the users browser from storing a webpage in their cache file. The cache file stores webpages for quicker loading the next time the user visits the website. If you make changes to your webpage and you choose not to use the no-cache tag, the user would not see your changes, but the original page that would be loaded from the cache file.
<META> meta <META name="rating" content="General"> Nothing will show *TIP* The META rating tag is used to enable you to rate your website with the search engines. A general rating means that your webpage contains no adult content and is safe for all ages.
<META> meta <META name="ROBOTS" content="ALL"> Nothing will show *TIP* The META robots content all tag is used to direct the search engines to index all of your webpage content.
<META> meta <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> Nothing will show *TIP* 'The META robots noindex tag is used to tell the search engines not to index a webpage.
<OL> ordered list Example 1:

<OL>
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Example 2:

<OL type="a">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

 Example 1:
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Example 2:

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
<OPTION> listbox option <FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>
Select an option: *TIP* You can create a default selection in your OPTION list by adding the word SELECTED right after the word OPTION between the lesser than and greater than symbols. In this example, option 2 is the default selection.

<P> paragraph This is an example displaying the use of the paragraph tag. <P> This will create a line break and a space between lines.

Attributes:

Example 1:<BR>
<BR>
<P align="left">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.<BR>
<BR>
Example 2:<BR>
<BR>
<P align="right">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.<BR>
<BR>
Example 3:<BR>
<BR>
<P align="center">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.

This is an example displaying the use of the paragraph tag.

This will create a line break and a space between lines.

Attributes:

Example 1:

This is an example
displaying the use
of the paragraph tag.

Example 2:

This is an example
displaying the use
of the paragraph tag.

Example 3:

This is an example
displaying the use
of the paragraph tag.
<SMALL> small (text) <SMALL>Example</SMALL> Example *TIP* To decrease the size of your word even further, you can add two SMALL tags side by side.
<STRONG> strong emphasis <STRONG>Example</STRONG> Example
<TABLE> table Example 1:

<TABLE BORDER="4" CELLPADDING="2"  CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Example 2: (Internet Explorer)

" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Example 3:

>Column 1</TD>
<TD>Column 2</TD>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
</TABLE>
 Example 1: *TIP* To add additional columns to your table, simply add another TD tag. To add an additional row, add another TR tag followed by your TD tags. You can display your table with no border or change the width by changing the BORDER= to whatever number you would like.
Column 1 Column 2


Example 2: *TIP* You can change the color of your tables border by adding, BORDERCOLOR= #COLORCODE in the TABLE tag.

Column 1 Column 2


Example 3: *TIP* To change the color of your tables cell, add BGCOLOR= #COLORCODE within your TD tag.

Column 1 Column 2
Row 2 Row 2
<TD> table data <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>
Column 1 Column 2

<TH> table header <DIV align="center"><TABLE>
<TR>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
<TR>
<TD>Row 3</TD>
<TD>Row 3</TD>
<TD>Row 3</TD>
</TR>
<TR>
<TD>Row 4</TD>
<TD>Row 4</TD>
<TD>Row 4</TD>
</TR>
</TABLE>
</DIV>
Column 1 Column 2 Column 3
Row 2 Row 2 Row 2
Row 3 Row 3 Row 3
Row 4 Row 4 Row 4
<TITLE> document title <TITLE>Title of your HTML page</TITLE> Title of your web page will be viewable in the title bar. *TIP* The TITLE tag should contain a descriptive sentence describing your website. Make sure you include your most relevant keywords for better search engine ranking.
<TR> table row <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Column 1 Column 2

<TT> teletype <TT>Example</TT> Example
<U> underline <U>Example</U> Example
<UL> unordered list Example 1:<BR>
<BR>
<UL>
<LI>List item 1
<LI>List item 2
</UL>
<BR>
Example 2:<BR>
<UL type="disc">
<LI>List item 1
<LI>List item 2
<UL type="circle">
<LI>List item 3
<LI>List item 4
</UL>
</UL>		 Example 1:

  • List item 1
  • List item 2


Example 2:

  • List item 1
  • List item 2
    • List item 3
    • List item 4

HTML Code & Samples - Provided by Quality Online Network ™

Quality Pro Host - 100% Free Hosting. Sign up today.