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.  It will contain the nav, header, main, and footer elements.</body>
or
<body style="background-color:#FFC">		 The main content of page. It will contain the nav, header, main, and footer elements.
<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; 2019 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>Page Topic</h1>
  <p>More information on the main topic</p>
</header>

Page Topic

More information on the 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
<main> HTML5
Main
Element		 <main>
  <h2>Content Topic</h2>
  <p>Main content goes here. Typically, the nav and header elements are above the main element and the footer element is below the main. All of the elements are within the body tag.</p>
</main>

Content Topic

Main content goes here. Typically,...
<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.   
  2. List item 2
    3.   
  3. 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