Structural versus Presentational Markup
Derek Bridge
Department of Computer Science,
University College Cork
Structural versus Presentational Markup
Aims:
- to appreciate the benefits of separating structural and presentational markup
- to know the history of HTML, especially the way presentational markup was introduced into HTML, then deprecated, then removed
- in this context, to learn how HTML5 uses the
em,i,strongandbtags
Early versions of HTML
- Beginnings
- Tim Berners-Lee invents WWW (1989/1990)
- Writes description of HTML (1990) and more formally (1993)
- Founds World Wide Web Consortium (
W3C) to develop Web standards (1994)
- 1995
- W3C publishes HTML 2.0
- Companies release browsers: Netscape Navigator, Internet Explorer
- Browser wars begin
- Early 1997
- W3C publishes HTML 3.2 but browsers diverge widely from the standard
Early versions of HTML: no DOCTYPE
HTML 4.01
- W3C publishes HTML 4.0 in late 1997 and a final version, HTML 4.01, in 2001
- One goal was to 'rein in' browsers
- Another was to make HTML a language for structural markup, leaving presentational issues to CSS
- It deprecates use of tags and attributes that are presentational
- deprecate: discourage use of a feature; the feature is retained in the short-term for short-term backwards-compatibility but is likely to be discontinued in the future
- Deprecated tags, e.g.:
basefont, center, font, strike, u - Deprecated attributes, e.g.:
align, bgcolor, border, valign,…
- W3C announces that HTML will not be revised any more!
HTML 4.01
- Six different DOCTYPES
- E.g. if you are avoiding deprecated tags and attributes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- E.g. if you are still using deprecated tags and attributes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The evils of mixing structural and presentational markup
- Documents become bloated
- Class exercise: Why care? (At least two reasons)
- Presentation tags may be used in place of structural ones
- Class exercise: Does that matter?
Advantages of CSS
- The HTML document can contain just content and structural markup, which overcomes the problems mentioned on the previous slide
- CSS is richer than the HTML presentational markup that it replaces
- If you want to modify the presentation of your site, changes can be applied consistently
- to all elements affected by a rule
- to all the web pages in a web site
HTML5
- Some people were unconvinced that HTML 4.01 should be the last version
- 2004, the Web Hypertext Application Technology Working Group (WHATWG) begins to extend HTML
- 2006, the W3C concedes it was wrong, starts work alongside the WHATWG on HTML5
- They have an uneasy relationship
- Is HTML5 ready?
- Expecting the spec to be finalized 2012-2014
- But not wholly official until 2022!
- In the meantime, modern browsers already support the more stable parts
- A History of HTML5, highlighting its uptake
HTML5: Two syntaxes
- When you create an HTML5 Web page, you choose between two concrete syntaxes
- (
Syntax refers to the rules for writing the language)
- (
- The HTML syntax: more lenient
- start tags don't always need end tags
- void elements need just a start tag
- attribute values don't always need quotes
- The XHTML syntax (which we've been using): more rigid
- start tags always have end tags
- but void elements have a self-closed start tags (i.e. include a / at the end)
- attribute values always have quotes
- There are other differences too
- In the lecture, we'll discuss which to use
HTML5
- Simple DOCTYPE:
<!DOCTYPE html>
- New tags, e.g.:
header, hgroup, nav, section, article, aside, footer - HTML4's deprecated presentational markup and other presentational markup is
- either removed from HTML5: e.g.
font, center, big - or redefined in HTML5, e.g.
i, b, small
- either removed from HTML5: e.g.
HTML5: em, strong, i and b
- Read the spec for yourself: Web Developer Edition
- Use
emto emphasize a span of text in a way that changes its meaning - Use
strongto draw attention to the importance of a span of text without changing its meaning - Use
iwhen you need to distinguish a title, a name, a technical term or a phrase in a foreign language from surrounding text - Use
bto distinguish keywords or key phrases from surrounding text
Class exercise: em, strong, i or b?
- That's not a badger! It's a shaving brush.
- Save your work to disk frequently.
- If it's not your own work, you will score zero.
- Well, Programming and Web Development is my favourite module.
- CS1109 teaches you to build Web pages and write programs.
- Litost is a Czech word that is virtually untranslateable but means something like a state of agony and torment created by the sudden sight of one's own misery.
HTML5: big and small
- The
bigtag has gone - The
smalltag has been redefined- it is now to mark up small print: short spans of text that present disclaimers, caveats, legal restrictions, copyrights or attribution
-
E.g.
<p> <small> © Derek Bridge. All rights reserved. </small> </p>
What happens if you break the rules?
- What happens if…
- …you do your nesting incorrectly?
- …you use an unknown tag or attribute?
- …you use the obsolete presentational markup?
- …you're using the XHTML syntax but omit an end tag?
- Browsers are forgiving
- They (almost) never give error messages if you mess up the HTML or CSS
- They do their best to display the page
- And HTML5 even defines what they should do when you make such errors, so all modern browsers should react in the same way (wasn't the case with previous versions of HTML)
HTML editors
- We've been typing 'raw' HTML using a standard text editor
- There are WYSIWYG editors, which
- show you how the web page will eventually look, and
- automatically produce HTML for you
- Examples: Microsoft Expression Web Designer, Adobe Dreamweaver, W3C's Amaya, Google Sites
- But be warned: they can produce poor markup (unless you're careful)
- sometimes bloated HTML, e.g. lots of unnecessary
divs - sometimes mixing presentational markup (either presentational HTML or CSS) into the HTML
- sometimes illogical order of content
- sometimes bloated HTML, e.g. lots of unnecessary