Basic HTML Document Code Structure

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 name of the HTML page

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.

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>
HTML Tags Chart

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.
Tag Name Code Example Browser View


<a href="http://www.domain.com/">
<a - anchor Visit Our Site (Tip)
Visit Our Site</a>
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example (Tip)
body of
<body>The content of your HTML Contents of your web page
<body> HTML
page</body> (Tip)
document
<br> line break The contents of your page<br>The contents of The contents of your web
your page page
The contents of your web
page
<center>This will center your This will center your
<center> center
contents</center> contents
This is an <em>Example</em> of using This is an Example of using
<em> emphasis
the emphasis tag the emphasis tag
<embed src="yourfile.mid" width="100%"
<embed> embed object
height="60" align="center"> (Tip)
<bgsound
src="wonderfu.mid"
autostart="false"
<embed src="yourfile.mid" autostart="true"
loop="1" />
hidden="false" loop="false">
<embed> embed object Music will begin playing
<noembed><bgsound src="yourfile.mid"
when your page is loaded
loop="1"></noembed>
and will only play one time.
A control panel will be
displayed to enable your
visitors to stop the music.
<font face="Times New
<font> font Example (Tip)
Roman">Example</font>
<font face="Times New Roman"
<font> font
size="4">Example</font>
Example (Tip)
<font face="Times New Roman" size="+3"
<font> font
color="#ff0000">Example</font> Example (Tip)
<form
action="mailto:you@yourdomain.com">
Name: <input name="Name" value="" Name: (Tip)
size="10"><br>
<form> form Email:
Email: <input name="Email" value=""
size="10"><br> Submit
<center><input type="submit"></center>
</form>
<h1> heading 1 <h1>Heading 1 Example</h1>

heading of
<head>Contains elements describing the
<head> HTML Nothing will show
document</head>
document
horizontal Contents of your web page

<hr> <hr />
rule (Tip)
Contents of your web page
<hr> <hr width="50%" size="3" />
rule Contents of your web page
<hr> <hr width="50%" size="3" noshade />
rule Contents of your web page
<hr> Contents of your web page
horizontal <hr width="75%" color="#ff0000"
(Internet
rule size="4" /> Contents of your web page
Explorer)
<hr> Contents of your web page
horizontal <hr width="25%" color="#6699ff"
(Internet
rule size="6" /> Contents of your web page
Explorer)
<html>
<head>
<meta>
hypertext
<title>Title of your web page</title>
<html> markup Contents of your web page
</head>
language
<body>HTML web page contents
</body>
</html>
<i> italic <i>Example</i> Example
<img src="Earth.gif" width="41" height="41"
<img> image
border="0" alt="text describing the image" /> (Tip)
<li> list item Example 1: Example 1: (Tip)
<menu> • List item 1

<li type="disc">List item 1</li>
<li type="circle">List item 2</li> o List item 2
<li type="square">List item 3</li>
</MENU>  List item 3
Example 2:
Example 2:
<ol type="i">
<li>List item 1</li> i. List item 1
<li>List item 2</li> ii. List item 2
<li>List item 3</li> iii. List item 3
<li>List item 4</li>
</ol> iv. List item 4
<menu> • List item 1
<li type="disc">List item 1</li>
<menu> menu <li type="circle">List item 2</li> o List item 2
<li type="square">List item 3</li>
</menu>  List item 3
<ol> ordered list Numbered Numbered
<ol> 1. List item 1

<li>List item 1</li> 2. List item 2
</ol> Numbered Special Start
Numbered Special Start 5. List item 1

6. List item 2
<ol start="5"> 7. List item 3
<li>List item 3</li> Lowercase Letters
</ol> a. List item 1
b. List item 2
Lowercase Letters c. List item 3
d. List item 4
<ol type="a">
<li>List item 1</li> Capital Letters
<li>List item 3</li> A. List item 1
<li>List item 4</li> B. List item 2
</ol> C. List item 3
D. List item 4
Capital Letters
Capital Letters Special
<ol type="A"> Start
<li>List item 2</li> C. List item 1
<li>List item 3</li> D. List item 2
<li>List item 4</li> E. List item 3
</ol> F. List item 4
Lowercase Roman
Capital Letters Special Start Numerals
<ol type="A" start="3"> i. List item 1

<li>List item 1</li> ii. List item 2
<li>List item 2</li> iii. List item 3
<li>List item 3</li> iv. List item 4
</ol> Capital Roman Numerals
Lowercase Roman Numerals I. List item 1

II. List item 2
<ol type="i"> III. List item 3
<li>List item 1</li> IV. List item 4
<li>List item 3</li> Capital Roman Numerals
<li>List item 4</li> Special Start
</ol>
VII. List item 1
Capital Roman Numerals VIII. List item 2
IX. List item 3
<ol type="I">
<li>List item 1</li> X. List item 4
</ol>
Capital Roman Numerals Special Start
<ol type="I" start="7">

