Html tags with example
HTML Tags
Tags
|
Description • Meaning • Definition
|
<a>
|
|
<abbr>
|
ABBREVIATION tags
indicate interpretation of the meaning to the browsers and search engines for
such as kind of abbreviations as "Inc.", "etc.".
|
<acronym>
|
ACRONYM tags defines
an acronym, like; <acronym title="World Wide Web">WWW</acronym>.
|
<address>
|
ADDRESS tags are used
to identify the author's contact information for a section or a document.
|
<applet>
|
APPLET element tags
are used to embed and invoke a Java application within an HTML page.
|
<area>
|
AREA tag defines a
section of an image.
|
<b>
|
|
<base>
|
BASE tag defines
information regarding to the links on the page.
|
<basefont>
|
BASEFONT tags defines
changes of all text appearance on the web page.
|
<bdo>
|
BDO tag is specifying
the direction of text display by overwriting the default value from Left to
Right. <bdodir="rtl">Right to Left</bdo>
|
<bgsound>
|
BGSOUND tag is
defining a background sound for a webpage.
<html> <head> <bgsoundsrc="JingleBells.wav" loop="3"> </head> <body> </body> </html> Demo • Example |
<big>
|
BIG tag makes the
<big>text larger</big> then the rest of the text.
|
<blockquote>
|
BLOCKQUOTE tags
<blockquote>separate a section</blockquote>
of text from the
surrounding text.
|
<blink>
|
BLINK tags defines
text to <blink>blink</blink> repeatedly.
Internet Explorer doesn't support this tag yet.
|
<body>
|
<html>
<head> </head> <body> Body tags identify the content of a web page. </body> </html> |
<br>
|
Line Break tag is
specifying<br>
a new line |
<button>
|
BUTTON tag is used to
create a <button type="button">Push Button</button> Push
Button
|
<caption>
|
<table>
<caption>CAPTION tag adds a caption to a table.</caption> <tr> <td> </td> </tr> </table> |
<center>
|
<center>CENTER tags center text, images, etc.</center>
|
<cite>
|
<cite>CITE
tags defines a citation and displaying in italics.</cite>
|
<code>
|
CODE tags are used for
example, to indicate a code of the current <code>htmltags.html</code> page.
|
<col>
|
COL tags are used to define
column properties for table columns.
<table> <colgroup span="2"> <col width="60" align="left"></col> <col width="80" align="center"></col> </colgroup> <tr> <td>1st Column</td> <td>2nd Column</td> </tr> </table> |
<colgroup>
|
COLGROUP tags are used
to define groups of table columns.
<table> <colgroup span="2"> <col width="60" align="left"></col> <col width="80" align="center"></col> </colgroup> <tr> <td>1st Column</td> <td>2nd Column</td> </tr> </table> |
<dd>
|
DD tag defines a
definition description.
<dl> <dt>NASA</dt> <dd>National Aeronautics and Space Administration</dd> <dt>MBA</dt> <dd>Master of Business Administration</dd> </dl> |
<dfn>
|
DFN tags emphasize
definition, for example; <dfn>PC</dfn>: Personal
Computer.
|
<del>
|
DEL tag indicates
<del>
|
<dir>
|
DIR tags define
directory lists.
<dir> <li>First</li> <li>Second</li> <li>Third</li> </dir> |
<dl>
|
DL tag defines a
definition list.
<dl> <dt>CSU</dt> <dd>California State University</dd> <dt>UN</dt> <dd>United Nations</dd> </dl> |
<div>
|
DIV tag is a logical
section of a web document.
<div> <h1>Home Pets</h1> <p>Cats</p> <p>Dogs</p> </div> |
<dt>
|
DT tags defines a
definition term.
<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl> |
Tags
|
Description • Meaning
• Definition
|
<embed>
|
EMBED tag gives a
command to a browser to include a multimedia elements, such as video, sound
files within a web document.
<embed src="videofile.mov" width="100" height="100"> <embed src="musicfile.mid" width="50" height="50"> Demo • Example |
<em>
|
EM tags
<em>emphasize</em> text.
|
<fieldset>
|
FIELDSET tag creates a
form for all elements in it.
<fieldset>Find a rounded-corner box around this text.</fieldset> |
<font>
|
FONT tags attribute
text <font face="cursive, serif">font</font>, <font
color="#0000ff">color</font>, and <font
size="4">size</font>.
|
<form>
|
Form tags define a
form.
<form action="contact.html" method="post"> Your Email: <input type="text" name="visitor-email" maxlength="80" value="" /><br /> Your Name: <input type="text" name="visitor-name" maxlength="80" value="" /><br /> <input type="submit" value="Send" /> </form>
Top of Form
eMail:
Name:
Bottom of Form
|
<frame>
|
Frame tags define each
frame within a frameset.
<html> <head> <title>Frame Tags in Action</title> </head> <noframes> <body> <h1>Sorry, your browser doesn't support this feature!</h1> </body> </noframes> <frameset cols="35%, 65%"> <frame src ="/htmlcodes/left-frame.html" /> <frame src ="/htmlcodes/right-frame.html" /> </frameset> </html> Demo • Example |
<frameset>
|
FRAMESET tags define a
layout of frames.
<html> <frameset cols="45%, *"> <frame src ="/htmlcodes/left-frame.html" /> <frame src ="/htmlcodes/right-frame.html" /> </frameset> </html> Demo • Example |
<h1> -
<h6>
|
H1 - H6 define level
1-6 headers.
<h1>Header
1</h1>
<h2>Header
2</h2>
<h3>Header
3</h3>
<h4>Header
4</h4>
<h5>Header
5</h5>
<h6>Header
6</h6>
|
<head>
|
Head tags define
general information about the document, page title, meta-tags, scripts and
links to follow, and other commands to browsers.
<html> <head> <title>HTML Tags - Head Tag</title> <meta name="keywords" content="html tags, head tag" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="javaexample.js" type="text/javascript"></script> </head> <body> </body> </html> |
<hr>
|
HR tag draws a
horizontal break line.
Two choices for the same result: <hr> or <hr /> |
<html>
|
HTML tags contain HTML
elements, and give a command to browsers to read the document as an HTML
document.
<html> <head> </head> <body> </body> </html> |
<iframe>
|
iFrame tag creates an
inline frame that contains another web page in it.
|
<img>
|
IMG tag attributes an
image.
<imgsrc="http://www.fillster.com/images/tutorial.gif" width="60" height="62" alt="Here write a name for your image" />  |
<input>
|
INPUT tags define
input fields, check boxes, radio buttons.
<form action="contact.html" method="post"> Your Email: <input type="text" name="visitor-email" maxlength="80" value="" /><br /> Your Name: <input type="text" name="visitor-name" maxlength="80" value="" /><br /> <input type="radio" name="Level" value="Web Designer" />Web Designer<br /> <input type="radio" name="Level" value="Web Developer" checked="checked" />Web Developer<br /> <input type="checkbox" name="Computer" value="Windows" />Windows<br /> <input type="checkbox" name="Computer" value="Mac" />Mac<br /> <input type="submit" value="Send" /> </form>
Top of Form
eMail:
Name: Web Designer Web Developer Windows Mac
Bottom of Form
|
<ins>
|
INS tag defines an
<ins>inserted text</ins>.
|
<isindex>
|
ISINDEX tag defines a
single-line input field.
<isindex prompt="Example: "> |
<i>
|
<I> tag is
specifying <i>italic text</i>.
|
<kbd>
|
KBD tag stands
for <kbd>keyboard text</kbd>.
|
<label>
|
LABEL tag defines a
label to a form control.
<p>Where do you live?</p> <form action=""> <input type="radio" name="country" id="us" /> <label for="usa">USA</label><br /> <input type="radio" name="country" id="uk" /> <label for="uk">UK</label> </form>
Where do you live?
Top of Form
USA
UK
Bottom of Form
|
<legend>
|
LEGEND tag assigns a
caption in a fieldset element.
<legend>Questionnaire</legend> <p>Where do you live?</p> <form action=""> <input type="radio" name="country" id="usa" /> <label for="usa">USA</label><br /> <input type="radio" name="country" id="canada" /> <label for="canada">Canada</label> </form> Questionnaire
Where do you live?
Top of Form
USA
Canada
Bottom of Form
|
<li>
|
LI tag defines a list
of ordered and unordered items.
<ol> <li>HTML</li> <li>PHP</li> <li>JavaScript</li> </ol> <ul> <li>HTML</li> <li>PHP</li> <li>JavaScript</li> </ul>
1.
HTML
2.
PHP
3.
JavaScript
|
<link>
|
LINK tag defines a
link to an external document, such as External Style Sheets.
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> |
<marquee>
|
|
<menu>
|
MENU tag defines a
menu list.
<menu> <li>Google</li> <li>Yahoo</li> <li>MSN</li> </menu>
Google
Yahoo
MSN
|
<meta>
|
META tags are
declaring information for the search engine robots and crawlers.
<html> <head> <meta name="description" content="Page description goes here."> <meta name="keywords" content="meta tags, html tags, meta"> </head> <body> </body> </html> |
<noframe>
|
NOFRAME tag is
specifying an alternate web page layout for browsers that don't support
frames.
<html> <head> <title>Frame Tags in Action</title> </head> <noframes> <body> <h1>Sorry, your browser doesn't support this feature!</h1> </body> </noframes> <frameset cols="35%, 65%"> <frame src ="/htmlcodes/left-frame.html" /> <frame src ="/htmlcodes/right-frame.html" /> </frameset> </html> Demo • Example |
<noscript>
|
NOSCRIPT tag is
specifying a "NOSCRIPT" version page layout for browsers that don't
support "SCRIPT" version. NOSCRIP tags are used in conjunction with
the JavaScript or VBScript elements.
<script type="text/javascript" language="javascript"> document.write("We are here to learn HTML"); </script> <noscript> Sorry, your browser doesn't support JavaScript, VBScript. </noscript> |
Tags
|
Description • Meaning • Definition
|
<optgroup>
|
OPTGROUP tag creates
an option drop-down group menu.
<select> <optgroup label="Fruits"> <option value ="banana">Banana</option> <option value ="pineapple">Pineapple</option> </optgroup> <optgroup label="Vegetables"> <option value ="tomato">Tomato</option> <option value ="potato">Potato</option> </optgroup> </select> |
<option>
|
OPTION tag creates a
drop-down menu. OPTION tag works only in conjunction with a SELECT tag.
<select> <option value ="beginner" selected="selected">Beginner</option> <option value ="intermediate">Intermediate</option> <option value ="advanced">Advanced</option> </select> |
<ol>
|
OL tags define an
ordered list of items.
<ol> <li>Red</li> <li>Green</li> <li>Blue</li> </ol>
1.
Red
2.
Green
3.
Blue
|
<p>
|
<P> tag is specifying a paragraph and
creates a new line.
<h4>Header 4</h4>
<p>This is a paragraph.</p> |
<pre>
|
PRE tag is specifing a
preformatted text. This tag does,t let the browsers to eliminate "white
spaces" in the text.
<pre>
City London Cool
City Paris Awesome
City New
York Great
</pre>
EXAMPLE
City London Cool
City Paris Awesome
City New
York Great
|
<q>
|
<Q> tag is
specifing short quotations. The function is similar to <blockquote> tag
except that <Q> tag doesn't break lines of the text.
<q>I'll be back</q> - is a popular phrase associated with Arnold Schwarzenegger. |
<s>
|
<S> tag produces
a strike throughout a text. <S> tag is depreciated and is not supported
in XHTML 1.0 Strict DTD, therefore it's recommended to use DEL tag instead.
Strike through <s> |
<samp>
|
SAMP tag is specifing
a fixed-width font.
Compare for yourself - 1 <samp>Compare for yourself - 2<samp> |
<script>
|
SCRIPT tags define
scripts within a web page and let the web browsers know that it's not an HTML
section. You can place a <SCRIPT> tag anywhere within HTML, but the
best practice is to place it between the <HEAD></HEAD> tags.
<html> <head> <script src="javascript.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> document.write("This is a script tag placement tutorial.") </script> </body> </html> |
<select>
|
SELECT tag creates a
menu on a form.
<select> <option value ="planes" selected="selected">Planes</option> <option value ="trains">Trains</option> <option value ="automobiles">Automobiles</option> </select> |
<small>
|
SMALL tag creates a
small text.
Compare normal text in relationship to <small>small text</small> |
<span>
|
SPAN tag is specifying
a section of a document.
<div> <p>Cats and Dogs <span style="color:blue;">are our friends.</span></p> </div> |
<strike>
|
STRIKE tag creates a
strike through words or text. Strike tag is depreciated and is not supported
in XHTML 1.0 Strict DTD, therefore it's recommended to use DEL tag instead.
<strike> |
<strong>
|
STRONG tag is
specifying a strong text.
<div> <p>Weightlifters are <strong>strong people.</strong></p> </div> |
<style>
|
STYLE tag specifies a
link and location to a style sheet, and gives a command to browsers regarding
to a layout for a web page. Please find; First bold line is an External
Style, and the next bold lines are for the Internal Style web page
presentation.
<html> <head> <title>HTML Tags - Head Tag</title> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> h1{text-align: center; font-style: italic} p{color:#ff0000} </style> </head> <body> </body> </html> |
<sub>
|
SUB tag is defining a
subscripted text.
SUB tag is creating <sub>a subscripted text.</sub> |
<sup>
|
SUP tag is defining a
superscripted text.
SUP tag is creating <sup>a superscripted text.</sup> |
<table>
|
TABLE tag is defining
a table.
<table> <tr> <td>First Cell</td> <td>Second Cell</td> </tr> </table> |
<td>
|
TD tag creates a data
cell.
<table> <tr> <td>First Data Cell</td> <td>Second Data Cell</td> </tr> </table> |
<th>
|
TH tag creates a
header cell.
<table> <tr> <thcolspan="2">My Shopping List</th> </tr> <tr> <td>Apples</td> <td>Pears</td> </tr> </table> |
<tr>
|
TR tag creates a row
in a table.
<table> <tr> <td>Data Cell 1</td> <td>Data Cell 2</td> </tr> </table> |
<tbody>
|
TBODY tag creates a
table body.
<table> <thead> <tr> <td colspan="2">>Header - Complete List of Basic HTML Tags</td> </tr> </thead> <tbody> <tr> <td>Tags</td> <td>Attributes</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">>Footer - Created by Fillster.com</td> </tr> </tfoot> </table> |
<textarea>
|
TEXTAREA tag creates a
text area.
<textarea rows="4" cols="30"> Place you text in here... </textarea> |
<tfoot>
|
TFOOT tag creates a
table footer.
<table> <thead> <tr> <td colspan="2">>Header - HTML Tags List</td> </tr> </thead> <tbody> <tr> <td>HTML Tags</td> <td>HTML Attributes</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">>Footer - Copyright © Fillster.com</td> </tr> </tfoot> </table> |
<thead>
|
THEAD tag creates a
table header.
<table> <thead> <tr> <td colspan="2">>Header text place here.</td> </tr> </thead> <tbody> <tr> <td>Element - 1</td> <td>Element - 2</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">>Footer notes put here.</td> </tr> </tfoot> </table> |
<title>
|
TITLE tag declares a
title of an HTML document.
<html> <head> <title>Brief description of the web page.</title> </head> <body> </body> </html> |
<tt>
|
TT tag creates a
teletype text.
This is a default font of the text, <tt>but this is a teletype font.</tt> |
<u>
|
U tag makes an
underlined text.
This text has the <u>underlined words.</u> |
<ul>
|
UL tags define an
unordered list of items.
<ul> <li>Code</li> <li>Script</li> <li>Tag</li> </ul>
|
<var>
|
VAR tag indicates a
variable parameter.
This is a <var>variable parameter<var> of the sentence. |
KEYWORDS:
html tags and attributes
html tags list with examples
html tags definition
types of tags in html
basic html tags
html tags pdf
list of html tags and their uses
what are the different tags used in html?
html programs examples with output pdf free download
html all codes
css tags pdf
all html5 tags list with examples pdf
advanced html tags list with examples pdf
html tags list with examples and description
html all tags with example pdf free download
html codes for websites design pdf
html tags pdf
html tags with example
basic html tags list
html tags list with examples pdf
html programs examples with output
html programs examples with output pdf
list of html tags and their uses
basic html page template
html programs in notepad
html codes list
