Scribd
Upload
84 views

HTML Tags

This document provides information about various HTML tags through a table with the following columns: HTML Tag, HTML Code Example, and Browser View. It describes common tags such as <p> for paragraphs, <h1>-<h6> for headings, <a> for anchors, <ol> and <ul> for ordered and unordered lists, and <form> for forms. It also covers less common tags like <menu> for menus, <embed> for embedding objects, and <marquee> for scrolling text. The document serves as a reference for the purposes and code implementations of many fundamental and some specialized HTML tags.

Uploaded by

Atep Nugraha Sii Ariel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
84 views

HTML Tags

This document provides information about various HTML tags through a table with the following columns: HTML Tag, HTML Code Example, and Browser View. It describes common tags such as <p> for paragraphs, <h1>-<h6> for headings, <a> for anchors, <ol> and <ul> for ordered and unordered lists, and <form> for forms. It also covers less common tags like <menu> for menus, <embed> for embedding objects, and <marquee> for scrolling text. The document serves as a reference for the purposes and code implementations of many fundamental and some specialized HTML tags.

Uploaded by

Atep Nugraha Sii Ariel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML Tags

Name

HTML Tag

HTML Code Example

Browser View

HTML
Comment

<!--

<!--This can be viewed in the HTML part of a


document-->

Nothing will show (Tip)

HTML Anchor

<a>

<a href="http://www.domain.com/">
Visit Our Site</a>

Visit Our Site (Tip)

HTML Bold

<b>

<b>Example</b>

Example

HTML
Big (Text)

<big>

<big>Example</big>

Example (Tip)

Body of HTML
Document

<body>

<body>The content of
your HTML page</body>

Contents of your web page (Tip)

HTML Line
Break

<br>

The contents of your page<br>The contents of The contents of your page


your page
The contents of your page

HTML Center

<center>

<center>This will center your


contents</center>

<dd>

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term
Definition of the term
Definition Term
Definition of the term

<dl>

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term
Definition of the term
Definition Term
Definition of the term

HTML
Definition
Term

<dt>

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term
Definition of the term
Definition Term
Definition of the term

HTML
Emphasis

<em>

This is an <em>Example</em> of using


the emphasis tag

This is an Example of using


the emphasis tag

HTML Embed
Object

<embed>

<embed src="yourfile.mid" width="100%"


height="60" align="center">

(Tip)

HTML Embed
Object

<embed>

<embed src="yourfile.mid" autostart="true"


hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid"
loop="1"></noembed>

HTML Font

<font>

<font face="Times New


Roman">Example</font>

Example (Tip)

HTML Font

<font>

<font face="Times New Roman"


size="4">Example</font>

Example (Tip)

HTML Font

<font>

<font face="Times New Roman" size="+3"


color="#ff0000">Example</font>

Example

HTML
Definition
Description

HTML
Definition List

This will center your contents

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.

(Tip)

HTML Form

Name
HTML
Heading
HTML
Heading
HTML
Heading
HTML
Heading
HTML
Heading
HTML
Heading

<form>

<form action="mailto:[email protected]"
>
Name: <input name="Name" value=""
size="10"><br>
Email: <input name="Email" value=""
size="10"><br>
<center><input type="submit"></center>
</form>

HTML Tag

Name:

(Tip)

Email:
Submit

HTML Code Example

Browser View

1
2

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

<h1>Heading
<h2>Heading
<h3>Heading
<h4>Heading
<h5>Heading
<h6>Heading

Heading of
HTML
Document

<head>

<head>Contains elements describing the


document</head>

HTML
Horizontal
Rule

<hr>

<hr />

HTML
Horizontal
Rule

<hr>

HTML
Horizontal
Rule

<hr>

HTML
Horizontal
Rule

<hr>
(Internet
Explorer)

<hr width="75%" color="#ff0000" size="4" />

HTML
Horizontal
Rule

<hr>
(Internet
Explorer)

<hr width="25%" color="#6699ff" size="6" />

HTML
Hypertext
Markup
Language

<html>

<html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
</html>

Contents of your web page

HTML Italic

<i>

<i>Example</i>

Example

3
4
5

1
2
3
4
5
6