</ol>
<option> listbox option <form method=post action="/cgi- Select an option: (Tip)
bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
</select><br>
</center>
</form>
This is an example displaying the use of the This is an example
paragraph tag. <p> This will create a line displaying the use of the
break and a space between lines. paragraph tag.
Attributes: This will create a line break

and a space between lines.
Example 1:<br>
<br> Attributes:
<p align="left">
This is an example<br> Example 1:
displaying the use<br>
of the paragraph tag.<br> This is an example
<br> displaying the use
<p> paragraph
Example 2:<br> of the paragraph tag.
<br>
<p align="right"> Example 2:
This is an example<br>
displaying the use<br> This is an example
of the paragraph tag.<br> displaying the use
<br> of the paragraph tag.
Example 3:<br>
<br> Example 3:
<p align="center">
This is an example<br> This is an example
displaying the use<br> displaying the use
of the paragraph tag. of the paragraph tag.
<small> small (text) <small>Example</small> Example (Tip)
<strike> deleted text <strike>Example</strike> Example
strong
<strong> <strong>Example</strong> Example
emphasis
Example 1: Example 1: (Tip)
<table border="4" cellpadding="2" Column 1 Column 2
cellspacing="2" width="100%">
<table> table <tr>
<td>Column 1</td> Example 2: (Tip)
<td>Column 2</td>
</tr> Column 1 Column 2
</table>
Example 2: (Internet Explorer)
<table border="2" bordercolor="#336699"

cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 3: (Tip)
Example 3:
Column 1 Column 2
<table cellpadding="2" cellspacing="2"
width="100%"> Row 2 Row 2
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
<table border="2" cellpadding="2"
<tr>
<td> table data <td>Column 1</td>
Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<th> table header <div align="center"> Column Column Column
<table> 1 2 3
<tr> Row 2 Row 2 Row 2
<th>Column 1</th> Row 3 Row 3 Row 3
<th>Column 2</th> Row 4 Row 4 Row 4
<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>
Title of your web page will
document
<title> <title>Title of your HTML page</title> be viewable in the title bar.
title
(Tip)
<table border="2" cellpadding="2" Column 1 Column 2
<tr>
<tr> table row <td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt> Example
<u> underline <u>Example</u> Example

Example 1:<br>
<br>
Example 1:
<ul>
• List item 1
• List item 2
</ul>
<br>
Example 2:<br>
<ul> unordered list Example 2:
<ul type="disc">
• List item 1
• List item 2
<ul type="circle">
o List item 3
o List item 4
</ul>
</ul>
<meta> meta <meta name="Description" Nothing will show
content="Description of your site"> The META description and keyword
TAGS are used to enable search
<meta name="keywords" content="keywords engines to properly index your
website. It is VERY important to use
describing your site"> 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.
Nothing will show

The META refresh tag is used to
<meta HTTP-EQUIV="Refresh" automatically redirect your visitor
to another web address. This tag is
<meta> meta CONTENT="4;URL=http://www.yourdomain. generally used when a website
com/"> moves and needs to have traffic
redirected to the new location.
Nothing will show

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
<meta http-equiv="Pragma" content="no- the user visits the website. If you
<meta> meta
cache"> 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.
Nothing will show

The META rating tag is used to
enable you to rate your website
with the search engines. A general
<meta> meta <meta name="rating" content="General"> rating means that your webpage
contains no adult content and is
safe for all ages.
Nothing will show

The META robots content all tag is
<meta> meta <meta name="robots" content="all"> used to direct the search engines to
index all of your webpage content.
Nothing will show

<meta name="robots" The META robots noindex tag is
<meta> meta used to tell the search engines not
content="noindex,follow"> to index a webpage.
<head>
<link rel="stylesheet" type="text/css"
<link> link
href="style.css" />
</head>

Basic HTML Document Code Structure

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic HTML Document Code Structure

Uploaded by

Copyright:

Available Formats

Basic HTML Document Code Structure

<html> - Begins your HTML document.

<head> - Contains information about the page such as the

TITLE name of the HTML page

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

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

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

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

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

HTML Tags Chart

Tag Name Code Example Browser View

<h1> heading 1 <h1>Heading 1 Example</h1>

horizontal Contents of your web page

<menu> • List item 1

<ol> 1. List item 1

Numbered Special Start 5. List item 1

<ol type="A" start="3"> i. List item 1

Lowercase Roman Numerals I. List item 1

Capital Roman Numerals Special Start

<ol type="I" start="7">

Attributes: This will create a line break

<table border="2" bordercolor="#336699"

<u> underline <u>Example</u> Example

Nothing will show

Nothing will show

Nothing will show

Nothing will show

Nothing will show

You might also like