Tag Name Sample Code Live Browser View
Note: You can copy the sample code below, then paste it into Notepad, and easily modify it.
<!--       --> comment <!-- Comments are for notes and are only viewed in the editor. Nothing is displayed in browser -->
<abbr abbrevation I am <abbr title="Certified Internet Web Associate">CIW</abbr> certified. I am CIW certified.
(Hover over term to see definition)
<a name= Anchor
Bookmark
<a name="Top"></a>
(HTML5 uses id= to set a bookmark on a page)
Set an "Internal" named anchor or bookmark. See id below.
<a href= Anchor <a href="menu.htm">Tutorial Menu</a>
The link above goes to a relative address path, opening a page on the same website.
Tutorial Menu
<a href= Anchor <a href="http://scf.edu/">SCF</a>
The link above goes to an absolute address path, opening a page on a different website in the same window, replacing the original web page. Without target="_blank" attribute you must hit Back.
SCF
<a href=
target="_blank"
Target page <a href="http://w3schools.com" target="_blank">
The target="_blank" attribute in the link above causes the new page to open in a new browser tab or window, allowing to original page to also remain open.
W3Schools
<a href= Anchor <a href="http://scf.edu" target="_blank">
<img src="
images/SCF.gif" alt="SCF">
</a>
SCF logo and link
<a href= Anchor <a href="#top">Top</a>
The link above goes to an internal id on the same web page. See id attribute.
Top
<b> Bold <b>Bold text</b>
(<b> was deprecated and replaced by <strong> in older HTML4. In HTML5 <b> can be used for a key word.)
Bold text
<big> bigger text <big>Bigger Text</big>
(In HTML5 the <big> tag is deprecated)
Bigger Text
<blockquote> Indent blocks of text <blockquote style="text-align:justify">
Notice how this block of text is indented and because of the <em>justify</em> style both the left and right margins are even.
</blockquote>
Notice how this block of text is indented and because of the justify style both the left and right margins are even.
<body> Body and content of page <body>The main content of page</body>
or

<body style="background-color:#FFC">
The main content of page
<body style= Set Body Style such as color and fonts <body style="font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#00C; background-image:url('images/bg.jpg')"> Sample of new body style, font, color and background image.

Note:
it is better to define the body styles in the Cascading Stylesheet..
<br>

HTML4 used a self-closing
<br />
Line Break John Smith <br>
123 Main Street<br>
Bradenton, FL  34207<br>
(A line break has less vertical space than a paragraph tag, and can be used for items such as address lines or poems where you need less vertical space than a <p> tag produces.)
John Smith.
23 Main Street
Bradenton, FL  34207
<center> Center <center>Center is deprecated</center>
(Center is deprecated and is replaced by
style="text-align:center")
Center is deprecated
<div id= Provides structure to a Web page <div id="masthead">
<!-- All masthead content may come from Cascading Stylesheet code shown at right -->
</div>
The HTML code at left works with the CSS style code below:
#masthead {
  background-image: url('images/header.jpg');
  height: 75px;
  background-repeat: no-repeat;
}

<dl>
<dt>
<dd>

Definition List
Definition Term
Definition Description
<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
<!DOCTYPE Define the
Document
Type
<!DOCTYPE html> <!-- this is HTML5 -->
<html>
<head>
<meta charset="utf-8">
Does not display anything, but tells browser how to properly render the document. Place the DOCTYPE before the opening <html> tag
<em> Emphasis <em>Emphasis or italics</em> Emphasis or italics
<embed> Embed object <embed src="media/filename.mid" autostart="false" hidden="false" loop="false">
</embed>

(This tag is being deprecated.)
If it was used there would be a media player control here.
It increases the page load time considerably.
favicon.ico Puts icon in adress box <link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" /> See yellow FW icon in URL address box of this page. The icon file must be named favicon.ico
<footer> HTML5
Footer
Element
<footer>
  &copy;
2014 by Floyd Jay Winters
</footer>
© 2014 by Floyd Jay Winters
<font> Font <font face="Arial" size="5" color="blue">
Arial Text Size 5
</font>
(Font is deprecated: see Body Style and Style)
Arial Text Size 5
<form> Forms <form>
 <label for="name">
Name
 </label>
 <input name="name" type="text"><br>
 <label for="address">
Address
 </label>
 <input name="address" type="text"><br>
 <label for="city">
City
 </label>
 <input name="city" type="text"><br>
</form>
   
   
   
<h1> Heading 1 <h1>Heading 1</h1>

Heading 1

<h2> Heading 2 <h2>Heading 2</h2>

Heading 2

<h3>...<h6> Heading 6 <h6>Heading 6</h6>
Heading 6
<head> Heading of document <head>
  <title>
HTML Tags</title>
<!-- Meta tags and link to stylesheet are also in head -->
</head>
Title is seen in Taskbar and on browser tab
<header> HTML5
Header
Element
<header>
  <h1>
Main Topic</h1>
  <p>More information on main topic</p>
</header>

Main Topic

More information on main topic

<hr>
(varies in browser)
Horizontal Rule <hr style="color:#009; background-color:#009; width: 50%; height:3px; border:0">
<!-- hr needs both color and background color to work with both IE and Firefox -->
(For consistency: consider using an image instead)
Text Above Rule

Text Below Rule

