HTML5 Coding Essentials and Best Practices

The blog example, applying best practices

Let's go back to our blog example and see what can be improved:

Do we have a heading after each sectioning element?
Did we use sectioning elements or implicit sections?
Can we embed a table of contents?

The blog example is online and the HTML5 Outliner extension shows an "Untitled NAV":

Also note that in this example, we used H1s after each sectioning element, and we still get a hierarchy, some H1s are inside an <article> that is in a <section> (this corresponds to the third example given in the "heading and sectioning elements" part of the course):

<h1>Blog posts for April 2012</h1>

</header>

<h1><a href="">Information about this example</a></h1>

This example is a modified version of <a href="https://example.com/blog/index.html">https://example.com/blog/index.html</a>

</header>

...

</article>

</section>

With this technique, parts of the document can be moved more easily, or integrated inside an RSS stream, without the need to renumber the headings.

Beware that this technique will require you to use some CSS styling, and may confuse some screen readers that do not yet take into account this way of computing the heading hierarchy. A simple fix is to use an H1 right after the <body> and use only H2...H6 inside <section>, <article>, <nav> and <aside>.

Let's fix the missing heading

We need to add a heading in the <nav> element. This will both fix the outline of the document by removing the untitled entry, and will also make screen readers happy as they will better vocalize the structure of the page (it will say "entering nav" followed by the vocalization of the heading content).

<nav>

<h1>Navigation menu</h1>

</header>

<ul>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

</ul>

</nav>

A common remark from Web designers is: "we do not want a heading content displayed systematically after a <nav>, or an <aside> element..."

Embedding a table of contents and adding a <main> element

In the previous section, we saw how to embed a table of contents using some JavaScript code borrowed from the Google Chrome HTML5 outliner extension.

Let's add this piece of code (we removed the JS details from this extract):

<aside>

<h1>

<a href="javascript:(function(){...});"

title="TableOfContents">

Click here to display the table of contents!

</a>

</h1>

</aside>

We also added a <main> element to identify the main content of the page composed of the big section with all blog posts:

<main>

<h2>Blog posts for April 2012</h2>

</header>

...

</main>

Use H1 as top level headings only, use H2...H6 in sectioning content

As explained in the article HTML5 Document Outline, it is risky to use nested H1s, as browsers do not correctly implement the "outline algorithm".

The blog example uses nested H1’s. If you check it with the W3C conformance checker, it issues a warning: "Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools)."

So, while this is just a warning, we do prefer to use H1s only as top level elements, and replace the H1s we had after <section>, <article>, <nav> and <aside> elements respectively by a H2s and H3s.

Extract from source code:

<nav>

<h2>Navigation menu</h2>

</header>

...

</nav>

Finally, the fixed blog with embedded table of contents:

codepen.io/w3devcampus/pen/ZEeZNWY

HTML:

<!DOCTYPE html>

<html>

<head>

<title>Fixed blog example - Geraldine's blog</title>

</head>

<body>

<h1>Geraldine's <span>Blog</span></h1>

</header>

<nav>

<h2>Navigation menu</h2>

</header>

<ul>

<li><span>Articles</span></li>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

</ul>

</nav>

<h1>Blog posts for May 2020</h1>

</header>

<h1>Hide some heading: good practice</h1>

<p>This example shows how to hide the heading of the nav element above, while keeping it present in the table of content ?</p>

<p>It uses the CSS rule in order to hide the <h2>Navigation menu</h2> in the <nav>...</nav>:</p>

<pre>

nav header {

position: absolute !important;

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

clip: rect(1px, 1px, 1px, 1px);

padding:0 !important;

border:0 !important;

height: 1px !important;

width: 1px !important;

overflow: hidden;

}

</pre>

</article>

<h1><a href="">Information about this example</a></h1>

</header>

<p>Try to move the mouse on different elements. The structure will be highlighted and you will be able to see the different inclusions of elements one in each other. If you move the cursor to this sentence, it will be highlighted in dark grey, showing the presence of an <article> element, surrounded by a <section> element (light grey), etc. So we have some articles in a single section element. The page title at the top is a <header> element, while the tag cloud on the right is a <aside> element. The main menu on top (with Blog, About, Contact) is a <nav> element.</p>

Fig. 1 : an example of how new structuring elements could be used. This page put a <nav> on top, and does not have headers and footer for each article, like in this figure, but it could... By the way, this is a <figcaption> inside a <figure> element...

</figcaption>

</figure>

<h1><a href="">History</a></h1>

</header>

<p>Work on HTML 5 originally started in late 2003, as a proof of concept to show that it was possible to extend HTML 4's forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages. At this early stage, while the draft was already publicly available, and input was already being solicited from all sources, the specification was only under Opera Software's copyright.</p>

<p>In early 2004, some of the principles that underlie this effort, as well as an early draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla and Opera at a workshop discussing the future of Web Applications on the Web. The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web's evolution.</p>

<p>Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort. A public mailing list was created, and the drafts were moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specifications.</p>

<p>In 2006, the W3C expressed interest in the specification, and created a working group chartered to work with the WHATWG on the development of the HTML 5 specifications. The working group opened in 2007. Apple, Mozilla, and Opera allowed the W3C to publish the specifications under the W3C copyright, while keeping versions with the less restrictive license on the WHATWG site.</p>

