HTML Tags And Examples by State College of Florida Professor Floyd Jay Winters
<!-- comment <!--Comments are only viewed in editor--> Nothing is seen in browser
<acronym acronym I am <acronym title="Certified Internet Web Associate">CIW</acronym> certified. I am CIW certified.
(Hover over term to see definition)
<abbr abbrevation I am <abbr title="Certified Internet Web Associate">CIW</abbr> certified.
HTML5 prefers abbr over acronym
I am CIW certified.
(Hover over term to see definition)
<a - Anchor <a name="Top" id="Top"></a>
HTML5 prefers id= to name=
Set an "Internal" named anchor or bookmark
<a - Anchor <a href="http://www.scf.edu/">SCF</a> SCF
<a - Anchor <a href="http://www.scf.edu" target="_blank">
<img src="images/SCF.gif" alt="SCF"></a>
SCF logo and link
<b> Bold <b>Bold text</b>  
In HTML 5 <b> can be used for a key word or product
Bold text
<big> bigger text <big>Bigger Text</big> Bigger Text
<body> Body of page <body>The main content of page</body> or
<body style="background-color:#FFFFCC">
The main content of page
<body style= Set Body Style and Background <body style="font-family: Arial, Helvetica, sans-serif; font-size:16px; font-weight: bold; color:#0000FF" background="images/BackgroundImage.jpg">

Sample new Body Style text


line Break Start new line<br / >Uses less space than <p> tag
Intended for items such as addresses or poems
Start new line. Uses less space than <p> tag
<center> Center <center>Center This</center>
(Deprecated: replaced by style=" text-align:center")
Center This
<div id=" Provides structure to a Web page <div id="masthead">
<!-- All masthead content may come from .css -->
</div>
The CSS for the code at left has the style code below:
#masthead {
background-image: url('images/BannerCGS2820.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. In this case:
HTML5
<!DOCTYPE html>
<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</em> Emphasis
<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 Zoey in URL address box of this page
<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="#0000FF"> Arial Text Size 5 </font>
(Deprecated: see Body Style and Style)
Arial Text Size 5
<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>
<!--
Contains document Title and Meta tags -->
</head>
Title is seen in Taskbar
<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
<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>
In HTML 5 <i> can be for a technical term or mood
Italicized text
id ID <h2 id="TopOfPage">Chapter 1</h2>
<a href="#TopOfPage">Top</a>
 
<img> Image Source <img src="images/monitor.gif" width="50px" height="50px" style="border:0" alt="monitor"/> Picture of monitor
<link> Link <link href="winters.css" rel="stylesheet" type="text/css"> Link page to a Cascading Style Sheet
<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 Winters">
<meta name="description" content="Web Development syllabus">
<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>Paragraph example - creates line break and a carriage return.</p>
<p style="text-align:center">This paragraph is centered</p>

Paragraph example - creates line break and a carriage return. More spacing than a <br> tag.

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 Text</strong>
In HTML5, <strong> now means important
Strong or Important 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

<table>
<th>
<tr>
<td>
Table
header
rows
data
<table width="75%" style="border:4px solid blue; background-color:#FFFFFF; width:75%; padding:10px; border-collapse:collapse">
<!-- padding is between text and cell border -->
<tr> <!-- Begin Row 1 -->
    <td colspan="3">Merged Cells</td>
</tr>
<tr> <!-- Begin Row 2 -->
    <td>Row 2, Col 1</td>
    <td nowrap>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
</tr>
<tr>
    <td>tr=Table Rows</td>
    <td>&nbsp;</td>
    <td rowspan="2">td=rowspan="2"</td>
</tr>
<tr>
    <td>Row 4, Col 1</td>
    <td>Row 4, Col 2</td>
</tr>
</table>
Merged Cells (<td=colspan="3">)
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
tr=Table Rows   td=rowspan="2"
Row 4, Col 1 Row 4, Col 2
<title> document Title <title>Title of your webpage</title> Title of your webpage (viewable in the titlebar)
<tt> TeleType <tt>Monospaced Text</tt> Monospaced Text (Teletype)
<u> Underline <u>Underlined Text (Avoid using! - Looks like link) </u> Underlined Text (Avoid using! - Looks like link)
<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