Bringing It Together With Semantic Markup

Kevin Lawver

This is a presentation. If you'd like to view all the slides like a normal web page, you can.

So Now You Know HTML and CSS

• You know that there's a whole world of markup and selector possibilities
• Then why do I still see div's and span's all over the place?
• We're going to bring our knowledge of HTML and CSS together to create semantic markup and style.

Bringing The Two Together

• CSS is completely dependent on markup.
• CSS can only be as good as the markup is styles.
• It is impossible to write CSS without knowing something about the markup you're styling.
• Semantic markup has meaning.
• If we have truly semantic markup, we can have semantic style as well.

Kevin's Theory of Heterogeneous Markup

• It's easier to style documents when you know what markup to expect.
• It's easier to style documents when there are different types of elements to build selectors around.
• It's a lot easier to read type selectors than class selectors.
• You will build smaller, faster, better web applications if you use fewer divs and open yourself to the wide array of semantic elements the XHTML 1.0 spec has to offer you.

Homogenous Example

Taken from AOL Search 6.0:

<div id="results">
<div class="result" onmouseover="linkHover(this)" onmouseout="linkHide()">
  <div class="link">
    <div class="linkdetail" >
      <a id="lrurl1" href="http://toefl.org"><span id="ltitle1"><b>Test</b> of English as a Foreign Language (TOEFL)</span></a><br />
      <span id="ldesc1">Information about the TOEFL tests and services are available online. Try the  TOEFL practice questions.</span><br />
      <b><span id="ldurl1">http://www.ets.org/toefl/</span></b>
    </div>
  </div>
</div>
</div>

Heterogeneous Version

Taken from Site & Channel Search for the same result:

<ul class="results">
<li id="google_strict_teensItem1"><a href="http://toefl.org">Test of English as a Foreign Language (TOEFL)</a>
 - Information about the TOEFL tests and services are available online. Try the TOEFL practice questions.
<cite>http://www.ets.org/toefl/</cite>
</li>
</ul>

The Difference

• I even took out some javascript stuff and other markup from example one to be "more fair". I did change one thing about the second example (the cite used to be an h5, which I know now was wrong).
• The size is different.
  • Example 2 is 48% smaller than Example 1
  • Over a document that has 15 results on it, that turns into over a second of download time difference between the two.
• Example 2 is readable as it is.

Thinking Outside The Box (div)

• Divs are "divisions". Keep them for large containers for major sections of a document.
• For repeated items, use lists.
• Use inline elements for short pieces of content and then style them as blocks.

Remove Span From Your Vocabulary

• Span is a useless element.
• It's long (13 characters to have an open and a close).
• If you have to, use a shorter meaningless element like b or i.

Semantics Are What You Make of Them

• The meaning of a lot of elements is not set in stone.
• This means you can bend it a little.
• See the cite element in example 2.
  • It is perfectly OK to use inline elements as blocks with CSS.

Building Semantic CSS

• With truly semantic markup, you can write semantic CSS.
• It's easier to read.
• It's more efficient for the browser to apply.
• It's easier to write... really.

My Homogenous Selector

To style example one's URL:

Oh wait, I can't, because it uses b's in the title and description.

Homogenous Take Two

If I really had to...

#ldurl1 { 
    font-weight:normal; 
    font-variant: normal;
    color:#999;
}

Anyone see a problem with that?

My Heterogeneous Selector

To style example two's URL:

ul.results li cite {
    font-weight:normal; 
    font-variant: normal;
    color:#999;
}

Semantic CSS...

• Uses hooks to build appropriately specific descendent selectors.
• Uses the heterogeneous markup to build unique selectors that don't require multiple overrides depending on the situation.
• Uses an id or unique element as a starting point for every selector.

Challenges

• When member-created or unreliable content is used, this becomes very tricky.
• Until we have better CSS support, especially selectors, we're stuck with descendant selectors, which aren't flexible enough.
• Breaking out of a divvy mindset can be difficult.
• Creativity is required.

Questions?