HTML Webpage Structure, Page 2
Release: 2010-06-10
Jump to Web Standards Articles TOC
Text-level Elements (Continued)
Element Name: strong.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
strong element is for important text. Multiple nested strong elements will provide stronger importance.
Element Name: small.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
The small element represents side comments or legal text or small print.
Element Name: span.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
For a generic Phrasing Content element you can use a span element. This element is good for applying style on text that needs a different appearance or audio styles than other text by using the style, class or id global attributes.
Element Name: hr.
Categories: Flow.
Default CSS Display: block.
Where it can be used: Where Flow Content is expected.
Content Model: Empty.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Thematic paragraph level breaks can be rendered by having a hr void element but some screen readers interpret Thematic Breaks as a long sequence of underscores. It is best to style the bottom border or top border of an element to provide a similar presentational effect.
Element Name: mark.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: No.
Element Name: time.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: pubdate (boolean), datetime, Global Attributes.
Element Part of Subset: No.
mark elements represent text to be highlighted or marked (Not supported in any web browser yet).
Also time elements represent dates and times. The datetime attribute provides an application readable version of the date, time or date and time in UTC form. The optional pubdate boolean attribute indicates that the date and time is a publication date and time. If it has a pubdate boolean attribute then it can be the publication date and time of an article element or for the whole document in general. (Element is not supported by any browser yet.)
Element Name: abbr.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes (title is special).
Element Part of Subset: Yes.
abbr elements may provide the expanded form in a title attribute and the abbreviated form within the element content. The first occurrence of the particular abbreviation on the webpage should have the expansion in the surrounding text rather than the title attribute. Subsequent occurrences, the expansion may be in the title attribute.
Element Name: dfn.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content without any dfn descendent elements.
Attributes: Global Attributes (title is special).
Element Part of Subset: Yes.
A dfn element provides a term (as element content or in a title attribute or a child abbr element's title attribute), with its definition in the surrounding text. This element is a singular version of the definition list.
Element Name: code.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Element Name: kbd.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
code elements represent text referring to parts of programming code such as from markup, styles, source code and kbd elements represent input from keyboards, keypads or touchpads.
Element Name: samp.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Element Name: var.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Element Name: cite.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Element Name: address.
Categories: Flow.
Default CSS Display: block.
Where it can be used: Where Flow Content is expected.
Content Model: Flow Content without any Heading Content, Sectioning Content, header, footer or address descendent elements.
Attributes: Global Attributes.
Element Part of Subset: Yes.
samp elements represent sample text, var elements are variable names and cite elements are citations. The address Flow content element represents contact information such as author, contributor or company email address', phone numbers and postal address'.
Element Name: del.
Categories: Flow, Phrasing (if only contains Phrasing Content).
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Transparent.
Attributes: cite, datetime, Global Attributes.
Element Part of Subset: Yes.
Element Name: ins.
Categories: Flow, Phrasing (if only contains Phrasing Content).
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Transparent.
Attributes: cite, datetime, Global Attributes.
Element Part of Subset: Yes.
Crossed out text can be marked up using the del element which puts a line through the text. The datetime has the date and time of the 'deletion' and can have a cite attribute having a URI to a citation. And the ins element inserts text and underlines that text. The datetime has the date and time of the 'insertion' and can also have a cite attribute having a URI to a citation.
Element Name: pre.
Categories: Flow.
Default CSS Display: block.
Where it can be used: Where Flow Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Element Names: sup, sub.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where they can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes.
Elements Part of Subset: Yes.
pre is a generic Flow Content element to preserve any spacing and by default has a simple font and can only have Phrasing Content within it.
sup element represents superscripted text and the sub element represents subscripted text.
Element Name: bdo.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: Global Attributes (dir is special).
Element Part of Subset: Yes.
Element Name: q.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Phrasing Content.
Attributes: cite, Global Attributes.
Element Part of Subset: Yes.
Element Name: blockquote.
Categories: Flow, Sectioning Root.
Default CSS Display: block.
Where it can be used: Where Flow Content is expected.
Content Model: Flow Content.
Attributes: cite, Global Attributes.
Element Part of Subset: Yes.
bdo elements overrides the Unicode bi-direction (bidi) to force text to be either left to right (ltr) or right to left (rtl) using the dir attribute.
q elements represents quoted text (Quotation marks are left to you to manually add but some browsers do automatically add them); a cite attribute can be used, having a URI to the source of the quote. And the blockquote element is a Flow Content element that pads the left and right of the paragraph like a quote paragraph and must only be used for such quote paragraphs.
Cascade StyleSheets are to be used for any further styling.
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Record Orb Sightings - News - NewsCorp</title>
</head>
<body>
<header>
<hgroup>
<h2><img src="images/mainlogo.png" width="100" height="50" alt="">NewsCorp®</h2>
<h3>Streaming all your news 24/7 since 2097</h3>
</hgroup>
<p><img src="adverts/wincheesecake2103.png" class="advertDimensions" alt="Win a year's supply of cheesecake."></p>
</header>
<nav>
<menu>
<li><img src="images/home.png" width="22" height="22" alt="">Home, </li>
<li><img src="images/news.png" width="22" height="22" alt="">News, </li>
<li><img src="images/comps.png" width="22" height="22" alt="">Competitions, </li>
<li><img src="images/staff.png" width="22" height="22" alt="">Staff </li>
</menu>
</nav>
<article>
<header>
<hgroup>
<h1>Record Orb Sightings</h1>
<h2>Spirits or Whitelighters</h2>
</hgroup>
<p><time pubdate datetime="2103-12-02T10:00+00:00">2<sup>nd</sup> December, 2103</time></p>
</header>
<section>
<h2>What are these floating clumps of light?</h2>
<p>
<img src="images/orb18382-28293.png" width="78" height="100" alt="" class="dropright">
Over the past few months there has been a dramatic increase in the number of orb sightings.
</p>
<p>Orbs are the first stage of a person or spirit materializing into our range of sight.</p>
</section>
<section>
<h2>Where and when?</h2>
<p>The major concentrations of orb activity include:</p>
<ul>
<li>York, United Kingdom,</li>
<li>San Diego, North America,</li>
<li>...</li>
</ul>
<p>Most sightings have taken place during the <time datetime="2103-06-21T01:00+01:00">Summer Solstice 1:00am</time> and <time datetime="2103-06-21T04:00+01:00">4:00am</time> as well as <time datetime="2103-10-31T23:00+00:00">Halloween 11:00pm</time> to <time datetime="2103-11-01T04:00+00:00">4:00am</time>.</p>
</section>
<!-- … -->
<footer>
<p>News Article by: San Droo
<address>
Email: san.droo@newscorp.example.com
</address>
</p>
</footer>
</article>
<aside>
<h2>Current Weather</h2>
<p>New New New London: 23 degrees, Sunny.</p>
</aside>
<footer>
<p><small>©2103, NewsCorp®. All rights reserved.</small></p>
<p><small>NewsCorp is a registered, limited...</small></p>
</footer>
</body>
</html>
Hyperlinks
Element Name: a.
Categories: Interactive, Flow, Phrasing (if only Phrasing Content within it).
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Transparent, but no Interactive Content.
Attributes: href, hreflang, media, ping, rel, target, type, Global Attributes.
Element Part of Subset: Yes.
Hyperlinks, or more commonly known as links, allows you to get from one webpage to another using the a element:
<a href="http://www.example.com/overthere.html">Activities over there</a>
<a href="help.html"><img src="images/help.png" width="22" height="22" alt="">Help System</a>
In older HTML and XHTML 1.0 there was an old fashioned way to identify a part of the document using only a name attribute on this element, but the name attribute for the a element has been dropped and this task has been allotted to the id attribute on any element. The a stands for anchor because of the old fashioned 'a name' feature.
As for getting you to other documents the href attribute's value is an URI (or IRI) to the other webpage, document or web application:
<a href="there.html">To go there</a>
<a href="there.html#here">Taking you here</a>
<a href="http://www.w3.org/html/wg/html5/" title="WHATWG / W3C spec">HTML 5</a>
You can have the title attribute to add extra popup information about where the link is going. a is by default a Phrasing Content element but can be a Flow Content element but in either case cannot have any Interactive Content within it.
To state that the link will be in a frame (see the Inline Frames subsection) you can add a target attribute to the a element. The value of target may be _blank or either be a string that does not start with an underscore (_) for opening in new tabs or windows or the value (still without a starting underscore) matches the value of a frame's id or name attribute to open within the frame. Or the target value could be _self to appear in the current frame, _parent or _top to replace the entire embedded frame and main document with the new webpage. If the link is to open in a new tab or window then the user must be informed of the fact (see the Web Accessibility article for more details).
Element Name: base.
Categories: Metadata.
Default CSS Display: not applicable.
Where it can be used: In the head element without any other base void elements.
Content Model: Empty.
Attributes: href, target, Global Attributes.
Element Part of Subset: Yes.
As you can have relative URIs in the href attribute, you can help the browser or whatever is displaying the webpage to construct absolute URIs by adding a base void element with a href attribute in the HTML 5 head element. The base element's href attribute value would have the absolute URI leading up to where your relative URI would start:
<base href="http://www.meexample.com/levels/overthere/">
<!-- ... -->
<a href="hereweare.html">go here</a>
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Record Orb Sightings - News - NewsCorp</title>
</head>
<body>
<header>
<hgroup>
<h2><img src="images/mainlogo.png" width="100" height="50" alt="">NewsCorp®</h2>
<h3>Streaming all your news 24/7 since 2097</h3>
</hgroup>
<p>
<a href="competitions/cheesecake2103.html"><img src="adverts/wincheesecake2103.png" class="advertDimensions" alt="Win a year's supply of cheesecake."></a>
</p>
</header>
<nav>
<menu>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="index.html">Home</a></li>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="news/">News</a></li>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="competitions/">Competitions</a></li>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="staff/">Staff</a></li>
</menu>
</nav>
<article>
<header>
<hgroup>
<h1>Record Orb Sightings</h1>
<h2>Spirits or Whitelighters</h2>
</hgroup>
<p><time pubdate datetime="2103-12-02T10:00+00:00">2<sup>nd</sup> December, 2103</time></p>
</header>
<section>
<h2>What are these floating clumps of light?</h2>
<p>
<img src="images/orb18382-28293.png" width="78" height="100" alt="" class="dropright">
Over the past few months there has been a dramatic increase in the number of orb sightings.
</p>
<p>Orbs are the first stage of a person or spirit materializing into our range of sight.</p>
</section>
<section>
<h2>Where and when?</h2>
<p>The major concentrations of orb activity include:</p>
<ul>
<li>York, United Kingdom,</li>
<li>San Diego, North America,</li>
<li>...</li>
</ul>
<p>Most sightings have taken place during the <time datetime="2103-06-21T01:00+01:00">Summer Solstice 1:00am</time> and <time datetime="2103-06-21T04:00+01:00">4:00am</time> as well as <time datetime="2103-10-31T23:00+00:00">Halloween 11:00pm</time> to <time datetime="2103-11-01T04:00+00:00">4:00am</time>.</p>
</section>
<!-- … -->
<footer>
<p>News Article by: <a href="staff/droo.san.html">San Droo</a>
<address>
Email: <a href="mailto:san.droo@newscorp.example.com">
san.droo@newscorp.example.com
</a>
</address>
</p>
</footer>
</article>
<aside>
<h2>Current Weather</h2>
<p>New New New London: 23 degrees, Sunny.</p>
</aside>
<footer>
<p><small>©2103, NewsCorp®. All rights reserved.</small></p>
<p><small>NewsCorp is a registered, limited...</small></p>
</footer>
</body>
</html>
Image Maps
Element Name: map.
Categories: Flow, Phrasing (when it only contains Phrasing Content).
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected.
Content Model: Transparent.
Attributes: name, Global Attributes.
Element Part of Subset: Yes.
Element Name: area.
Categories: Flow, Phrasing.
Default CSS Display: inline.
Where it can be used: Where Phrasing Content is expected and there is a map ancestor element.
Content Model: Empty.
Attributes: alt, coords, href, hreflang, media, ping, rel, shape, target, type, Global Attributes.
Element Part of Subset: Yes.
Rather than the whole image being used as an image link you can make it a client-side image map by adding a usemap attribute and defining a map by using a map element and more than one area void elements. The value of the image's usemap attribute must be a fragment URI referring to a map element's name attribute (most browsers support this) or id attribute (some browsers support this).
In the area void element the shape attribute dictates what shape of the region of the image is the link. Values can be rect, circle, poly or default to use the whole image. If using the shape="rect" then the value of the coords attribute, coordinates, would have for instance coords="0,0,25,25" stating the link is from absolute top-left of the image to 25 pixels across and down of the image. If shape="circle" then coords="15,15,5" would be a circular region where the center is 15 pixels across and down from the top-left of the image and the radius is 5 pixels. For shape="poly" the coords="2,2,4,4,11,11,13,11,5,17,2,8,2,2" would provide a polygon shaped region following those paired coordinates.
The href attribute provides the URI path for the area element's link. alt is required for alternative text of that part of the image.
<img src="mapped.png" usemap="#mapit" alt="A Client-side image map taking you here, there and everywhere">
<map id="mapit" name="mapit">
<area shape="rect" coords="0,0,5,5" href="here.html" alt="Going here">
<area shape="circle" coords="15,15,5" href="there.html" alt="Going there">
<area shape="poly" coords="32,32,34,34,41,41,43,41,35,37,32,38,32,32" href="everywhere.html" alt="Going everywhere">
</map>
It is recommended to have text links as an alternative to help in accessibility of the webpage.
For more complex image maps you can use server-side image maps simply by adding an ismap boolean attribute on the image (only if used as an image link) as:
<a href="herethereeverywhere.php"><img src="mapped.png" ismap alt="A Server-side image map taking you here, there and everywhere"></a>
For accessibility reasons client-side image maps are preferred against server-side image maps.
Document Relations and Metadata
Element Name: meta.
Categories: Metadata, Flow (if itemprop attribute is present).
Default CSS Display: not applicable.
Where it can be used: If has a charset attribute then the first child in the head element;
Or has an itemprop attribute then where Flow Content is expected;
Otherwise, generally, in the head element, in the noscript element within the head element or where Metadata Content is expected.
Content Model: Empty.
Attributes: charset, content, http-equiv, name, Global Attributes.
Element Part of Subset: Yes.
For various associated information for the webpage you use meta void elements.
For stating HTTP Header information you can use the http-equiv attribute with the HTTP Header name and the content attribute with value of that HTTP Header.
Using <meta name="description" content=""> together with the title element provides the main information for search engines. But don't forget to actually market the website - it's pointless creating a brochure and then just putting it on the table and expect people to come to collect the brochure themselves even if they have no idea it exists - and rankings can't be guaranteed (there may be 4,300 other websites marketing for the same thing!).
There was a Keywords version but due to mass keyword spamming, search engines no longer deal with the 'meta keywords' element.
Element Name: link.
Categories: Metadata, Flow (if an itemprop attribute is present).
Default CSS Display: not applicable.
Where it can be used: If an itemprop attribute is present then where Flow Content is expected;
Otherwise, generally, in the head element, in a noscript element in the head element and where Metadata Content is expected.
Content Model: Empty.
Attributes: href, hreflang, media, rel, sizes, type, Global Attributes (title is special).
Element Part of Subset: Yes.
Other files may be associated with your HTML 5 Document using the link void element. The rel attribute stands for relation; the type attribute states the content-type (MIME Media Type) of the relation; href provides the URI of the actual associated file and title provides an advisory information to be displayed in an application menu list or other. Such associations could be Cascade StyleSheets to use precise and natural layout and style to your document.
<link rel="stylesheet" type="text/css" href="styles/presentme.css" title="Main Styles">
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Record Orb Sightings - News - NewsCorp</title>
<link rel="stylesheet" type="text/css" href="styles/mainstyles.css" title="Main Styles">
<link rel="alternate" type="application/atom+xml" href="feeds/latest.atom" title="Latest News (Atom 1.0)">
</head>
<body>
<header>
<hgroup>
<h2><img src="images/mainlogo.png" width="100" height="50" alt="">NewsCorp®</h2>
<h3>Streaming all your news 24/7 since 2097</h3>
</hgroup>
<p>
<a href="competitions/cheesecake2103.html"><img src="adverts/wincheesecake2103.png" class="advertDimensions" alt="Win a year's supply of cheesecake."></a>
</p>
</header>
<nav>
<menu>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="index.html">Home</a></li>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="news/">News</a></li>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="competitions/">Competitions</a></li>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="staff/">Staff</a></li>
</menu>
</nav>
<article>
<header>
<hgroup>
<h1>Record Orb Sightings</h1>
<h2>Spirits or Whitelighters</h2>
</hgroup>
<p><time pubdate datetime="2103-12-02T10:00+00:00">2<sup>nd</sup> December, 2103</time></p>
</header>
<section>
<h2>What are these floating clumps of light?</h2>
<p>
<img src="images/orb18382-28293.png" width="78" height="100" alt="" class="dropright">
Over the past few months there has been a dramatic increase in the number of orb sightings.
</p>
<p>Orbs are the first stage of a person or spirit materializing into our range of sight.</p>
</section>
<section>
<h2>Where and when?</h2>
<p>The major concentrations of orb activity include:</p>
<ul>
<li>York, United Kingdom,</li>
<li>San Diego, North America,</li>
<li>...</li>
</ul>
<p>Most sightings have taken place during the <time datetime="2103-06-21T01:00+01:00">Summer Solstice 1:00am</time> and <time datetime="2103-06-21T04:00+01:00">4:00am</time> as well as <time datetime="2103-10-31T23:00+00:00">Halloween 11:00pm</time> to <time datetime="2103-11-01T04:00+00:00">4:00am</time>.</p>
</section>
<!-- … -->
<footer>
<p>News Article by: <a href="staff/droo.san.html">San Droo</a>
<address>
Email: <a href="mailto:san.droo@newscorp.example.com">san.droo@newscorp.example.com</a>
</address>
</p>
</footer>
</article>
<aside>
<h2>Current Weather</h2>
<p>New New New London: 23 degrees, Sunny.</p>
</aside>
<footer>
<p><small>©2103, NewsCorp®. All rights reserved.</small></p>
<p><small>NewsCorp is a registered, limited...</small></p>
</footer>
</body>
</html>
Icons
Most Core Level web browsers and some earlier web browsers support Icons, used in Bookmarks, Microsoft Favourites, Address/Location Bars and Tabs. They can be either a Microsoft Windows Icon (.ico) (supported on other platforms too) or another web image such as a Portable Network Graphic (.png). Microsoft Widnows Internet Explorer only supports Windows Icons.
Microsoft introduced the 'favicon' by having an icon in a favicon.ico file sitting in the domain root folder and all icon supporting browsers can download and use this icon. But using the link void element allows you to name the file anything you want and put it anywhere within the website and have per webpage icons. Microsoft's Internet Explorer only supports the per page version using the non-standard rel="shortcut icon" relation (and of course only works if referring to a .ico file). The rel attribute values are typically space separated list of terms but some terms are multiple words as explained later. All other icon supporting browsers have support for this 'shortcut icon' purely as an Internet Explorer compatibility feature.
The official way to relate a per page icon is to use rel="icon". All icon supporting browsers except Internet Explorer (at the moment) support rel="icon". After testing with multiple forms of icon referencing it seems the best way is a favicon for Internet Explorer and a standards Icon for everything else:
<!-- Icon: IE Compatibility: uses favicon -->
<!-- Icon: Standards -->
<link rel="icon" type="image/x-icon" href="icons/mywebpage.ico">
or
<!-- Icon: IE Compatibility: uses favicon -->
<!-- Icon: Standards -->
<link rel="icon" type="image/png" href="icons/mywebpage.png">
These Icons are usually 16 x 16 and either 16 to 256 colours (so 8-bit PNGs and .ico's will do). These days you can have true colour icons as 24-bit Windows Icons, Windows XP Icons or 24-bit or higher PNG images or Windows Vista icons.
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Record Orb Sightings - News - NewsCorp</title>
<link rel="stylesheet" type="text/css" href="styles/mainstyles.css" title="Main Styles">
<link rel="alternate" type="application/atom+xml" href="feeds/latest.atom" title="Latest News (Atom 1.0)">
<!-- Icon: IE Compatibility: uses favicon -->
<!-- Icon: Standards -->
<link rel="icon" type="image/png" href="icons/newscorp-icon.png">
</head>
<body>
<header>
<hgroup>
<h2><img src="images/mainlogo.png" width="100" height="50" alt="">NewsCorp®</h2>
<h3>Streaming all your news 24/7 since 2097</h3>
</hgroup>
<p>
<a href="competitions/cheesecake2103.html"><img src="adverts/wincheesecake2103.png" class="advertDimensions" alt="Win a year's supply of cheesecake."></a>
</p>
</header>
<nav>
<menu>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="index.html">Home</a></li>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="news/">News</a></li>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="competitions/">Competitions</a></li>
<li><img src="images/home.png" width="22" height="22" alt=""><a href="staff/">Staff</a></li>
</menu>
</nav>
<article>
<header>
<hgroup>
<h1>Record Orb Sightings</h1>
<h2>Spirits or Whitelighters</h2>
</hgroup>
<p><time pubdate datetime="2103-12-02T10:00+00:00">2<sup>nd</sup> December, 2103</time></p>
</header>
<section>
<h2>What are these floating clumps of light?</h2>
<p>
<img src="images/orb18382-28293.png" width="78" height="100" alt="" class="dropright">
Over the past few months there has been a dramatic increase in the number of orb sightings.
</p>
<p>Orbs are the first stage of a person or spirit materializing into our range of sight.</p>
</section>
<section>
<h2>Where and when?</h2>
<p>The major concentrations of orb activity include:</p>
<ul>
<li>York, United Kingdom,</li>
<li>San Diego, North America,</li>
<li>...</li>
</ul>
<p>Most sightings have taken place during the <time datetime="2103-06-21T01:00+01:00">Summer Solstice 1:00am</time> and <time datetime="2103-06-21T04:00+01:00">4:00am</time> as well as <time datetime="2103-10-31T23:00+00:00">Halloween 11:00pm</time> to <time datetime="2103-11-01T04:00+00:00">4:00am</time>.</p>
</section>
<!-- … -->
<footer>
<p>News Article by: <a href="staff/droo.san.html">San Droo</a>
<address>
Email: <a href="mailto:san.droo@newscorp.example.com">san.droo@newscorp.example.com</a>
</address>
</p>
</footer>
</article>
<aside>
<h2>Current Weather</h2>
<p>New New New London: 23 degrees, Sunny.</p>
</aside>
<footer>
<p><small>©2103, NewsCorp®. All rights reserved.</small></p>
<p><small>NewsCorp is a registered, limited...</small></p>
</footer>
</body>
</html>
Document Collections
A document collection or online book / multiple page article, associated information about the current page, etc can be linked together by relations using the rel attribute for link void elements and for a elements. Such rel attribute values include up, index, first, prev, next, help, author, search, last, license and alternate.
<a rel="first" href="http://www.legendscrolls.co.uk/webstandards/">Toc - Web Standards Articles</a>
<a rel="prev" href="html5subset.html">HTML 5 Subset</a>
<a rel="next" href="css.html">Present and Layout with CSS</a>
<a rel="last" href="wcom.html">Web Browsers and Packages</a>
<a rel="index" href="sitemap.html">Site Map</a>
<a rel="help" href="helpme.html">Help</a>
The alternate relation can be coupled with another term to imply an alternate form of the main relation such as rel="alternate stylesheet". Representing hierarchical relations can be done using the up term and usually the index term such as rel="up up index" stating the page is two levels above the current one. For more terms that are being proposed visit the RelExtensions Wiki.
In-Document Styles and Scripts
Element Name: style.
Categories: Metadata, Flow (if the scoped boolean attribute is present).
Default CSS Display: not applicable.
Where it can be used: If the scoped boolean attribute is present then where Flow Content is expected but before any other non-style Flow Content;
Otherwise in the head element, in the noscript element within the head element and where Metadata Content is expected.
Content Model: Depends on the StyleSheet type.
Attributes: media, type, scoped (boolean), Global Attributes (title is special).
Element Part of Subset: Yes.
Styles can be put 'in-document' within the style element within the head element. But as earlier web browsers may have not supported StyleSheets they may display the style code as text. So in HTML environments you must surround the style code in a Comment:
<style type="text/css"><!--
/* style code */
--></style>
It will hide the code but still process it.
For 'sectioning' elements, such as the section element, you may have zero or more 'scoped StyleSheets' using style elements with a scoped boolean attribute as the first child elements.
<section>
<style scoped type="text/css"><--
/* CSS code */
--></style>
<p>The section and its children will be styled.</p>
</section>
This 'scoped StyleSheet' is to provide local styling to the 'sectioning elements' and their child elements.
Current web browsers don't support the scoped boolean attribute so the styles will not be restricted to the particular 'sectioning element' but current web browsers do support the style element itself within div elements and other supported elements that can have Flow Content.
StyleSheets can, amongst other things, customize the ordered or unordered list markers:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
<ul>
<li>Item 4.1</li>
<li>Item 4.2</li>
<li>Item 4.3</li>
</ul>
</li>
</ul>
produces:
- Item 1
- Item 2
- Item 3
-
- Item 4.1
- Item 4.2
- Item 4.3
To get rid of unwanted item markers in lists you can add this style rule in an external StyleSheet, the internal StyleSheet or any scoped StyleSheet:
.noListMarker {
list-style-type: none;
list-style-image: none;
}
and add a class="noListMarker" attribute in the li start tag:
- Item 1
- Item 2
- Item 3
-
- Item 4.1
- Item 4.2
- Item 4.3
It is best to keep style separate in .css files and associate them with link void elements. For more details on Cascade StyleSheets see the CSS article.
Element Name: script.
Categories: Metadata, Flow, Phrasing.
Default CSS Display: not applicable or inline.
Where it can be used: Where Metadata Content is expected or Flow Content is expected.
Content Model: Depends on the script type.
Attributes: async (boolean), charset, defer (boolean), src, type, Global Attributes.
Element Part of Subset: Yes.
Scripting provides extra functionality in the web browser and can also be placed in the head element much like the style element but also in the general document body:
<script type="text/javascript"><!--
// script code
// -->
</script>
But as it is better to have the StyleSheet separate, it is also better to have the scripting separated and refer to it using the src attribute as:
<script type="text/javascript" src="dosomething.js"></script>
If the type attribute is not present for style or script elements then the default for style is text/css (Cascading StyleSheets) and the default for script is text/javascript (ECMAScript / JavaScript).
Element Name: noscript.
Categories: Metadata, Flow, Phrasing.
Default CSS Display: none if scripting enabled or inline if scripting is disabled.
Where it can be used: In the head element of a text/html document and there are no ancestor noscript elements or where Phrasing Content is expected in a text/html document and there are no ancestor noscript elements.
Content Model: If in the head element then one or more link void elements, style elements or meta void elements in any order;
If not in the head element then it is Transparent.
Attributes: Global Attributes.
Element Part of Subset: Yes.
Notes: This element is a waste of your time as you can put non-dynamic content in the normal flow of the document and use a script to adapt it or replace it with the dynamic content (Unobtrusive Scripting).
A noscript element may be used in the head element of text/html HTML 5 documents to provide style elements, link and meta void elements but not script and nested noscript elements for when scripting is disabled or not supported.
Scripting also maybe used within the document body too. You can have a noscript special Phrasing element somewhere near the script element in a text/html HTML 5 document for accessibility considerations or write your scripts as Unobtrusive Scripting.
The noscript element itself is a Phrasing Content element but only when not in the head element and scripting is disabled or not supported. It can only contain Phrasing Content if noscript is within Phrasing Content or can contain Flow Content (which includes Phrasing) if noscript is directly within Flow Content elements.
If scripting is supported and enabled then the noscript element and its contents are removed from the document object model. The static content within it should either provide the same information or describe what the dynamic function would provide.
<noscript>
<p>
An interactive list for choosing preferences. Feature requires JavaScript which is disabled or not supported.
</p>
</noscript>
A defer boolean attribute can be used on the script start tag to hold off processing the script code until the complete HTML 5 document has been loaded.
One thing to note in JavaScript is that the document.write() and document.writeln() methods do exist still but they don't work in all circumstances (especially not in XML environments). Instead you will have to use the HTML Document Object Model to manipulate the existing markup such as using DOM 5 HTML's innerHTML property (which is supported by all browsers these days).
A collection of 'events attributes' are also available for directly attaching script functions and small lines of script code to any element. Such as the onclick attribute on any element including form buttons. This is a device-dependant event - it requires a mouse click or something similar to activate the code that is in the attribute value. Other device-dependant events include ondblclick, onmousedown, onmouseup, onmouseover, onmouseout and onmousemove for activating the scripts when double clicking, part clicking, moving over or off the element or just generally moving the mouse around within the element. Plus onkeypress, onkeyup and onkeydown are device-dependent events requiring a keyboard action.
It is best to use device-independant events as this does not need a particular device for instance in case you are using a handheld device and do not have a mouse to use. If you need to use one of the device-dependent events then most information access ports have some sort of keyboard, keypad or touch-sensitive palette so the onkeypress, onkeyup and onkeydown can be used.
Device-independent events include onload and onunload mainly attached to body element or onsubmit and onreset attached to a form element. Focusing events can be handled on most elements by the onfocus and onblur attributes. onerror and onabort attributes provide error handling script actions mostly on images and internal frames.
Page 1, Page 2, Continue to Page 3, Page 4
Copyright ©2008-2010 Legend Scrolls and Peter Davison. All rights reserved.
