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
<!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.
<meta charset=“utf-8” />tells the browser that all the text in this document are extracted from the 8-bit UTF character set.
<note> * The
html elements are compulsory in HTML5.
langattribute defines the principle language of the document (here
DOCTYPEputs current generation browsers into standards mode.
DOCTYPEtells validators which specification to compare your code against.
DOCTYPEoriginates in another language called SGML. It is always typed in upper case.
Each HTML page must have a
titlecontent should be short and descriptive.
titleelement 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>
langto tell your browser that the contained text is different from the main body text. Here Spanish.
nis a number from 1 to 6, depending on the level of importance that you want to create.
nis the same number used in step 1
See example (don't forget to view source)
h1 is the most important,
h6 is the least important.
h1-h6are especially important because of their impact on your page's outline. By default, browsers display headings progressively smaller moving from
h1(which you shouldn't try to exploit by making all headings
h1because 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-h6elements were all you had to define this structure
section—that demarcate distinct sections in the document and define the scope of the
h1-h6(as well as the
footer) elements within them.
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.
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.
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):
sectionhas its own outline that may begin with
h1and continue through
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
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.
hgroupshows they are related.
hgroupappears in the document outline
<header> : </header>
<header> : <nav role="navigation"> : </nav> </header>
articleelement 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.
sectionelement 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?
section(but see Generic containers later)
For tangentially related sections of content that could stand on its own is marked up using the
asides are often rendered by CSS by removing them from the amin body and moving them to a side column.
div element can be used for this purpose.
<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=“nav”>, etc can still be observed in many “legacy” web sites that are not marked up in HTMl5.
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.
<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 -->