Sample Semantic Mark-up
Make me as semantic as you can and present me in a nice way

This document contains a good mixture of semantic XHTML that will allow me to test my CSS style-sheet presentation layer. I will continue to add more semantics to this document as I find good examples. As for SEO, this must be the most important paragraph in this document and completely relevant to the title, description and h1 header of the page.

Let's Get Semantic

I'm afraid this will certainly require more O₂ intake and plenty of H₂O for refreshment because, let me tell you, this is definately no lover's tryst ^[1] my friend. In fact, we are only a mere 1/15 of the way along the path of progressive enhancement.

As Sir Winston Churchill stated:

Now this is not the end. It is not even the beginning of the end. But it is, perhaps, the end of the beginning.

Progressive enhancements can only begin now that our documents have the correct structure and will work in any user agent.

As we move forward through this book, we are doing so from a working application.

If we enhance the page in any way and the user agent does not support or has disabled the feature that allows the enhancement to be added, then the page will naturally degrade gracefully back to our working application.

Moving Forward

Each time I progressively introduce you to a new enhancement, I will always start off by showing you the working, meaningful markup and functionality before adding bells and whistles to it. We need to confirm that the application can live without the enhancement.

Now that we have given structure good coverage, it's time to learn about all this stuff so let's start by adding presentation to our linear layout.

Read on ...

Lorem ipsum sensibus link eleifend reprehendunt ex nam, vocent recusabo omittantur ei nam. Cum te altera numquam, in dicta corpora mel. She said, Quotation element verear iisque theophrastus ex vix, volutpat evertitur disputando eu mel. Sed at lorem legere electram.

Partem evertitur has ex. In vix hinc munere oportere, vel in dicunt intellegebat. Puto soluta at sed. An vim ignota eirmod, no vulputate intellegebat vix!

At urbanitas suscipiantur sea, dicant legimus mei et, maiorum propriae intellegat at sed!

Give me a Quote!

to get “this effect”. It may look like over-kill but removing CSS degrades very semantic.

Did you know The quick brown fox jumps over the lazy dog contains every letter of the alphabet?.

A quotation from elsewhere with a link back to the source.

“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.”

w3.org

<blockquote cite="url of quote">
  The Quotation.
  <p><cite><a href="url of quote1">source</a></cite></p>
</blockquote>

Let's continue with... Yes! Yet another paragraph! This text is within a span element consectetuer, vel quot malorum no! Has eu mollis iracundia. Eam latine conclusionemque ne. Et cibo veritus dissentiet eum, sed legendos qualisque evertitur te.

1. // Use of the pre element for PHP code
2. function get_blog_lang() {
3. if ( function_exists('language_attributes') )
4. return language_attributes();
5. }

Eu facete perfecto nec, some CSS code: /* this is <code> element placed inline */ div#footer{text-align:center;} libris doming eos ex, tota omnium electram ius ad. Has eu vituperatoribus mediocrem. Eam aliquid deserunt mandamus eu, vituperatoribus nonummy iudico pro no, eos dicam aeterno at.

<?php
/**
 * This code snippet is
 * actually placed within
 * a <pre> block.
 * @uses DefaultClass
 * @see http://example.com/DefaultClass/
 * 
 */
$main = MainClass::getInstance();
$main->setDoctype('xhtml');
$main->show();
?>

Let's leave those boring data tables and code behind and move on to something fun: lists

• Unordered list example item first
• Magna everti diceret no qui
• d discere urbanitas definitiones quo
  • a nested list.
  • argumentum quo id
    • second level <ul>-nesting
    • Ei nibh similique eam
    • Vix mediocrem sententiae ne
  • takimata eloquentiam
• Usu libris albucius cu, kasd contentiones no eos
• Zzril forensibus dissentias ex pro

Ea has emphasis text is here vocent aliquid dolorem, te utinam discere eripuit cum! Id cum strong emphasis text epicuri evertitur, cu summo nullam mucius vim? Quo an iuvaret invenire disputationi, cu vim commune suavitate, assum libris per id?

Ius bold text is here probatus rationibus id. Novum italicized text is here utinam democritum ad vim! Illud fabellas imperdiet vis et, et stet essent appareat quo!

1. Ordered list example item first
2. Magna everti diceret no qui
3. d discere urbanitas definitiones quo
   1. nested, ordered list. aeterno consulatu
   2. argumentum quo id
      1. latine scribentur
      2. possim menandri
   3. takimata eloquentiam
4. Usu libris albucius cu, kasd contentiones no eos
5. Zzril forensibus dissentias ex pro

Eum error accommodare ea! Cu nam modo iusto! His in quot a citation from Designing with Web Standards Paulo efficiendi, in aliquip nostrum eam! Cu sea dicunt intellegam consequuntur, omnis adipiscing id est?

An abbreviation of JAMA reque illum audiam nam, aeterno consulatu argumentum quo id, soluta mandamus ei vix? Eu qui alii nobis propriae, has dolor molestiae ut. His aliquid pertinax in, alterum facilis takimata in mea. Nec mazim aeque an. Ius ad errem saperet postulant, equidem perpetua mediocrem est at.

Et mea elit perpetua torquatos, id qui aeque albucius instructior? Te eum quis doctus delicata. Vim alia erant salutatus ad. Ius etiam scriptorem ne? Iracundia appellantur vix at, ut debitis vituperatoribus mea!

Nested Blockquote. Lorem ipsum sensibus eleifend reprehendunt ex nam, vocent recusabo omittantur ei nam. Cum te altera numquam, in dicta corpora mel. Verear iisque theophrastus ex vix, volutpat evertitur disputando eu mel.

Magna everti diceret no qui, id discere urbanitas definitiones quo? Dicant recusabo interesset ne vim, in mei ignota deterruisset!

Ferri graece prompta ex duo, latine scribentur eu cum, nam voluptua oportere definitiones id.

Deleted text: Duo in odio aliquam, sit aliquam comprehensam eu. Liber virtute detraxit ei vix! Ex eam wisi aliquam adipisci. An usu platonem qualisque, ex platonem maluisset constituam sea.

Inserted text: Eos ex tractatos definitiones. Choro timeam sed ut, te qui cibo semper phaedrum, appetere delicata cu eos. Periculis dignissim ex per.

HeaderTwo

Headers are important for the document outline, which can and should be validated along with the rest of your mark-up, according to the DTD used by the page's DOCTYPE. Here is the document outline as seen on the W3C validator for this page, before I started to add many more headers to it.

[h1] Sample Mark-upMake me as semantic as you can
  [h2] Let's Get Semantic
  [h2] HeaderTwo
      [h3] HeaderThree
          [h4] HeaderFour
          [h4] HeaderFour
              [h5] HeaderFive
                  [h6] Footnotes

Remember, only one h1 should be used. Then use h2 down to h5 to further sub-section the document outline. I use h6 for any footnotes that may be used.

HeaderThree

Keep checking the headers to ensure they are correctly nested in order.

HeaderFour

At some levels in this outline you will require more than one header at the same level.

HeaderFour

As in this section of the document.

HeaderFive

Note the h6 below is used for foot notes.

Footnotes

1. Secret meeting between lovers.