Example</h1>
Example</h2>
Example</h3>
Example</h4>
Example</h5>
Example</h6>

Nothing will show

Contents of your web page (Tip)


Contents of your web page
Contents of your web page

<hr width="50%" size="3" />


Contents of your web page
Contents of your web page
<hr width="50%" size="3" noshade />
Contents of your web page

HTML Image <img>

Contents of your web page


Contents of your web page
Contents of your web page
Contents of your web page

<img src="Earth.gif" width="41" height="41"


border="0" alt="text describing the image" />

(Tip)

Example:
HTML Input
Field

HTML Input
Password

<input>

<input>

<form method=post action="/cgibin/example.cgi">


<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

Example: (Tip)

Submit

<form method=post action="/cgibin/example.cgi">


<input type="password" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>

Submit

Example:

HTML Input
(Backgroun
d Color)

<input>
(Internet
Explorer)

<form method=post action="/cgibin/example.cgi">


<input type="text" style="color: #ffffff; fontfamily: Verdana; font-weight: bold; font-size:
12px; background-color: #72a4d2;" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>

Example: (Tip)

Submit

Example:

HTML Input
(Image
Submit
Button)

<input>

<form method=post action="/cgibin/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:

HTML Input
(Comment
Box)

<input>

<form method=post action="/cgibin/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:

HTML Input
(Radio
Button)

HTML Input

<input>

<input>

<form method=post action="/cgibin/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
<input type="Submit" value="Submit">
</form>
Example:

Example: (Tip)

Example: (Tip)

Submit

Clear

Example: (Tip)
Select an option:
Option 1
Option 2
Option 3
Submit

Example: (Tip)

<form method=post action="/cgibin/example.cgi">


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>

(Checkbox)

Select an option:
Selection 1
Selection 2
Selection 3
Submit

Example 1: (Tip)
Example 1:

HTML List
Item

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

Example 2:
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

HTML Link

<link>

List item 1

List item 2

List item 3

Example 2:
i.

List item 1

ii.

List item 2

iii.

List item 3

iv.

List item 4

<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
(Tip)

HTML
Scrolling
Text

HTML Menu

<marquee
>
(Internet
Explorer)

<marquee bgcolor="#cccccc" loop="-1"


scrollamount="2" width="100%">Example
Marquee</marquee>

<menu>

<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>

HTML Meta

<meta>

HTML Meta

<meta>

<meta name="Description" content="Description


of your site">
<meta name="keywords" content="keywords
describing your site">
<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/"

List item 1

List item 2

List item 3

Nothing will show (Tip)


Nothing will show (Tip)

>
HTML Meta

<meta>

<meta http-equiv="Pragma" content="no-cache"> Nothing will show (Tip)

HTML Meta

<meta>

<meta name="rating" content="General">

Nothing will show (Tip)

HTML Meta

<meta>

<meta name="robots" content="all">

Nothing will show (Tip)

HTML Meta

<meta>

<meta name="robots" content="noindex,follow">

Nothing will show (Tip)

Name
HTML
Ordered List

HTML Tag
<ol>

HTML Code Example


Numbered
<ol>
<li>List
<li>List
<li>List
<li>List
</ol>

item
item
item
item

Browser View
Numbered

1</li>
2</li>
3</li>
4</li>

Numbered Special Start


<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

1.

List item 1

2.

List item 2

3.

List item 3

4.

List item 4

Numbered Special Start


5.

List item 1

6.

List item 2

Lowercase Letters

7.

List item 3

<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

8.

List item 4

Lowercase Letters
a.

List item 1

Capital Letters

b.

List item 2

<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

c.

List item 3

d.

List item 4

Capital Letters

Capital Letters Special Start

A. List item 1

<ol type="A" start="3">


<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

B. List item 2

Lowercase Roman Numerals


<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>

C. List item 3
D. List item 4
Capital Letters Special Start
C. List item 1
D. List item 2

E.

List item 3

F.

List item 4

Lowercase Roman Numerals


i.

List item 1

<li>List item 4</li>


</ol>

ii.

List item 2

Capital Roman Numerals

iii.

List item 3

<ol type="I">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

iv.

List item 4

