Magazine

HTML5 for journalists

This article is republished with the kind permission of the author Martin Belam. The original article can be found at www.currybet.net

I've contributed before to the debate about whether journalists need to be programmers, but whether or not you've ever wrestled with Ruby, PHP or Python, if you are involved in online publishing in any way you are almost certainly familiar with some HTML. Even if it is only by pressing buttons in your CMS, you'll know how to add mark-up like <a href="">, <strong>, <blockquote> and <em> to your articles.

Well, HTML is changing significantly for the first time in the best part of a decade, and you'll need to learn to at least recognise, if not use, some new tags.

HTML5 adds nearly thirty new tags to the language. Geeks, technologists and Apple are most excited about <canvas> and <video>, which promise to replace a lot of the functionality provided by browser plugins like Flash. As a journalist, though, you are much more likely to encounter some of the new tags which provide additional semantic mark-up to articles.


Page structure

Several of these new tags are devoted to marking up the information structure of pages, namely <header>, <nav>, <article> and <footer>. These are intended to replace the common habit of having code like <div id="header">, <div id="nav"> and <div id="content">, all of which you will see if you view the source of this page.

These types of tags will most likely be in the templates of your pages, and you won't need to bother with them too much. They may though, end up having a huge impact on the way web content is consumed. They are going to make it increasingly easier to deliver the same article content over multiple platforms, and in multiple formats, in the way that Safari 5's Reader mode, Instapaper or Phil Gyford's "Today's Paper" already strip articles to their bare bones to provide an 'enhanced' reading experience.


Article structure

As a journalist, web production person or sub-editor, where you may get more entangled with the new language is with tags like <section> and <aside>. The first of these, <section>, represents a slightly vague generic 'section' of an article, so that, for example, a single article that contained two or three different TV reviews or recipes can now have them individually surrounded by <section> tags.

The second tag, <aside>, is used to mark-up something tangentially related to the main body of text. In a news context, that might represent a factbox, some links to related stories, or a sidebar detailing the key points of a story's timeline.


Enhanced mark-up

Several new HTML5 tags are there to enhance the way that content is understood by machines, or is rendered by browsers and devices. All of which will ultimately result in a better user experience for humans. Examples of these that you may start coming across include:

<time>

The <time> tag involves including a more precise machine-readable version of a time when you mention it in an article, or when a 'published' date is included. We've already started using it at The Guardian. This tag will most likely be added in automatically by CMS systems that output HTML5, but you may find that interfaces start including an option to add a little more precision when you are writing 'yesterday' or 'on Friday'.

<details>

<details> is intended to provide a way of including extra content or information that can be optionally expanded or collapsed by the user. That might be something like additional information about an album release, or the opening times of an exhibition.

<figure>; & <figcaption>

HTML5 is going to allow mark-up to replicate the print feature of having an image, chart or diagram that sits in the main flow of content, but that is not actually part of the main article. These elements will be marked-up as a <figure>, with <figcaption> specifying, as it suggests, a caption to go with the image.

<mark>

In the same way that you can currently use <em> and <strong> within a paragraph to stress particular words, the new <mark> tag provides a way to highlight or signify text. Visually you can style it however you want, although a yellow highlighter pen effect seems to be the favourite so far, but the point is to allow you to distinguish portions of text.

<wbr>

<wbr> is a tag to insert when there is a 'word break opportunity', rather than an arbitrary line break as enforced by <br> or <br />. An example might be to suggest potential breaks in a long word like:

'Super<wbr>cali<wbr>fragi<wbr>listic<wbr>expiali<wbr>docious'

That will almost certainly have come out horribly on this website, but in the HTML5 world, your browser would, if necessary, have hyphenated the word beautifully at an appropriate point.



Find out more...

Here are a few other articles that might help you get to grips with the concept of HTML5:

• Lifehacker: How HTML5 Will Change the Way You Use the Web
  


• Teaching online journalism: Tips for HTML5
  


• A list apart: A preview of HTML5
  


• HTML5 gallery: A showcase of sites using HTML5 mark-up
  


• Is your browser ready for HTML5? (hint: if you are still stuck using corporate IE6, then no)
  

Tags:

Related articles

• Home |
• Seminars  |
• Events |
• Media Landscape |
• Newsroom|
• Media News|
• Resources

Terms of service and Privacy policy.

Copyright © 1992- 2011 European Journalism Centre. All rights reserved.

Valid XHTML and CSS.

European Journalism Centre

Sonneville-lunet 10
6221KT Maastricht
The Netherlands

Tel. : +31 43 325 40 30
Fax : +32 2 400 42 20

E-mail: info[at]ejc.net