Content Tags and Styling in HTML 5 Markup

Although some of the most talked about tags coming in HTML 5 are the video, audio and canvas tags, there are many other new tags which primarily focus around content. One of the aims of HTML 5 is to remove styling from the HTML mark-up and ensure all styling is defined within the cascading style sheets where it belongs.

In the vast majority of today’s websites, if a program is required to pick out a particular part of a HTML page, such as the main article, the sidebar or the top navigation, it would have to be programmed to do so on a per website and web page basis. This is because every website structures its HTML differently, unless based on an underlying package with a consistent HTML foot print.

Most current websites therefore use a variety of <p>, <div> and <span> tags to surround their content. These tags define style and do not obviously determine whether the contained content is part of the website’s navigation system or whether it is the main article or focus of the web page. The new HTML 5 tags aim to change this by explicitly defining content.

Defining content with specific HTML 5 tags will make websites easier to parse by computer programs. This could benefit accessibility readers for the blind and allow content aggregating systems and ‘mash-up’ websites to easily parse, link to and cite your articles. Content aggregation and automation of web page content retrieval is quite fundamental to some of the newer Web 2.0 sites and social networks. Good examples being Facebook’s automatic retrieval of web page information when a link is entered into a status update, or Reddit’s automatic thumbnail generation based on images found within the linked web page.

Here is a listed on related HTML content tags, as available from the W3C Schools website.

  • <article> – Defines a main article on a page. Can include cite (citation) and pubdate (publishing date) attributes.
  • <details> – States content details for a specific section. Can include an open attribute defining whether or not the details within are visible to the end-user.
  • <figcaption> – States the caption for a figure as defined by the figure tag.
  • <figure> – Usually used to group a set of elements.
  • <footer> – Footer layout element. This is used to contain the footer content of the page, usually contains the website name, author and copyright information.
  • <header> – Header layout element. This tag is designed to contain the top header of a document, usually showing the website logo, page and/or company title and subtitle.
  • <hgroup> – A tag used to group together heading tags such as <h1>, <h2>, <h3> and so on.
  • <keygen> – A key generation tag which defines a generated (encryption) key that can be associated with a HTML form.
  • <meter> – The <meter> tag contains content which is deemed to be a measurement of some sort.
  • <nav> – The <nav> tags stands for navigation and is designed to surround navigation links, such as those present in a sidebar bar or navigational header/footer.
  • <summary> – The <summary> tag defines the title of a <details> element.
  • <time> – This tags contains content which is a statement or measurement of time and/or date/time.

Unfortunately, it is likely that HTML 5 content tags with not be adopted completely for quite some time and there will likely continued use of existing HTML mark up and related styling of <div> and <span> tags for quite some time.

Make a comment


You are more fortunate than 3 billion people…

I found this image whilst browsing Reddit, which I’ve come to do quite frequently. Although I can not vouch for its statistical accuracy, the likely truths behind it are quite fascinating.


Simple Explanation of Model View Controller (MVC)

Model view controller is a type of software architecture that is designed to separate the programming code that handles presentation, application logic and business logic. This makes systems using a model view controller architecture much simpler to maintain, as locating the code relevant to specific logic is significantly easier. Additionally, it makes expansion of systems much less complex, [...]


Work Motivation – Autonomy, Mastery & Purpose

I found this video by RSA Animate really interesting. It describes what motivates us to work and states how, for non-trivial tasks, higher monetary incentives tend to lead to worse performance. This behaviour is apparently not too anomalous and has been replicated in many locations and by many different professionals in fields such as economics, [...]


The Scale of Space or ‘You are Tiny’

I was recently shown this image of online, orginal source unknown, which shows just how small we really are in the vastness of space. Click the image to view it enlarged, on its own.


Mark Gasson ‘Cyborg’ catches a Computer Virus

Dr Mark Gasson, from the University of Reading has had a virus infected computer chip implanted in his arm. Tests proved this virus could spread to external control systems wirelessly. The BBC who initially reported this proof-of-concept ‘infection’ stated that Dr Gasson admitted that the test is only proof of concept but believe that there are [...]


Dennis Hong’s Awesome Robots

Dennis Hong, the founder and director of RoMeLa, a technology and robotics lab based in Virginia, gets straight in to discussion and video demonstrations of his robotic lab’s awesome robots in his talk below. The robots focus on various forms of robotic motion, such as walking, climbing and humanoid style. I really think some of [...]


How to uninstall default applications on Nokia N97

Although not all of the default applications on the Nokia N97 can be uninstalled, the following steps show you how to uninstall all the applications you are able to. Press the menu/applications button (bottom left of the phone). Tap ‘Settings’ Tap ‘Application mgr.’ (Application Manager) Tap ‘Installed apps.’ (Installed Applications) You will then be presented [...]


C:\fakepath\ in Internet Explorer 8

If you are trying to retrieve the ‘value’ of a file input box via Javascript, and you are receiving C:fakepath within the returned value, it is time to blame Internet Explorer 8. The inclusion of C:\fakepath\ is a security feature of Internet Explorer 8, designed to prevent information regarding the file system structure being exposed [...]


The Next iPhone ‘found lost in a bar’ by Gizmodo

Gizmodo, a blog well known for spreading hype about Apple products has apparently found ‘Apple’s next iPhone’. Here is a quote from the article Gizmodo recently posted. You are looking at Apple’s next iPhone. It was found lost in a bar in Redwood City, camouflaged to look like an iPhone 3GS. We got it. We disassembled [...]


Howdy! My name is Jordan Hall and you’ve reached my website for some reason. Hope you are enjoying it. If you want, I have a few more details about this website. If you are looking for a more professional overview and less general prose, take a look at my biography or my skill and experiences section.

Latest Project

A portfolio of sorts will appear here shortly listing some of the projects I've developed or those I'm currently working on.

For now, take a look at my projects page directly.

Latest Photographs

Some photograph previews will appear here at some point.

Please feel free to take a look at my photographs page.