Capital Roman Numerals Special Start


<ol type="I" start="7">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

HTML Listbox
Option (Drop <option>
Down Box)

<form method=post action="/cgibin/example.cgi">


<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>

HTML Mailto
Email Link

<a
href="mailto:[email protected]">Email
Link</a>

HTML
Paragraph

<a>
<p>

This is an example displaying the use of the


paragraph tag. <p> This will create a line
break and a space between lines.
Attributes:

Capital Roman Numerals


I.

List item 1

II.

List item 2

III.

List item 3

IV.

List item 4

Capital Roman Numerals Special Start


VII.

List item 1

VIII.

List item 2

IX.

List item 3

X.

List item 4

Select an option: (Tip)

option 2

Email Link

This is an example displaying the use of the


HTML paragraph tag.

This will create a line break and a space


between lines.
<p align="left">
Example 1:<br />
<br />
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="right">
Example 2:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="center">
Example 3:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>

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.

HTML
Small(Text)

<small>

<small>Example</small>

Example

HTML
Deleted Text

<strike>

<strike>Example</strike>

Example

<strong>Example</strong>

Example

HTML Strong <strong>

(Tip)

Example 1:
<table border="4" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 1: (Tip)
Column 1

Column 2

Example 2: (Internet Explorer)

HTML Table

<table>

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


Example 2: (Tip)
cellpadding="2" cellspacing="2"
width="100%">
<tr>
Column 1
<td>Column 1</td>
<td>Column 2</td>
</tr>
Example 3: (Tip)
</table>

Column 2

Example 3:

Column 1

Column 2

Row 2

Row 2

<table cellpadding="2" cellspacing="2"


width="100%">
<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>

<td>

<table border="2" cellpadding="2"


cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

HTML Table
Header

<th>

<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>

HTML
Document
Title

<title>

<title>Title of your HTML page</title>

Title of your web page will be viewable in the


title bar. (Tip)

HTML Table
Row

<tr>

<table border="2" cellpadding="2"


cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1

HTML
Teletype

<tt>

<tt>Example</tt>

Example

HTML
Underline

<u>

<u>Example</u>

Example
Example 1:

<ul>

Example 1:<br>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<br>
Example 2:<br>
<ul type="disc">
<li>List item 1</li>
<li>List item 2</li>

HTML Table
Data

HTML
Unordered
List

Column 1

Column 1
Row 2
Row 3
Row 4

Column 2

Column 2
Row 2
Row 3
Row 4

List item 1

List item 2

Example 2:

Column 3
Row 2
Row 3
Row 4

Column 2

<ul type="circle">
<li>List item 3</li>
<li>List item 4</li>
</ul>
</ul>

List item 1

List item 2
o

List item 3

List item 4

How to Code in HTML


In this section, you will find a free HTML lesson that will teach you basic html. You will learn the basics of how to code
in HTML, exactly what HTML code is, how to write it and see several examples.
If you'd like to learn how to create a web page, taking the time to learn how to code in HTML (hypertext markup
language) will not only provide you with the freedom to update your own web pages, but it will also save you some
money, as you will be able to avoid hiring a professional web designer.

What is HTML Code?


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


Begin writing your HTML tags by creating your document's basic layout.
Browser View
HTML Code

<html>

Begins your HTML document.

<head>

Contains information about the page such as the TITLE, META tags for proper Search
STYLE tags, which determine the page layout, and JavaScript coding for special effec

<title> The TITLE of your page </title>

Your title should contain the page's most relevant keyword phrase, which are words
web page. It will also be displayed within the search results of the search engines.

</head>

Closes the head section.

<body>
</body>

The area between the opening and closing body tags will contain everything that wil
web browser, such as text and graphics. All of the information will be HTML coded.

</html>

Closes the <html> tag.

Text

<b>text</b> Specifies bold text


<i>text</i> Specifies italic text

<tt>text</tt> Specifies teletype (typewriter) text


<cite>text</cite> Specifies a citation that normally displays as italic.
<em>text</em> Emphasizes a word that normally displays as italic.
<strong>text</strong> Emphasizes a word that normally displays as bold.
<font>text</font> Specifies font for a specific area of text.

