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.
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.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.
On this page:
- Chart 1: Common HTML Markup For Text
- Chart 2: Special Characters
- Chart 3: Common HTML Markup For Unordered Lists
- Chart 4: Common HTML Markup For Ordered Lists
- Chart 5: Common HTML Markup For Definition Lists
- Examples: Common HTML Markup in Action
| Name | Opening Tag | Closing 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 | | (none) |
| Italic, Emphasis | <em> | </em> |
| Bold | <strong> | </strong> |
| Quote | " | (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.) | ||
| Name | Character | HTML |
|---|---|---|
| Ampersand | & | & |
| Quote, Inches | " | " |
| Curly Quote - Opening | “ | “ |
| Curly Quote - Closing | ” | ” |
| Copyright | © | © |
| Trademark | TM | <sup>TM</sup> |
| Registered | ® | ® |
| Name | Opening Tag | Closing 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.
| Name | Opening Tag | Closing 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.
| Name | Opening Tag | Closing 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> | ||
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.
Jump to:
Heading Examples
Remember to use them in order, beginning with
h1, and don't skip over any of them (such as from h1 toh3, 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
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.
Here is the next paragraph. Here is the next paragraph. Here is the next paragraph. Here is the next paragraph.
Blockquote and Curly Quotes Examples
This markup:
As John Doe stated recently,
<blockquote>“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.”</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.”
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 sentenceemphasizes 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.
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:
- Item One
- Item Two
- 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
No comments:
Post a Comment