~~SLIDESHOW~~
Contact Hour 13: Notes for the Session on Monday 12th March, 2012.
Lecturer: Dr Chris P. Jobling.
Based on Chapter 3 of Castro and Hyslop where you will find detailed notes. Please expand these outline notes.
This is the example that we will use throughout this session: gaudi.html
It is based on one of the example on page 85 of Chapter 3 in Castro and Hyslop that is available online here.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title> Antoni Gaudí - Introduction </title> <link rel="stylesheet" href="http://www.bruceontheloose.com/htmlcss/examples/chapter-03/common/css/0326-layout-with-divs.css" /> </head> <body> <div id="container"> <header role="banner"> <nav role="navigation"> <ul id="toc" title="Table of Contents"> <li lang="es" title="Learn about Antoni Gaudí"> <a href="#gaudi">Antoni Gaudí</a> </li> <li lang="es"><a href="#sagrada-familia">La Casa Milà</a></li> <li lang="es"><a href="#park-guell">La Sagrada Família</a></li> </ul> </nav> </header> <article role="main" class="architect"> <h1 id="gaudi">Barcelona's Architect</h1> <p>Antoni Gaudí's incredible buildings bring millions of tourists to Barcelona each year.</p> <p>Gaudí's non-conformity, already visible in his teenage years, coupled with his quiet but firm devotion to the church, made a unique foundation for his thoughts and ideas. His search for simplicity, based on his careful observations of nature are quite apparent in his work, from the <a href="#park-guell">Park Guell</a> and its incredible sculptures and mosaics, to the Church of the <a href="#sagrada-familia">Sacred Family</a> and its organic, bulbous towers.</p> <section class="project"> <h2 id="sagrada-familia" lang="es">La Sagrada Família</h2> <p><img src="http://www.bruceontheloose.com/htmlcss/examples/chapter-03/img/towers.jpg" width="75" height="100" alt="Sagrada Família Towers" /> The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of the Sacred Family is the most visited building in Barcelona. In it, Gaudí combines his vision of nature and architecture with his devotion to his faith. The Sagrada Família attracts even the non-religious to its doors in large part due to its tragic story and its still unfinished state, of which the everpresent scaffolding and cranes are permanent reminders.</p> </section> <section class="project"> <h2 id="park-guell" lang="es">Park Guell</h2> <p><img src="http://www.bruceontheloose.com/htmlcss/examples/chapter-03/img/dragon.jpg" width="100" height="75" alt="Park Guell Dragon" /> The Park Guell always reminds me of Howard Roark in Ayn Rand's <a href="http://en.wikipedia.org/wiki/Fountainhead"><cite>The Fountainhead</cite></a>. Gaudí's project in the Park Guell was to build a residential community whose residents would love where they lived. It was never finished.</p> <p>Perhaps that is for the best, since now we <em>all</em> get to enjoy it. The Park Guell is set on a hill overlooking practically all of Barcelona. Its beautiful and even comfortable serpentine bench is filled with foreigners and locals alike every day of the week. Its mosaic lizards have become synonymous with the city itself.</p> </section> </article> <aside role="complementary"> <h1>Architectural Wonders of Barcelona</h1> <p>Barcelona is home to many architectural wonders in addition to Gaudí's work. Some of them include:</p> <ul> <li lang="es">Arc de Triomf</li> <li>The cathedral <span lang="es">(La Seu)</span></li> <li lang="es">Gran Teatre del Liceu</li> <li lang="es">Pavilion Mies van der Rohe</li> <li lang="es">Santa Maria del Mar</li> </ul> <p>Credit: <a href="http://www.barcelona.de/en/barcelona-architecture-buildings.html" rel="external"><cite>Barcelona.de</cite></a>.</p> </aside> <footer role="contentinfo"> <p><small>© Copyright 2011</small></p> </footer> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>...</title> </head> <body> </body> </html>
You should create a template containing this text as a starting point for all your pages.
<note>
<meta charset=“utf-8” />
tells the browser that all the text in this document are extracted from the 8-bit UTF character set.
</note>
<note> * The DOCTYPE
and html
elements are compulsory in HTML5.
lang
attribute defines the principle language of the document (here en
means English).DOCTYPE
puts current generation browsers into standards mode.DOCTYPE
tells validators which specification to compare your code against.DOCTYPE
originates in another language called SGML. It is always typed in upper case.</note>
Each HTML page must have a title
element.
<head> <title>Antoni Gaudí - Introduction</title> </head>
title
content should be short and descriptive.title
element must be text, it cannot contain any formatting, images or links<note> In most browsers, the title appears in the title bar and/or current tab.
A page's title directly affects its ranking in many search engines. The closer the title to the actual words used to search for the page, the higher it will appear in the search results. It is also used to identify your page in the results. The title is also used in history lists, favourites and bookmark lists. </note>
<note warning> If your title needs special characters they'll have to be part of the encoding or you'll need to write them with character entities. </note>
<body> <h1>Antoni Gaudí</h1> <h2 lang="es">La Casa Milà</h2> <h2 lang="es">La Sagrada Família</h2> </body>
<note>
lang
to tell your browser that the contained text is different from the main body text. Here Spanish.</note>
<hn>
, where n
is a number from 1 to 6, depending on the level of importance that you want to create.</hn>
where n
is the same number used in step 1See example (don't forget to view source)
<note>
Importance h1
is the most important, h6
is the least important.
</note>
<note tip>
h1-h6
are especially important because of their impact on your page's outline. By default, browsers display headings progressively smaller moving from h1
to h6
.h1
(which you shouldn't try to exploit by making all headings h1
because they will penalize that).</note> <note tip> Screen reader users often navigate a page headings via keyboard, because it allows them to quickly assess a page's content and find what interests them without having to listen through the whole page. It is instructive read this article from Bruce Lawson Headings in HTML5 and Accessibility and to watch this video in which a blind user demonstrates why headings are important for Screen Readers. </note>
h1-h6
elements were all you had to define this structurearticle
, aside
, nav
and section
—that demarcate distinct sections in the document and define the scope of the h1-h6
(as well as the header
and footer
) elements within them.
<note>
This last point means that each sectioning element has its own h1-h6
hierarchy, which is a big shift from previous versions of HTML. Also, not only is more than one h1
in the page OK, it's generally recommended the the HTML5 spec.
</note>
<note warning>
However, even though it's recommended, screen readers and search engines may still be looking for the traditional use of h1-h6
so you probably need to try to combine the semantic meaning of the sections with the older meaning of the headings.
</note>
In this brief aside we will demonstrate this using Geoffrey Sneddon's HTML5 Outliner (http://gsnedders.html5.org/outliner/ and four examples from Castro and Hyslop):
h1-h6
to define structure: outline5.htmlarticle
, aside
, nav
, and section
has its own outline that may begin with h1
and continue through h6
.Example (view in the outliner tool)
<note> Checking the code with the HTML5 outliner you see this:
So, even though the Local Teen heading is a higher rank (h1
) than the h2
it sits under, it's a subheading of the h2
because it's contained in an article
under that heading. And the Hooked h2
is a subheading of the News h2
not on equal standing.
The News heading could be an h3
, and h4
, or any heading level, and the outline would be exactly the same. The same is true for Local Teen and Hooked, as long as Local Teen has the higher-ranked heading.
</note>
hgroup
shows they are related.<note>
hgroup
appears in the document outline</note>
<header> : </header>
<header> : <nav role="navigation"> : </nav> </header>
Thearticle
element represents a self-contained composition in a document, page, application,
or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted
comment, an interactive widget or gadget, or any other independent item of content.
Thesection
element represents a generic section of a document or application. A section, in
this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the
numbered sections of a thesis. A Web site's home page could be split into sections for an
introduction, news items, and contact information.
Is your content an independent piece of content or a widget that would be appropriate for syndication?
article
section
(but see Generic containers later)
For tangentially related sections of content that could stand on its own is marked up using the aside
element.
<note>
aside
s are often rendered by CSS by removing them from the amin body and moving them to a side column.
</note>
Sometimes you need a container that has no particular semantic meaning but which is useful for the purpose of styling and JavaScript. The div
element can be used for this purpose.
Examples:
<note>
Before HTML5 <div id=“container-name”>…</div>
was the only way to create the sectioning features that we have just described. In fact it was a survey of the common ways that divs where used by web designers that led the designers of HTML5 to the collection of sectioning elements that we now have. For example <div id=“header”>
, <div id=“footer”>
, <div id=“nav”>
, etc can still be observed in many “legacy” web sites that are not marked up in HTMl5.
</note>
WAI-ARIA (Web Accessibility Initiative's Accessible Rich Internet Applications), or ARIA for short, adds additional attributes to elements that can help further improve the accessibility of web pages.
Examples:
role=“application”
, role=“banner”
, role=“complementary”
role=“contentinfo”
, role=“form”
, role=“main”
, role=“navigation”
, role=“search”
Use class
or id
.
id=“document-unique-name”
class=“name”
classs=“name anothername”
<note>
</note>
<element ... title="A sentence or two describing the element's content. Usually shown in a tooltip"> ... </element>
<!-- anything between these symbols is ignored by the browser -->