This is an old revision of the document!
Table of Contents
~~SLIDESHOW~~
Basic HTML Structure
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.
Basic HTML Structure
The document template
<!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.
- The
lang
attribute defines the principle language of the document (hereen
means English). - The
DOCTYPE
puts current generation browsers into standards mode. - The declaration of the
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>
Creating a Title
Each HTML page must have a title
element.
<head> <title>Antoni Gaudí - Introduction</title> </head>
- The
title
content should be short and descriptive. - The
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>
Headings and the document outline
Creating Headings
<body> <h1>Antoni Gaudí</h1> <h2 lang="es">La Casa Milà</h2> <h2 lang="es">La Sagrada Família</h2> </body>
<note>
- HTML provides for up to six levels of headings in your web page.
- Think of headers as hierarchical dividers. Use them consistently.
- The only official rule about headers is that the higher the level the more prominently should they be displayed.
- You can use styles to format headers with a particular font, size or colour.
- You can use
lang
to tell your browser that the contained text is different from the main body text. Here Spanish.
</note>
Organising your web page with headings
- In the body section type
<hn>
, wheren
is a number from 1 to 6, depending on the level of importance that you want to create. - Type the contents of the header.
- Type
</hn>
wheren
is the same number used in step 1
See example (don't forget to view source)
<note>
Importance h1
is the most important, h6
is the least important.
</note>
<note tip>
- Your
h1-h6
are especially important because of their impact on your page's outline. By default, browsers display headings progressively smaller moving fromh1
toh6
. - Don't forget to choose the heading number based only on the structure of the document, not how you want the headings to appear. You can and should use style-sheets to control that.
- This makes the web page stronger semantically and is also better for search engine optimization (SEO) and accessibility.
- Search engines weigh your headings heavily, particularly the likes of
h1
(which you shouldn't try to exploit by making all headingsh1
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>
Understanding HTML5's Document Outline
- Each HTML document has an underlying outline (like a table of contents) as defined by the heading elements
- It is not explicitly shown but is meaningful to search engines and screen readers
- In HTML and XHTML the
h1-h6
elements were all you had to define this structure - HTML5 introduces four sectioning content elements—
article
,aside
,nav
andsection
—that demarcate distinct sections in the document and define the scope of theh1-h6
(as well as theheader
andfooter
) 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>
HTML5 Outlines: Examples
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):
- Outlining using headings only: outline1.html
- Outlining using sections (h1 everywhere): outline2.html
- Without the sections: outline3.html
- Outline with content wrapped in an article: outline4.html
- As recommended today (using both sectioning elements and
h1-h6
}} to define structure: outline5.html
Syndicating Content
- Each sectioning algorithm –
article
,aside
,nav
, andsection
has its own outline that may begin withh1
and continue throughh6
. - This allows your content to appear on other pages, even other sites, without spoiling the parent document's outline.
- Its outline remains intact too.
- This allows syndication via RSS feeds, news aggregation sites, bologs, twitter feeds, etc.
Example (view in the outliner tool)
<note> Checking the code with the HTML5 outliner you see this:
- News from around the web
- Local Teen Prefers Vinyl Over Digital
- Hooked after First Album
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>
Grouping Headings
- Sometimes a heading has multiple consecutive levels, such as with headline, subheadings, alternative titles or tag lines.
- Grouping them in an
hgroup
shows they are related.
<note>
- Only the first instance of the highest-ranked heading on an
hgroup
appears in the document outline - All the headings are shown by the browser
</note>
Structural elements
Common page constructs
A Common arrangement
Creating a header
<header> : </header>