Once again, it should be pointed out at the beginning of the tutorial that you should not expect anything miraculous from the elements presented. Visually, they don't really make much of an impression. However, they are interesting because you can use them to structure your documents logically and semantically.
Navigation areas
The nav element can be used to semantically mark navigation bars or other areas for additional elements. This element is mainly intended to mark hyperlinks to other pages or additional information.
An example:
<nav> <a href="index.html">Home page</a> <a href="html5.html">Learn HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
You can use any elements within nav. You can still define the navigation using lists. However, other elements can also be used within nav without any problems. nav can also appear several times within a document.
Specifying details
Another interesting element is details. You can use it - as the element name suggests - to specify additional information about the content. Please note that the details element only becomes really interesting in conjunction with the summary element. More about this element below.
First an example of the use of details:
<article> <details> <summary>References to the article...</summary> <ul> <li><a href="verweise1.html">Link 1</a></li> <li><a href="verweise2.html">Link 2</a></li> <li><a href="links3.html">Link 3</a></li> </ul> </details> <details> <summary>Source information for the article ...</summary> <ul> <li><a href="quelle1.html">Link 4</a></li> <li><a href="quelle2.html">link 5</a></li> <li><a href="quelle3.html"">link 6</a></li> </ul> </details> </article>.
The content of the details element is hidden from the visitor until they click on the summary element contained within details.
This could be interesting in connection with a video player, for example. Here is another example:
<video id="film" width="320" height="180" autoplay> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video> <details open> <summary>Hide/show video player controls</summary> <p> <button id="start" onClick="start()">Start/Pause</button> <button id="mute" onClick="mute()">Mute</button> <button id="louder" onClick="louder()">Louder</button> <button id="quieter" onClick="quieter()">Quieter</button> </p> </details>
When the page is called up, initially only the player window is visible.
However, if a visitor clicks on the show and hide link, the content defined within summary is displayed.
According to the specification, browsers should display standard content if no summary element is found.
The open attribute for details is also interesting.
<details open> ... </details>
If this attribute is set, the content of the summary element can be seen directly when the page is loaded.
Summaries
Now let's take another detailed look at the summary element.
<article> <details> <summary>References to the article...</summary> <ul> <li><a href="verweise1.html">Link 1</a></li> <li><a href="verweise2.html">Link 2</a></li> <li><a href="links3.html">Link 3</a></li> </ul> </details> <details> <summary>Source information for the article ...</summary> <ul> <li><a href="quelle1.html">Link 4</a></li> <li><a href="quelle2.html">link 5</a></li> <li><a href="quelle3.html"">link 6</a></li> </ul> </details> </article>
Within summary, the content that has not yet been opened is defined in conjunction with details. Thanks to summary, additional information can be included that is only displayed when required.
Admittedly, you could of course also easily implement expandable and collapsible areas using JavaScript. However, if JavaScript is deactivated in the browser, the application will not work. For this reason, broad support for details and summary is desirable in the near future.
Marginal areas and marginalia
Additional information, marginalia, cross-references etc. can be marked up in HTML5 with the aside element. Although the content marked in this way is in the context of the overall document, it is not directly associated with it.
Please note that the HTML5 specification does not specify which dimension should apply to an area marked via aside. This means that the aside content could be displayed as a margin, for example, but also as a sidebar.
The following example shows the definition of an aside area.
<body> <header> <h1>PSD-Tutorials.de</h1> </header> <article> <h2>Creating web apps (part 10): jQuery mobile (2)</h2> <p>In this tutorial, the first real jQM page is created. The prerequisite for this is the basic HTML framework that you have already learned.</p> <aside> <h3>Further information</h3> <ul> <li><a href="#/fn1">Further information is available...</a></li> </ul> </aside> </article> <aside> <nav> <h2>Navigation</h2> <ul> <li><a href="#">Home page</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </aside> </body>
Add time information
Time information can be specially marked up using the new time element. The special feature of this element is that the time information can be read by humans and machines.
For humans, the time information is written in the time element. To give browsers the chance to read the time information as well, the datetime attribute of the time element is used.
<p>We will meet on <time datetime="2014-04-15 19:00">April 15 at 7 p.m.</time>. </p>
At this point, we would like to point out once again that this has no visual effect in current browsers, but is only intended to make time information machine-readable.
Highlighting texts
With the mark element, it is possible to visually highlight words or entire text passages. The HTML5 specification explicitly states that the element should only be used in conjunction with textual content. It must also have a specific relationship to the context.
An example:
<p>In this tutorial, the first real jQM page is created. The prerequisite for this is the <mark>HTML basic framework</mark>, which you have already learned about.</p>
How the browsers implement highlighting is not fixed.
However, Google Chrome and Firefox both use a yellow background.
Highlight dialogs
The separate highlighting of dialogs has also been considered in HTML5. The dialog element is available for this purpose. However, the dialog element is currently only supported by Safari and Google Canary, i.e. the developer version of the browser.
Here is another example:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;"> <p>This is the content of the box.</p> <button id="hide">Close</button> </dialog> <button id="show">Show the content</button> </div> <script type="text/JavaScript"> (function() { var dialog = document.getElementById('dialog'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })(); </script>
As soon as the button is clicked, the dialog is displayed. To make the whole thing work, the previous example uses a combination of HTML5, CSS and JavaScript.