<p>Since then, both groups have been working together.</p>

</article>

<h1><a href="">HTML vs XHTML</a></h1>

</header>

<p>This specification defines an abstract language for describing documents and applications, and some APIs for interacting with in-memory representations of resources that use this language.</p>

<p>The in-memory representation is known as DOM5 HTML , or the DOM for short.</p>

<p>There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are defined in this specification.</p>

<p>The first such concrete syntax is HTML5 . This is the format recommended for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with the MIME type text/html, then it will be processed as an HTML5 document by Web browsers.</p>

<p>The second concrete syntax uses XML, and is known as XHTML5 . When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an XHTML5 document. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent an XML document from being rendered fully, whereas they would be ignored in the HTML5 syntax.</p>

<p>The DOM5 HTML , HTML5 , and XHTML5 representations cannot all represent the same content. For example, namespaces cannot be represented using HTML5 , but they are supported in DOM5 HTML and XHTML5 . Similarly, documents that use the noscript feature can be represented using HTML5 , but cannot be represented with XHTML5 and DOM5 HTML . Comments that contain the string -> can be represented in DOM5 HTML but not in HTML5 and XHTML5 . And so forth.</p>

</article>

</section>

<aside>

<h1>Tag cloud</h1>

<li><a href="" rel="tag" class="w8">apple</a></li>

<li><a href="" rel="tag" class="w6">firefox</a></li>

<li><a href="" rel="tag" class="w8">google</a></li>

<li><a href="" rel="tag" class="w2">internet explorer</a></li>

<li><a href="" rel="tag" class="w6">iphone</a></li>

<li><a href="" rel="tag" class="w5">javascript</a></li>

<li><a href="" rel="tag" class="w1">jquery</a></li>

<li><a href="" rel="tag" class="w4">opera</a></li>

<li><a href="" rel="tag" class="w3">windows</a></li>

<li><a href="" rel="tag" class="w2">yahoo</a></li>

<li><a href="" rel="tag" class="w7">youtube</a></li>

</ul>

</aside>

</footer>

</body>

</html>

css:

html {

font-size:100.01%;

}

/* reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,hr,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfont,thead,tr,th,td{padding:0;margin:0;border:none;outline:none;vertical-align:baseline;font-family:inherit;font-size:100%;}dfn,i,cite,var,address,em{font-style:normal;}th,b,strong,h1,h2,h3,h4,h5,h6{font-weight:normal;}textarea,input,select{font-family:inherit;font-size:1em;}blockquote,q{quotes:none;}q:before,q:after,blockquote:before,blockquote:after{content:'';content:none;}ol,ul{list-style:none;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;}:focus{outline:none;}

html, body {

height:100%;

}

body {

font: .8125em/1.5 Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;

background: #fff;

color: #333;

}

header,

nav,

section,

article,

aside,

footer {

display: block

}

a {

color: #267;

text-decoration: underline

}

a:hover {

color: #722

}

p {

margin: 0 0 1em

}

header {

color: #007e99;

font-size: 2.5em;

padding: 20px 50px

}

header span {

color: #722

}

nav {

font-size: 1.5em;

margin: 5px 0;

padding: 20px 50px

}

nav li {

display: inline;

margin: 0 15px

}

nav li:first-child {

margin-left: 0

}

nav span,

nav a {

padding: 3px 15px 4px

}

nav span {

background: #722;

color: #fff

}

nav header {

position: absolute !important;

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

clip: rect(1px, 1px, 1px, 1px);

padding:0 !important;

border:0 !important;

height: 1px !important;

width: 1px !important;

overflow: hidden;

}

section {

float: left;

padding: 35px 0;

position: relative;

width: 70%

}

section article {

margin: 0 50px 40px;

padding: 25px 0 0;

position: relative

}

section header {

font-size: 1em;

padding: 0;

}

section h1 {

font-size: 2.3em;

}

aside {

float: right;

padding: 70px 0 30px;

position: relative;

width: 25%

}

aside h1 {

color: #888;

font-size: 1.8em

}

aside .tag-cloud {

padding: 15px 35px 10px 0;

text-align: center

}

aside .tag-cloud li {

display: inline

}

aside .tag-cloud a {

color: #69a

}

aside .tag-cloud a:hover {

color: #a67

}

aside .tag-cloud .w1 {

font-size: .8em

}

aside .tag-cloud .w2 {

font-size: 1em

}

aside .tag-cloud .w3 {

font-size: 1.1em

}

aside .tag-cloud .w4 {

font-size: 1.2em

}

aside .tag-cloud .w5 {

font-size: 1.3em

}

aside .tag-cloud .w6 {

font-size: 1.4em

}

aside .tag-cloud .w7 {

font-size: 1.5em

}

aside .tag-cloud .w8 {

font-size: 1.6em

}

aside .tag-cloud .w9 {

font-size: 1.8em

}

aside .tag-cloud .w10 {

font-size: 2em

}

figcaption {

font-style:italic;

font-size: 0.8em;

width: 100%

}

footer {

clear: both;

color: #777;

padding: 10px 50px

}

header:hover,

nav:hover,

section:hover,

aside:hover,

footer:hover {

background: #eee

}

article:hover {

background: #ccc

}

article header:hover {

background: #ccc

}

Page updated

Google Sites

Report abuse