[talk]
What comes first on the web
– style or structure?
Håkon Wium Lie
What comes first on the web
– style or structure?
What comes first on the web
– style or structure?
What comes first on the web
– style or structure?
- first, as in importance?
- first, as in time?
What comes first on the web
– style or structure?
What comes first on the web
– style or structure?
The Web
answers.com: The complete set of documents residing on all Internet servers that use the HTTP protocol, accessible to users via a simple point-and-click system.
Wikipedia: The World Wide Web ("WWW" or simply the "Web") is a global information space which people can read and write via computers connected to the Internet.
What comes first on the web
– style or structure?
Structure
<h1>Headline</h1>
Structure
<h1>Headline</h1>
Structure
<body>
<h1>Headline</h1>
<p>Paragraph</p>
</body>
body
/ \
h1 p
Structured document
A digital document consisting of hierarchical elements containing text and other content. The elements primarily represent the logical roles of the content rather than the presentation of the content.
- encode roles
- universal semantics
- media-independent
What comes first on the web
– style or structure?
Style
h1 { font-size: 16px }
p { color: black }
Style sheets
A set of rules that associate stylistic properties and values with structural elements in a document, thereby expressing how to present the document. Style sheets generally do not contain content; are linkable from documents; and are reusable.
- describes the presentation of an document
- encodes typography, aesthetics
- stylistic rules
Which is more important
– style or structure?
What comes first in time
– style or structure?
- What should come first in time?
- historical analysis
- technical analysis
- why does it matter?
Markup languages should be developed in the context of
style sheet languages, not the other way around.
Historical analysis
| Markup | Style | Difference in time
|
|---|
| SGML | FOSI | 2 years apart
|
| SGML | DSSSL | 10 years apart
|
| P | S | contemporary
|
| Scribe | Scribe | contemporary
|
| LaTeX | TeX | -3 years apart
|
SGML
- SGML: became ISO standard in 1986
- strong support from Department of Defense, CALS
- no style sheet language available
- FOSI:
- developed quickly for CALS
- not accepted by SGML community
- DSSSL:
- work started around 1986
- became ISO standard 1996
- due to lack of style sheets, SGML saw little use for documents
Simultaneous development
- development of markup and style systems done by the same group, at the same time
- Brian Reid: Scribe
- Vincent Quint: S/P
- not submitted for standardization
- if the had been successfully standardized, development would no longer be simultaneous
TeX – Latex
- TeX
- developed by Donald Knuth
- first version released in 1982
- programming language + formatter
- not a style sheet language per se
- LaTeX
- Leslie Lamport, was a Scribe user who wanted to
make LaTeX a
sort for Scribe on top of TeX
- first version released in 1985
- macro package, comparable to markup language
- TeX and LaTeX are early Open Source success stories
What comes first in time
– style or structure?
- historical analysis
- technical analysis
Technical analysis
What are the key differences between markup languages and style
sheet languages?
| Markup | Style
|
|---|
| Processing requirements | parser | parser + formatter
|
|---|
| Implementation complexity | low | high
|
|---|
| Developers | many | few
|
|---|
Technical analysis
- style sheet languages are required to present markup languages
- style sheet languages and their formatters are platforms onto which markup languages can be built
- deploying new generations of formatters is difficult
Microformats
- start as simple as possible
- design for humans first, machines second
- reuse building blocks from widely adopted standards
- extend semantics, not formatting
- a reaction to large-scale efforts:
- evolution, rather than revolution
- used HTML's class attribute extensively
Microformats
When XML was new, CSS was scarce, and the Browser Wars raged, HTML was
often cast as a hopeless muddle. Instead, the Web of HTML
might
have given way to a Web of XML
where each publisher used their
own tags and their own presentation logic within a new generation of
browsers. Now, it happens to be that in 2005 [...] XML seems to have found its niche on the server
rather than the client.
In the meantime [...] CSS support matured to the point that authors and
designers adopted it broadly. This was the key ecological change that
triggered the resurgence of experimentation with plain old
HTML.
– Rohit Khare, Tantek Çelik
A book microformat: boom!
- builds on HTML
- adds some semantics required for books
- splits HTML content into
- titlepage, preface, chapters, appendix etc.
<html>
<div class="titlepage">
...
</div>
<div class="preface">
...
</div>
<div class="chapter">
...
</div>
<div class="chapter">
...
</div>
<div class="appendix">
...
</div>
</html>
Math markup
- several DTDs:
- 1988: AAP
- 1994: ISO 12083
- 1998: MathML 1.0
- 2001: MathML 2.0
- browsers cannot display these natively
nA
- AAP
<inf location="pre">subscript</inf>base
- ISO12083
<subform>base</subform>
<inf location="pre">subscript</inf>
- MathML
<mmultiscripts><mi>base</mi>
<mprescripts/><mi>subscript</mi>
<none/></mmultiscripts>
- XML MAIDEN
<inf>subscript</inf>base
Advanced prototyping
- markup languages can be prototyped using:
- HTML + class attribute + CSS (microformats)
- XML + CSS (XML MAIDEN)
- limited to document-like presentations
- other presentations also possible
- canvas element
- graphics API
- procedural
- through DOM, declarative markup can be supported
Summing up
- both structure and style are necessary on the web
- structure provides order, accessibility
- style provides aesthetics, beauty
- traditionally, markup languages have been developed before formatting languages
- an
ecological change
has occurred; microformats are developed in the context of CSS
Markup languages should be developed in the context of
formatting languages, not the other way around.
Historical analysis
| Markup | Style | Difference in time
|
|---|
| SGML | FOSI | 2 years apart
|
| SGML | DSSSL | 10 years apart
|
| P | S | contemporary
|
| Scribe | Scribe | contemporary
|
| LaTeX | TeX | -3 years apart
|
Historical analysis
| Markup | Style | Difference in time
|
|---|
| SGML | FOSI | 2 years apart
|
| SGML | DSSSL | 10 years apart
|
| P | S | contemporary
|
| Scribe | Scribe | contemporary
|
| LaTeX | TeX | -3 years apart
|
| HTML | CSS | 5 years
|
