Roadmap to Markup Success
Understanding Structure and Style
Molly Holzschlag
Molly.com, Inc.
Eric A. Meyer
Netscape Communications
About web standards
- Series of specifications & recommendations provided by the W3C
- W3C is primarily a research and development consortium and not truly an authorotative standards body
- Web standards exist as much for designers/developers as for software developers (browsers, tools & utilities for web production)
- HTML, XHTML, and CSS all fall under the W3Cs leadership
- Grass roots groups such as The WaSP (Web Standards Project) and MACCAWS (Making a Commercial Case for the Adoption of Web Standards) have emerged to evangelize and educate
SGML, HTML, XML
- SGML: Standard Generalized Markup Language
- Metalanguage parent to HTML and later, XML
- HTML: Hypertext Markup Language
- HTML 4.0 - Introduction of separation of structure and style via style sheets; introduction of three separate DTDs
- HTML 4.01 - Minor editorial update but important because forms the basis of the XHTML 1.0 DTDs
- XML: Extensible Markup Language
- Metalanguage: Extensible, customizable, cross-platform with both server and client-side applications
XHTML, Modularization
- XHTML 1.0: Extensible Hypertext Markup Language
- Reformulation of HTML as an XML application
- XHTML 1.1 & Modularization
- Decomposition of languages into modules (text, tables, forms, etc.)
- XHTML 2.0: A very different future
object becomes ubiquitous, new elements are added, addition of XFrames
Important ideas common to HTML 4.0 & XHTML
- Separation of structure & presentation
- Accessibility
- Internationalization
- Document conformance & validation
- Improvement of document rendering
Document Type Definitions (DTDs)
- Strict Interpretations
- Transitional Interpretations
- Frameset Interpretations
Document conformance & validation
- Use of correct DOCTYPE and structure
- Validation of documents with good validator
HTML and XHTML declarations
Root Elements
Head and Body Elements
head element also must contain title element in HTML and XHTMLbody element combines with head element and any declarations to form the basis of the document
Logical markup for content
- Proper use of headers
- Paragraphs and breaks
- Lists, rules, etc.
Logical markup example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Working with Structure</title>
</head>
<body>
<h1>Welcome</h1>
<p>Welcome to the site where structure matters!</p>
<h2>Getting Into Structure</h2>
<p>In order to begin working with structure, you need to be aware of:</p>
<ul>
<li>DOCTYPE declarations</li>
<li>Properly structured head and body components</li>
<li>Logical structures for content markup</li>
</ul>
</body>
</html>
Viewing the document tree
- Document root:
html
head & body are children to the roottitle is child to the parent headh1 , h2, p, ul all children of body - Each
li constitutes a leaf node
XHTML rationale
- Bring rigor to web markup
- Accommodate new devices
- Facilitate accessibility
- Bring extensibility & customization features to developers
Initial requirements for an XHTML document
- Recommended but not required: XML prolog
- Required: DOCTYPE declaration
- Required: Root element of
html with namespace
- Required:
head, title, and body
XHTML syntax
- Case sensitivity
- All elements and attribute names in lower case
- Attribute values are not case sensitive
- Well-formedness
- proper nesting of elements
XHTML syntax continued
- Management of elements and attributes
- Non-empty elements must have a closing tag
- Empty elements close with a trailing slash
- All attributes must be quoted
- No attribute mimimization is allowed in XHTML
- Managing scripting and style
- Ideally scripts and style are external to XHTML documents
- Scripts require escaping certain character entities, such as the ampersand
Deconstructing the UI7 conference page
- Goal 1: to strip a conventionally designed page down to its structure, demonstrating some of the major concerns when structure and presentation are not separated
- Goal 2: to convert the page to valid XHTML
- Goal 3: to prepare the document for styling with CSS
- Goal 4: to add some accessibility features
view page
Deconstruction: Removing font tags and related attributes
- Remove all
font tags and related attributes
- Rationale:
font tags are wholly presentational and typographic concerns can be readily and more flexibly handled with CSS. Currently the page is using a combination of both. Let's get rid of it all and rebuild it better
- Found 39
font elements and removed them. Very few visual differences result. Reduced page weight by 1k
view page
Deconstruction: span tags
- Remove all
span tags and related attributes
- Rationale: span is being used to style header and body text that could be more logically styled
- Found 41
span elements and removed them. Significant differences now appear. 2k more shaved off of page weight
view page
Deconstruction: non-standard markup
- Remove all proprietary markup preparing document for conformance
- body margins and alignment attributes
- GoLive generated JavaScript elements in body and head
- Non-SGML character entities
- Added a complete HTML 4.0 strict DOCTYPE declaration and validated document
view page
Deconstruction: presentational markup
- Removed all remaining presentational markup including alignment attributes and table images.
view page
Deconstruction: clean up
- Removed all scripting. Also removed external style sheet references as this will be replaced later.
- Revalidated document
view page
Deconstruction: Viewed tables, re-engineered primary table
- Examined nested tables
- Re-engineered primary table and removed nests
view page
Conversion to XHTML 1.1
- Convert syntax
- Validate document
view page
Added Accessibility Features
- Table Summaries
alt attribute descriptions- Titles in anchors
view page
On over to you, Mr. Meyer
»»»
Disclaimers!
- We'll be talking about today and tomorrow, not yesterday
- Most of you know how to handle the old; let's look at the new
- Wish we had time to explore v4-era compromises, but...
- It is possible to balance new-browser styling and old-browser concessions
A Dash of Theory
- structure of a rule
h1
{color:
purple;
font-size:
175%;}
- embedded stylesheets
<style="text/css">...</style>
- external stylesheets
<link rel="stylesheet" type="text/css"
href="site-style.css">
@import url(page.css);
- inline styles
<p style="background: yellow;">...</p>
Width differences
- Courtesy MSDN:
Starting from scratch
- Molly showed you how to take old-school markup and strip it down
- Of course, presentation is handled via CSS, not
font and its ilk
- So let's take away the CSS and see the results!
- With the palette clear, let's rebuild the styles to see how they work
Visualizing structure
- Use CSS to "sketch out" the structure of a page
- Good for diagnosing table-layout problems
- Great for knowing how elements are nested
- Borders are good, but can have layout implications
- Backgrounds avoid layout shifting, but can be jarring
Choosing class and ID names
- Add classes to things that have common aspects—external links, asides, captioned pictures, etc.
- Classes are more commonly used because they were a little better supported in old browsers
- IDs are quite safe, and woefully underused
- Add IDs to unique elements—navigation sidebars, mastheads, footers, etc.
- Extensive use of IDs can give you the effect of writing "XML lite"
Adding class and ID names
- Some IDs (more will follow as we work):
| Top masthead | #masthead |
| Main table | #main |
| Left-side navigation | #nav |
| Current page link | #current |
| Main content | #content |
"Global" styling
- Look at the original HTML and find things in common
- Check the width of the original; set elements accordingly
- Set vertical alignment of cells
- The page background could stand some reduction
- With the new background, the main table needs a background
- The usual suspects: font and link styles; image borders
The left navbar
- Is precise recreation really necessary?
- Set a width and background color
- Boldface the links; normalize the paragraphs
- Kill off paragraph margins
- Line height can affect spacing
- Remember to leave some "indentation" room
Bullet time
- Images as bullets: CSS makes it easy, but we're turning off bullets here
- Instead, we're dropping these bullets into the link backgrounds
- Need padding to accomodate the images
- Use "hanging indent" to push the diamonds into place
- Add hover and "current link" styles (which are the same in this design)
Bullets in the main
- Here we use images as bullets; background tricks aren't needed
- Remember to give the bullets room to live
- Some extra vertical whitespace may be necessary for bullets
Styling the content
- We can set width, or we can let it go
- Padding needed to recreate the spacer-GIF cell effects
- Paragraphs are all basically the same (and usually are)
- Spacing adjustments can happen on the fly, or wait until the end
Styling main-text links
- We're actually going to style all links
- The specialized links (left nav, speaker list) have weightier styles
- Link - visited - focus - hover - active (LVFHA)
Styling other pieces
- The titles were already converted to
h2, etc.
- Style these directly, using CSS to overcome margins and other default layout
- The registration area has some "special" hooks we can use
- Hang these styles on the class names
Recreating the expert speakers
- Remember we've ID'd the table cell itself
- Wrap the contents in a
div for ease of styling
- Borders and margins block out the containing box
- Use the
h3 to create the title
- Background, foreground, alignment, text—all in one element
Setting up the links
- Each link has its own paragraph, so we'll use those
- Spacing and "indentation" happens on the
p element
- So do the separators!
- Throw in an ID to remove the first separator
- Let's use the
strong element to our advantage
Hovered experts
- Set the base color of the links
- Now we add in the hover style (just a color change)
- Why don't the names change color too?
- Beware hover styles that force layout changes!
Fixing the footer
- Start with background colors where needed
- Links already have color, but the text doesn't
- We'll style the cell itself, and let that apply to the bits between the links
Compare and contrast
- Now that we've added the styles, the page weight is about 15KB
- Changes are a snap—want to make the expert speaker links purple on gold with an orange hover effect?
- The markup itself is simpler to read and edit
- The unstyled view is not as nice, but still readable
Throwing out all the tables
- How far can we go?
- Let's try getting rid of all the table markup
- Browser compatibility is more of a concern
- Accessibility will increase, and the unstyled view will be less of a problem
Conversion instead of removal
- At this point, we'll end up converting tables to
divs
- Some cells become
divs as well
- Why not remove them? We need a way to place the pieces!
- At the end, we have only
div elements framing the layout
Placing pieces
- The masthead can be left mostly alone, except for image placement in Gecko and the width
- Within the "main"
div, we have three "columns"
- We could float or position all three, but that has implications
- We'll float the sidebar and leave the main column in the normal flow
- The footer needs help; rearrangement is useful here
Floats and height
- The drawback to floats is that they tend to auto-size their height
- In some cases, floats will stick out of their parents!
- We can force parents to wrap around floats
- Getting floats to stretch taller is much harder
Positioning to the rescue
- Instead of floating the navigation links, we'll position them
- We need to establish a containing block (a positioning context)
- With that done, we can place the navigation anywhere
- What about the background?
- Stretching the height is one option, or we could be sneakier and use a border instead
Compare and contrast redux
- The page weight isn't much changed
- Layout flexibility goes up quite a bit
- There are obviously more wrinkles to floating and positioning
- Browser compatibility is reduced, though not too much
- The unstyled view is much improved