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.
If you liked this post, you may be interested in these: