HTML5 Tutorial: tags & attributes 3

Tags & Semantics

In the articles "New tags & semantics" part 1, part 2, we have seen quite a number of new HTML5 elements passing by, all of which related to markup text. In this article we discuss the latest HTML5 text markup elements, which have not yet been addressed.

<aside>

In the article "New tags & semantics 1" we already introduced this element which is mainly used for the preparation of sidebars, or for content that side has to do sideways with the main content and is considered to be separated from the content. The element can be used for typographical effects like quotes or sidebars, for advertising, for groups of navigational elements and other content that is not directly connected with the main content.

 

aside
Image 1. The <aside> element.

Check this example in your browser

<details>

The <details> element is a cute element, a pity that it has not been implemented in all browsers. It generates a simple no-JavaScript widget to show/hide element contents, optionally by clicking on its child <summary> element (a script that you can find on http://gist.github.com/370590 mimics the intended effect).

<details>  
  <summary>Video details</summary>  
    <p>Video recorded on
	   <time datetime=2013-26-12>Xmas 2013</time> 
      with a  Sony.
    </p>  
    <p>
      <small>Copyright Stefan Spoilberg</small>.   
    </p> 
</details>

The content of the descendent <summary> element can be focused and serves as the control which, when activated, collapses the rest of the content with the video details. <details> has an optional open attribute to open when loading the page element: <details open>.

<figure> and <figcaption> elements

In HTML4 there are hardly semantic capabilities for linking a caption to an image. The standard way for clarifying a picture or image was placing a short description beside, above or below the picture: obvious to the human eye but not to machines (computers). For that reason HTML5 introduced the <figure> element. The <figure> element is wrapped around the entirety of image (or video, or code block) and its caption (which is in the <figcaption> element), so that the whole forms a unity of elements that belong together: photo and caption.

<figure > 
<img src="donkey.jpg"  alt="Donkey programmer"> 
<!-- no alt, because it has been replaced by figcaption --> 
	<figcaption >
     A donkey does not stumble twice on the same stone.
This one does. Even three times! <small >Photo &copy; Big donkey</small> </figcaption> </figure>


Image 2: The <figcaption> element replaces the caption for the image.

Note that <figcaption> may contain only "phrasing content" and no block-level elements.

Check this example in your browser

<mark>

The <mark> element is HTML5 equivalent of the marker that provides your sentences or words of a color bar. It's not the same as emphasizing, for whichyou use the <em> element, but if you want to bring a piece of tex into the foreground then you can do so with the <mark> element, and styling it, for example, with italics ,or with a green background like you get with a marker (see Image 3).

The HTML5 specification say about <mark> : "when used in a piece of prose from a document, it indicates that it is highlighted in connection with the current activities of the user". For example, the background color of a word in a text that the user just entered as the search term in the "Search" field. It would not be right to wrap these words in a <em> or <strong> element because it is not the intention to emphasize them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The mark element</title>
</head>
<style>
mark{
    background-color:#6F0;
}
</style>
<body>
Lorem ipsum dolor sit amet, consectetuer <mark>adipiscing</mark> elit. 
Duis ligula lorem, consequat eget, tristique nec, auctor quis, 
<mark>adipiscing</mark>. Vivamus ut sem. Fusce aliquam nunc vitae purus. 
Aenean viverra malesuada <mark>adipiscing</mark>. Fusce ac quam. Donec 
neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan 
aliquam, <mark>adipiscing</mark> 
dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque. Id arcu non sem placerat iaculis. <mark>adipiscing</mark> posuere, pede vitae lacinia accumsan, enim nibh <mark>adipiscing</mark> orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices <mark>adipiscing</mark>, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, <mark>adipiscing</mark>r eu, fringilla at, lacinia ut, augue. Nullam nunc.
</body> </html>
het mark element
Image 3. The <mark> element in action.

Check this example in your browser

<ruby>

Ruby is an element that is used for HTML markup in Asian languages. In an article by Davis 'The HTML5 <ruby> element in words of one syllable or less' is described how the element works in connection with the Japanese language. Since the element is hardly used in the Western world, we will leave it at that.

Leave a comment