Semantic Markup Tag Reference
Jun1
If you care at all about Search Engine Optimization than you need to know Semantic Markup with your eyes closed!
It is the foundation of good SEO and without it you are doomed to a life of sub-par SERPs. Even if you know everything about SEO, bad semantic markup is enough on its own to kill your rankings. So don’t forget to use it on all your webpages!
Here is a list of some of the most common Semantic tags that you should know:
Heading Tags – <H1>, <H2>, etc.
H1, H2, H3, H4, H5, H6.
Example: <h1>Our Company</h1>
Paragraph Tag – <p>
The P tga. Use the P element for paragraphs. Don’t use the element to instead provide paragraph-like breaks.
Example: <p>This is a paragraph of text.</p>
Emphasis Tag – <em>
The EM tag. Use the EM element for emphasis. If you’re after italicized text aside from emphasized text or citations use CSS (font-style:italic) rather than EM or I.
Example: This is <em>important</em>.
Strong Tag – <strong>
The STRONG tag. Use for even stronger emphasis.
Example: This is <strong>even more important</strong>.
Cite Tag – <cite>
The CITE Tag. Contains a citation or a reference to other sources.
Example: <cite>Designing with Web Standards</cite> is an book by Jeff Zeldman.
Blockquote Tag – <blockquote>
The BLOCKQUOTE tag. Don’t use BLOCKQUOTE just for text indenting. If you want to indent text, use CSS margins, padding, or a combination of both. Likewise, if you don’t want to use BLOCKQUOTE because of its block-level characteristics, you can use CSS to change them, too.
Example: <blockquote>This is a paragraph of text I want to indent.</blockquote >
List Tags – <ol>, <ul>, <li>
OL, UL, LI. When you have a list of something, use the list element tags. While there are a few choices of list style types, these can be replaced with images using CSS. It’s also possible to hide bullets completely, change indenting, use lists inline or block, and more.
Example:
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
Definition Tags – <dl>, <dt>, <dd>
DL, DT, DD. Use definition list elements for terms and their corresponding descriptions.
Example:
<dl>
<dt> Absolute link</dt>
<dd> A link which shows the full URL of the page being linked at. Some links only show relative link paths instead of having the entire reference URL within the a href tag.</dd>
<dt> Deep linking</dt>
<dd> Deep linking, on the World Wide Web, is making a hyperlink that points to a specific page or image on another website, instead of that website’s main or home page. Such links are called deep links.</dd>
<dt> Long Tail</dt>
<dd> The word long tail is being used to describe a (niche) longer keyword focus while writing content for search engine optimization.</dd>
</dl>
Source: SEO Cheat Sheet
Here is a sample of Semantic HTML Markup:
<h1>This is the most important headline</h1>
<p>This is ordinary paragraph text, where certain words and phrases may be <em>emphasized</em> to mark them as
<strong>particularly important</strong>.</p>
<h2>This is a headline of secondary importance to the headline above</h2>
<p>Any time you list related things, the items should be marked up in the form of a list:</p>
<ul>
<li>A list signals that a group of items are conceptually related to each other</li>
<li>Lists may be ordered (numbered or alphabetic) or unordered (bulleted items)</li>
<li>Lists may also be menus or lists of links for navigation </li>
<li>Cascading Style Sheets can make lists look many different ways</li>
</ul>
Related Blogs
- Related Blogs on Semantic Markup
- What’s the difference between RDFa vs Microformats? | kelpdesign
- CSS Advice for Designers from Designers : FullBleed
- CSS Books: Transcending CSS: The Fine Art of Web Design (Voices …
- Hitachi XBRL » Blog Archive » XBRL and Semantic Technologies
- Semantic HTML – What is it; Why bother?
7:52 am on September 21st, 2009
Thank you very much for this straight forward yet effective explanation of Semantic Markup.