WebsiteTips.com - Web Design Tutorials, Tips, Top Resources

Some Basic HTML Tags and How To Use Them

by Shirley E. Kaiser, M.A., SKDesigns

Updated March, 2006. Copyright © 2001-2016, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at websitetips.com with permission.

The HTML 4.01 markup chart and examples below represent some of the typical markup that I review with clients who wish to change and update text themselves on their Web sites. Learning a few basic markup tags makes this a very simple process.

These tips are intended to cover some of the highlights to easily change text on your Web site. This is not intended to be comprehensive.

It's also just as important to use the appropriate HTML for its purpose, such as using the paragraph element for paragraphs, heading elements for headings, list items for lists. See my tutorial on their appropriate use at Semantics, HTML, XHTML, and Structure.

Chart 1: Common HTML 4.01 Markup For Text
NameOpening TagClosing Tag
1st Level Heading Title<h1></h1>
2nd Level Heading Title<h2></h2>
3rd Level Heading Title<h3></h3>
4th Level Heading Title<h4></h4>
5th Level Heading Title<h5></h5>
6th Level Heading Title<h6></h6>
Paragraph<p></p>
Blockquote<blockquote></blockquote>
Line Break<br>(none)
Non-breaking space&nbsp;(none)
Italic, Emphasis<em></em>
Bold<strong></strong>
Quote&quot;(none)
Comment tags<!-- -->

<!-- text goes here --> 

(Spacing must be exactly like this for the comment element, with a space between the beginning and ending tags.)

(NOTE: These are comments that you want behind the scenes within the HTML, not to show up on the Web page, such as for instructions or details about the page. Use these judiciously, however.)

top‘On this page’ menu

Chart 2: Common HTML Markup
For Special Characters
NameCharacterHTML
Ampersand&&amp;
Quote, Inches"&quot;
Curly Quote - Opening&#8220;
Curly Quote - Closing&#8221;
Copyright©&copy;
TrademarkTM<sup>TM</sup>
Registered®&reg;

top‘On this page’ menu

Chart 3: Common HTML Markup
For Unordered Lists
Name Opening TagClosing Tag
Unordered List<ul></ul>
Unordered List item<li></li>
Unordered List Example:
<ul>
     <li>List item</li>
     <li>Next list item</li>
     <li>Another list item</li>
</ul>

See the Unordered List example below for how it looks on a Web page.

top‘On this page’ menu

Chart 4: Common HTML Markup
For Ordered Lists
Name Opening TagClosing Tag
Ordered List<ol></ol>
Ordered List item<li></li>
Ordered List Example:
<ol>
     <li>Item One</li>
     <li>Item Two</li>
     <li>Item Three</li>
</ol>

See the Ordered List example below for how it looks on a Web page.

top‘On this page’ menu

Chart 5: Common HTML Markup
For Definition Lists
Name Opening TagClosing Tag
Definition List<dl></dl>
Definition Term<dt></dt>
Definition<dd></dd>
Definition List Example:
<dl>
     <dt>Term</dt>
          <dd>Definition of term above</dd>

     <dt>Another Term</dt>
          <dd>Definition of another term above</dd>
</dl>

top‘On this page’ menu

Examples: HTML Markup in Action

Please note the placement and use of the opening and closing tags. Remember to add the closing tags, too.

Using the markup designated for its purpose is important, too. See my tutorial on their appropriate use with examples at Semantics, HTML, XHTML, and Structure.

Heading Examples

Remember to use them in order, beginning with h1, and don't skip over any of them (such as from h1 to h3, skipping h2).

You can use CSS to style them how you wish, including colors, fonts, font sizes, margins, padding, and more. For example, the colors, fonts, font sizes, etc. that you see below are all handled with WebsiteTips.com's CSS behind the scenes.

Example 1.1: 1st Level Heading Title

This markup:

<h1>Heading Title</h1>

creates this:

Heading Title

Example 1.2: 2nd Level Heading Title

This markup:

<h2>Heading Title</h2>

creates this:

Heading Title

Example 1.3: 3rd Level Heading Title

This markup:

<h3>Heading Title</h3>

creates this:

Heading Title

Example 1.4: 4th Level Heading Title

This markup:

<h4>Heading Title</h4>

creates this:

Heading Title

Example 1.5: 5th Level Heading Title

This markup:

<h5>Heading Title</h5>

creates this:

Heading Title

Example 1.6: 6th Level Heading Title

This markup:

<h6>Heading Title</h6>

creates this:

Heading Title

top‘On this page’ menu

Paragraph Examples

Example 2.1: Two Paragraphs (showing the HTML)

<p>Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph.</p>

<p>Here is the next paragraph. Here is the next paragraph. Here is the next paragraph. Here is the next paragraph.</p>

Example 2.2: The two paragraphs above as they would appear on a Web page:

Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph.

Here is the next paragraph. Here is the next paragraph. Here is the next paragraph. Here is the next paragraph.

top‘On this page’ menu

Blockquote and Curly Quotes Examples

This markup:

As John Doe stated recently,

<blockquote>&#8220;Here is a sample of quoted text, usually a couple of sentences or more. Here is a sample of quoted text, usually a couple of sentences or more. Here is a sample of quoted text, usually a couple of sentences or more.&#8221;</blockquote>

creates this:

As John Doe stated recently,

“Here is a sample of quoted text, usually a couple of sentences or more. Here is a sample of quoted text, usually a couple of sentences or more. Here is a sample of quoted text, usually a couple of sentences or more.”

top‘On this page’ menu

Example 3.1: Miscellaneous Examples

Text with Emphasis

This markup:

<em>Here is a sample of emphasized text.</em> This sentence <em>emphasizes these words</em> but not the others.

creates this:

Here is a sample of emphasized text. This sentence emphasizes these words but not the others.

Bold Text

This markup:

<strong>Here is a sample of bold text.</strong> For this sentence, <strong>only these words</strong> are in bold text.

creates this:

Here is a sample of bold text. For this sentence, only these words are in bold text.

top‘On this page’ menu

Lists, Definition Lists

Unordered List

This markup:

<ul>
     <li>List item</li>
     <li>Next list item</li>
     <li>Another list item</li>
</ul>

creates this:

  • List item
  • Next list item
  • Another list item

Ordered List

This markup:

<ol>
     <li>Item One</li>
     <li>Item Two</li>
     <li>Item Three</li>
</ol>

creates this:

  1. Item One
  2. Item Two
  3. Item Three

Definition List

This markup:

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

     <dt>Another Term</dt>
          <dd>Definition of another term above</dd>
</dl>

creates this:

Term
Definition of term above
Another Term
Definition of another term above

top‘On this page’ menu

Related Articles, Tutorials

Related Web Site Resources

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with Amazon.com 

Our Other Sites

SKDesigns

Effective, accessible, standards-based Web site design since 1996

SKDesigns - skdesigns.com

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves


Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation