Loading... Please Wait...
Loading... Please Wait...

Search Support

Search our knowledgebase? Enter keywords or article id:

> go to search support

Support Index

Help and Support

PixelMill Live Help


Enter keyword or id#:



Quick Links

Printable Article

Transitioning to Semantic Markup

Article ID: KB101701

In my last article, I mentioned that you can have XHTML Strict-validated code whether your web site layout uses tables or not. You can also have XHTML Strict-validated code without semantic markup. This article introduces you to the idea of semantic markup and gives you a foundation for using it. The benefits you';ll gain include better search engine ranking, easier accessibility, and more opportunities for other people to access your content!

What is Semantic Markup?

Semantic markup is all about the code, and not about how the web site "looks." It';s about meaning and structure, not about formatting, colors, and fonts.

To best illustrate semantic markup, let';s take a look at these two code examples:

Example of non-semantic markup:
<p><b>Why choose PixelMill?</b></p>
<p>We have <b>four</b> great reasons for why you should choose PixelMill.</p>
<p>- real HTML code, not Photoshop-generated code<br />
- legally licensed images<br />
- great customer support<br />
- 20 Day guarantee</p>

Example of semantic markup:
<h1>Why choose PixelMill?</h1>
<p>We have <strong>four</strong> great reasons for why you should choose PixelMill.</p>
      <li>real HTML code, not Photoshop-generated code</li>
      <li>legally licensed images </li>
      <li>great customer support </li>
      <li>20 Day guarantee </li>

Both code examples would validate perfectly as XHTML 1.0 Strict. The text in both is the same. The difference is in how the text is "marked up" -- that is, what tags are used to label the content.

In the first example, a bold tag (<b>) is used to mark up the title and the word "four." This adds visual emphasis in a browser...; but recall that semantic markup is not about visual information, but about what information is in the code. Right now, there is no meaningful difference between the text "Why choose PixelMill?" and the text "four" because both use the bold tag.

Contrast that with the second example. In this semantic markup, the title is marked up with the Heading 1 tag (<h1>). This immediately helps us to know that this is a top-level heading. Furthermore, the word "four" is marked up with the strong tags (<strong>). This allows us to know that the word "four" is being strongly emphasized.

Similarly, the first example lists all four reasons in one paragraph, separated by line breaks. The line breaks certainly help you to understand that there are four points when you view it in a browser, but as far as the code goes, it is just one big paragraph. The second example uses a bulleted list (<ul>) to mark up each point as individual list items (<li>), so there is a lot more structure in the second example than in the first.

Semantic markup describes (X)HTML code that is meaningful and has a logical structure. It doesn';t really have anything to do with how a particular piece of text should be displayed as a web page; it more has to do with what that piece of text is -- that is, is it a heading, or a subheading, or a list, or a quotation?

Why Care About Semantic Markup?

"Why should I care how the HTML code is structured? My visitors aren';t going to look at the HTML code -- they';re going to look at what is displayed on the page!"

Most of your visitors certainly don';t care about the structure of your HTML code -- this is true!

However, there is an important "visitor" to your site that does care about the structure of your code -- the almighty search engine spider. Search engines process the HTML code of your web site, and those HTML tags actually mean something to them! In particular, some search engine spiders will look at the keywords in your heading tags and give them a slightly higher "weight" than the other words on your page. It is similar to how you might scan the headings of an article before deciding if you really want to read the whole thing. So, the more logically you mark up your code, the better the search engine is able to do its job of determining how relevant your page is to a certain topic.

Starting with Semantic Markup

