The launch of HTML5 on 28th October 2014 was a much-applauded and welcomed development in the internet and finally put the nail in the coffin of XHTML2. A host of new elements and attributes had been promised with html5 and it certainly did deliver.

The new elements and attributes listed below are all developments of html5. I have neglected to describe the new markup which isn't supported by any of the major browsers because I'm keen only to show what is possible now. For futurologists, you can see some of these new-but-not-supported attributes at HTML Goodies.

<header>

The header element represents a container for introductory content at the head of a document or section of a document.

Example

This example shows how to markup html for the top section of an article:

<article>
<header>
<h1>Most important</h1>
<h3>Less important heading or subheading here</h3>
<p>Some additional information here</p>
</header>
<p>Main body text of the article...
...</p>
</article>

 

Most important

Less important heading or subheading here

Some additional information here

Main body text of the article... Once again I teeter at the precipice of the generational gap. Sarcastic? Unfeeling? British? We'll have to call it early quantum state phenomenon. Only way to fit 5000 species of mammal on the same boat. But I haven't spent any money! I was all... dead and frugal. We attack the mayor with hummus. Stay with me. Forever.

`

<article>

`

<main>

`

<section>

`

<aside>

`

<time>

Here's the international standard for date and time format.

ISO date: YYYY-MM-DDThh:mm:ss

The new html5 <time> tag is a little more flexible than the IS, but remember, parsers are fond of standards. It's all about burying the stricter date-time format inside a more human-friendly term. <time> gives us:

<time class="dtstart" datetime="2004-03-13">
March 13th, 2004
</time>

The time element can be used for times, dates or combinations of both.

<time datetime="22:00">10pm</time>
<time datetime="2010-10-21">October 21st</time>
<time datetime="2010-10-21T22:00">10pm on October 21st</time>

You can also refer to named dates.

<time datetime="2016-12-21T10:44">Winter Solstice</time>
<time datetime="2016-10-31">Samhain</time>
<time datetime="2017-02-14">Valentine's Day</time>

You don’t have to put the datetime value inside the datetime attribute—but if you don’t, then you may expose the value to the end user, so that they would see on their screens, something like this:

<time>2017-02-14<time>

`

<mark>

The mark tag is intended to denote text that is particularly relevant.

This tag is similar to the <strong> and <em> tags but instead of denoting the importance or emphasis of what lies within it's brackets, it denotes the 'relevance' of it's contents. It may be difficult to distinguish between these; I think of the mark tag as being rather like a highlighter pen. The example text below contains numerous mark tags - with strong and em tags too for compaison.

Example

Alice tried to fancy to herself what such an extraordinary ways of living would be like, but it puzzled her too much, so she went on: ‘But why did they live at the bottom of a well?’ ‘Take some more tea,’ the March Hare said to Alice, very earnestly. ‘I’ve had nothing yet,’ Alice replied in an offended tone, ‘so I can’t take more.’ ‘You mean you can’t take LESS,’ said the Hatter: ‘it’s very easy to take MORE than nothing.’ ‘Nobody asked YOUR opinion,’ said Alice. ‘Who’s making personal remarks now?’ the Hatter asked triumphantly. Alice did not quite know what to say to this: so she helped herself to some tea and bread-and-butter, and then turned to the Dormouse, and repeated her question. ‘Why did they live at the bottom of a well?’ The Dormouse again took a minute or two to think about it, and then said, ‘It was a treacle-well.

contenteditable

This attribute is applied globally amongst all elements, with a few exceptions. The attribute indicates whether or not the user can edit the element and change its markup. Values for contenteditable are true, false or inherit.

Any of the elements below with the contenteditable attribute set to them will have a orange-grey outline & overlay as you hover over. Feel free to edit and change their contents.

Example


It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I'll look first,’ she said, ‘and see whether it's marked “poison” or not’; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree with you, sooner or later.

Edit the following Lists:

An Ordered List

  1. English Literature
  2. Maths
  3. Physics
  4. French Language
  5. Geography
  6. Technical Drawing

An Unordered List

  • Sleeping Bag
  • Tent
  • Torch
  • Water Carrier
  • Tin Opener
  • Map
Refresh to clear changes. Refresh