Note: Use a Stylesheet to set the HR styles so that they will be the same for all HR tags.
<html> HyperText Markup Language <html>
<head>
<title>
Web Page Title</title>
</head>
<body>
Web Page contents
</body>
</html>
Start/end HTML code to display Web page
<i> Italic <i>Italicized text</i> 
(
<i> was deprecated and replaced by <em> in older HTML4. In HTML5 <i> can be used for a technical term or mood.)
Italicized text
id attribute ID <h2 id="top">Chapter 1</h2>
The id="top" line is linked from below:
<a href="#top">Top</a>
Top
<img> Image Source <img src="images/monitor.gif" width="50px" height="50px" style="border:0" alt="monitor"> Picture of monitor
<link> Link <link href="tutor.css" rel="stylesheet" type="text/css">
Or
<link href="images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
Link page to a Cascading Style Sheet

Link page to a favorite icon
<mailto: email <a href="mailto:sam@domain.com">Email me</a>  OR
<a href="mailto:sam@domain.com?Subject=Inquiry">Email me</a>
Email me
<marquee> scrolling text <marquee bgcolor="C0C0C0" loop="-1" scrollamount="2" width="100%">Text</marquee> Text
<meta> Meta <meta name="author" content="Floyd J Winters">
<meta name="description" content="
HTML Tutotrial">
<meta name="keywords" content="
HTML tags, Web code, web programming">
Nothing is seen in browser.
Meta tags are used to help search engines.
Meta name="description" provides the site summary used by most earch engines.
<nav> HTML5
Navigation
Element
Defined in Stylesheet:
nav li {list-style:none; display:inline; padding:6px}
nav a {color:blue; display:inline}

<nav>
  <ul>
 
<li><a href="index.htm">
Home</a></li>
 
<li><a href="resume.htm">
Resume</a></li>
 
<li><a href="contact.htm">
Contact</a></li>
  </ul>
</nav>
<ol> Ordered List

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


<ol style="list-style-type: lower-roman">
  <li>
List item 1</li>
  <li>
List item 2</li>
  <li>
List item 3</li>
</ol>

(Also <ol start=1 type=i> for Roman Numerals)

  1. List item 1
  2. List item 2
  3. List item 3
      
  1. List item 1
  2.   
  3. List item 2
  4.   
  5. List item 3
<p> Paragraph <p>This is a sample paragraph. P tags create more vertical spacing than BR tags.</p>

<p style="text-align:center">This paragraph is centered</p>

This is a sample paragraph. P tags create more vertical spacing than BR tags.

This paragraph is centered

<small> Smaller text <small>Smaller text</small> Smaller text
<span> Formats a smaller section of a page This is a <span style="color:blue">blue</span> word This is a blue word
<strong> Strong emphasis <strong>Strong  or bold text</strong>
(<strong> replaced <b> in older HTML4. In HTML5, <strong> now means important.)
Strong or bold text
style Used with h1, p, div, span, td, & body tags <p style="text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: red">Welcome</p>

Welcome

<sub> Subscript This is a <sub>subscript</sub> sample
The symbol for water: H<sub>2</sub>O
This is a subscript sample
The symbol for water: H2O
<sup> Subscript This is in <sup>superscript</sup><br>
Five squared is: 5<sup>2</sup>
This is in superscript
Five squared is: 52
<table>
<th>
<tr>
<td>
Table
header
rows (tr)
data (td)
<table style="border:4px solid blue; background-color:#FFF; width:98%; padding:10px; border-collapse:collapse">
<!-- padding is between text and cell border -->
<tr> <!-- Begin Row 1 -->
    <td colspan="3">
        Merged Cells td colspan = "3"
    </td>

</tr>
<tr>
<!-- Begin Row 2 -->
    <td>Row2, Col1</td>
    <td>
Row2, Col2</td>
    <td>
Row2, Col3</td>
</tr>
<tr>
    <td>
tr=Table Rows</td>
    <td>&nbsp;</td>
    <td rowspan="2">
        td with rowspan = "2"
    </td>
</tr>
<tr>
    <td>
Row4, Col1</td>
    <td>
Row4, Col2</td>
</tr>
</table>

Merged Cells
td with colspan = "3"
Row2,
Col1
Row2,
Col2
Row2,
Col3
tr=Table Rows   td with
rowspan = "2"
Row4,
Col1
Row4,
Col2


Note: it would be wise to use a Cascading Stylesheet to set the table styles so that they will be the same for all tables on the site:

table {
  border:4px solid blue;
  background-color:#FFF;
  width:98%;
  padding:10px;
  border-collapse:collapse

}
<title> document Title <title>Title of your webpage</title> Title of your webpage (viewable in the titlebar)
<tt> TeleType <tt>Monospaced Text</tt>
(In HTML5 the <tt> tag is deprecated)
Monospaced Text (Teletype)
<u> Underline <u>Underlined Text (deprecated)</u>
(The <u> tag has been replaced by
 
style="text-decoration: underline"
However, avoid underlines- it looks like a link) 
Underlined Text (deprecated)
<ul> Unordered List <ul style="list-style:square">
  <li
>List item 1</li>
  <li>
List item 2</li>
<ul style="list-style:circle">
  <li>
List item 3</li>
  <li>
List item 4</li>
</ul>
</ul>
  • List item 1
  • List item 2
    • List item 3
    • List item 4
    <ul style="list-style-image: url(images/point.gif)">
   <li>
 Item One</li>
   <li> 
Item Two</li>
</ul>
  •  Item One
  •  Item Two
 Top