Formatting
Browser View
HTML Code

<p>text</p>

Specifies a paragraph.

<p>This is an example of text being displayed within a paragraph


tags. When you place a paragraph within the paragraph tags, a
space will automatically be placed between the paragraphs. </p>
<p>This is an example of text being displayed within a paragraph
tags. When you place a paragraph within the paragraph tags, a
space will automatically be placed between the paragraphs. </p>

This is an example of text being displayed within a paragrap


a paragraph within the paragraph tags, a space will automat
the paragraphs.

<br>

Specifies a line break.

This is an example of<br>


text being displayed with various<br>
line breaks. The text will<br>

This is an example of
text being displayed with various
line breaks. The text will

This is an example of text being displayed within a paragrap


a paragraph within the paragraph tags, a space will automat
the paragraphs.

break to the next line each time the <br>


tag is used.

break to the next line each time the break tag is used.

<blockquote>text</blockquote>

Indents a block of text from both sides.

<blockquote>This is an example of text being displayed within


the blockquote tags. The text is indented on both the left and the
right sides.</blockquote>

This is an example of text being displayed within the b


text is indented on both the left and the right sides.

<h1>heading 1 Text</h1>
Specifies a heading.
<h2>heading 2 Text</h2>
<h3>heading 3 Text</h3>
<h4>heading 4 Text</h4>
<h5>heading 5 Text</h5>
<h6>heading 6 Text</h6>

<pre>text</pre>

Specifies preformatted text.

<pre>
This is an example of displaying text
within the <pre> tags. Text will
display exactly as it looks between
the tags without adding any break or
paragraph tags.

This is an example of displaying text


within the <pre> tags. Text will
display exactly as it looks between
the tags without adding any break or
paragraph tags.

This is a great tag to use with a form


to enable the form to display properly
without placing it within a table.
</pre>

This is a great tag to use with a form


to enable the form to display properly
without placing it within a table.

<hr />
Inserts a horizontal rule.

Links
Browser View
HTML Code

<a href="http://www.domain.com">Linked Text </a>

Linked Text

<a href="mailto:[email protected]">Email Link </a>

Email Link

<a href="http://www.domain.com"><img
src="http://www.domain.com/image.gif"></a>
<a name="NAME"></a> Specifies a target location within a web
page.

The target location is located below. You won't see anything.


click on the link below, you will be taken to it.

<a href="#NAME">Text</a> Link leading to the target location


with the same web page.

Text Link leading to the target location within the same web

Images

HTML Code

Browser View

<img src="http://www.yourdomain.com/image.gif" alt="Alternate


Text" height="41" width="41">

Unordered list

HTML Code
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

Browser View

List Item

List Item

List Item

Ordered list

HTML Code
<ol>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ol>

Browser View
1.

First List Item

2.

Second List Item

3.

Third List Item

Definition list

HTML Code

Browser View

<dl>
<dt>First List Item</dt>
<dd>First List Item Description</dd>
<dt>Second List Item</dt>
<dd>Second List Item Description</dd>
<dt>Third List Item</dt>
<dd>Third List Item Description</dd>
</dl>

First List Item


First List Item Description
Second List Item
Second List Item Description
Third List Item
Third List Item Description

Tables

HTML Code

Browser View

<table width="300" border="1">


<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</table>

Forms
Browser View
HTML Code

<form method=post action="/cgi-bin/example.cgi">

Specifies a form, which will require the use of a form process


on a web server.

<input type="text" size="10" maxlength="30">


<textarea name="comments" rows="6" cols="20"></textarea>

<input type="radio" name="option1"> Option 1


<input type="radio" name="option2" checked> Option 2
<input type="radio" name="option3"> Option 3

Option 1

Option 2

Option 3

<input type="checkbox" name="selection1"> Selection 1


<input type="checkbox" name="selection2" checked> Selection 2
<input type="checkbox" name="selection3"> Selection 3
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select>

Selection 1

Selection 2

option 2

<input type="password">
<input type="Submit" value="Submit">
<input type="reset">

Submit

Reset

<input type="hidden">

Nothing will display.

</form>

Specifies the end of a form.

Selection 3

You might also like