The easiest way to dive into semantic markup is to start from scratch.

  1. Take one of your web pages and paste all of the content into a text file (such as NotePad). Then add line breaks to separate the content into logical paragraphs so that it is easier to read.
  2. Now start asking yourself -- is this a paragraph? Is this a heading? Is this a subheading? What level subheading is it? Is this a numbered list, where order is important? Is this a bulleted list, where order isn';t important? These are the questions that will help you to add block-level markup such as headings and subheadings (<h1>...<h6>), paragraphs (<p>), ordered lists (<ol> and <li>), bulleted lists (<ul> and <li>), and extended quotes (<blockquote>). Perhaps you have information that is best presented as data in a table -- in that case it is perfectly appropriate to use table markup.
  3. Next, look at the text that you might usually try to bold or italicize for emphasis. Instead of using the <b> and <i> tags (which don';t provide meaning as discussed above), use <em> for things you want to emphasize, and <strong> for things you want to strongly emphasize. This mean that you can';t use the "bold" or "italic" buttons and commands in FrontPage, but you have to add the strong and em tags in the HTML code yourself. Expression Web, however, uses the strong and em tags when you bold or italicize text, to help you with easier semantic markup!
  4. Some other inline elements that can help to markup text include:
    1. abbr -- used for abbreviations, like this: <abbr title="pounds">lbs.</abbr>
    2. acronym -- used for acronyms, like this: <acronym title="North Atlantic Treaty Organization">NATO</acronym>
    3. code -- contains computer code, like this: The <code>h1</code> element is for headings.
  5. Finally, if you have images that need to be inserted, you can add those now. However, make sure that these images actually add meaningful content -- for example, a picture of a graph, or a photo of a flower that you';re describing. For now, do NOT add images that are essentially "text replacements" (for example, achieving some sort of graphic effect on a heading), because those can be added via a stylesheet.
  6. A few other suggestions for achieving semantic markup:
    1. Are you adding site navigation links to your site? It makes sense to create a bulleted list of hyperlinks for your navigation, because that';s what navigation links are -- a list of pages of your site! (Again -- don';t worry about how to make it "look" like navigation links just yet -- that is what CSS is for!)
    2. Use headings and subheadings to your advantage. There are six levels of headings -- Heading 1 through 6 (<h1>...<h6>). Allow these to help you structure your content in as a sort of "outline" format. Do not use the headings and subheadings to simply achieve larger fonts... again, that';s what CSS is for!
    3. A huge way that FrontPage fails in semantic markup is when you try to indent text using the "increase indent" button. To achieve an indented paragraph effect, it places your content into a <blockquote> element. Most likely, however, you aren';t really creating an extended quote, you';re just trying to achieve a visual effect! Expression Web does this the "right" way -- by creating a custom class with a larger left margin and applying the class to the paragraph. If you';re using FrontPage, you';d have to create this custom class yourself:

      Stylesheet code: .indent { margin-left: 40px; }
      HTML code: <p class="indent">Indented paragraph</p>

PixelMill templates are moving towards semantic markup. The templates that use CSS for layout will usually follow the semantic markup principles above, although there may be some exceptions.

Now that you';ve got the basics of XHTML and proper semantic markup down, it's time to learn how CSS in templates takes over the design and layout!

Next: Transitioning to CSS in FrontPage and Expression

Was this helpful?

Please rate this article:

Not helpful Very helpful
1 2 3 4 5 6 7

Email address: (not required)

(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. Your email address is NOT REQUIRED to submit a comment.)

Comments: (How can we improve this article?)

Clicking "Submit" will not clear this page.

link to this page: http://shop.pixelmill.com/support/al1098/kb101701.htm
permalink to this article: http://shop.pixelmill.com/support/kb101701.htm

Back to top

PixelMill EDU


PixelMill EDUâ„¢ is an innovative and proprietary online training series designed to aid the do-it-yourself Web builder in transitioning to new Web editors, coding standards, and Web technologies.

Webinars and Seminars:

FrontPage to SharePoint Designer Series
This is a 6-Week series designed to give you strong exposure to the new SharePoint Designer web editor and interface, along with examples of working with Windows SharePoint Services and tips for transitioning from FrontPage.
Register Now!

Tables to Tableless CSS Series
This is a 6-Week series designed to help you transition from building Tables-based Web site layouts to working with CSS to edit and build Tableless Web site layouts. For all Web builders using Dreamweaver, Expression Web, or any other web editor.
Register Now!

FrontPage to Expression Web Series
This is a 6-Week series designed to give you strong exposure to the new Expression Web software and interface, along with tips for transitioning from FrontPage.
Register Now!

Learn more and register!



Contact Us

Phone: (866) PIXELMILL
(866) 749-3564
Int'l phone: 1 (530) 297-3662

105 E St, Suite 310
Davis, CA 95616 USA

Payment Methods

Visa Mastercard American Express Discover PayPal Personal check Purchase Order