- HubPages»
- Technology»
- Computers & Software»
- Computer Science & Programming»
- Computer Programming Tutorials
A Web Tutorial Series: HTML 5 - An Introduction to New Features
Recap of the Previous Tutorial
In our last tutorial in this series, A Web Tutorial Series: Looking at More HTML Structures: Tables, Blocks, Forms & More!, we looked at tables, forms, and block structure. The notion of inline elements and blocks was touched on. We switch gears for a bit now and look at some of the new building blocks available through the use of a number of new element types. Most you will find are of the nature of blocks only two new element type discussed in this tutorial, <time> and <mark> are inline elements.
Goals for This Tutorial
HTML 5 is the current standard for HTML which was adopted in 2012. It was designed to supercede previous versions of HTML, XHTML, and HTML DOM.
HTML 5 added new elements, attributes and features for animation, graphics, music, and videos. It can also be used to build web applications. It is designed to work across multiple platforms: smartphones, smart television, PCs, and tablets.
It was specially designed to deliver rich content without the need for additional plugins. The current version delivers everything from animation to graphics, music to movies, and can also be used to build complicated web applications.
In this tutorial we will begin exploring HTML 5. Due to the extensive amount of change and added features subject is likely to span the next several tutorials in this series. We focus here on the new HTML 5 elements.
Some of the Design Goals of HTML5
Some of the stated design goals adopted by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) included:
- A reduction in the need for external plugins (e.g. "Flash")
- Better error handling
- Device independence
- A more extensive and robust markup language
Simplification of Markup
The most obvious change a developer will see with HTML 5 is a simplification of markup starting with the very first statement one writes for a web page, the <doctype>. All variants and additional definition strings have been replaced by the simple statement:
<!doctype html>
If fact the minimal outline for a document is simply:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Title</title>
</head>
<body>
Any relevant document content and appropriate HTML tags
</body>
</html>
HTML 5 New Features
Some of the features which we will be discussing in detail include:
- An element <canvas> which can be used for 2D drawing
- New form controls, such as: calendar, date, time, email, url, search
- Media playback has two new elements: <video> and <audio>
- New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> thereby reducing the reliance on <div> elements
- Support for local storage
HTML 5 Removed a Number of Elements
The following elements which had been deprecated were dropped from HTML 5:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
HTML 5 New Tags With Semantic Meaning
Prior to HTML 5 when a developer wanted to define a navigation section or a footer section, they had to resort to using divs (i.e. <div id="nav"> and <div id="footer">). HTML 5 has added new tags which are referred to as semantic tags to markup different sections of a document. HTML5 offers new semantic elements to clearly define different parts of a web page. The tags are:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figure>
- <figcaption>
- <footer>
- <details>
- <summary>
- <mark>
- <time>
The HTML5 <article> Semantic Element
The <article> tag specifies self-contained content. There is no specific styling defined for it except that it is defined to display as a block element. Some suggested uses of the <article> tag are news items, forum or blog postings,
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site, or independent commentary.
The HTML5 <aside> Semantic Element
The <aside> element defines some content which would normally be found in a sidebar in a document. The aside would be such that it would be placed to the right of the related content.
The HTML5 <details> Semantic Element
The <details> element was added for content which in its entirety may not always need to be visible. Our snapshot which follows demonstrates this for copyright information.
Example of Copyright Information Treated as Details
The HTML Figure Elements: <figure> and <figcaption>
These two elements go hand in hand. The <figure> tag is used to define the file location and properties of the illustration. The <figcaption> tags is used to provide a caption for the illustration.
Example of the Use of New Illustration Elements
The HTML5 <footer> Element
The <footer> element should contain information about its containing element such as: author information, copyright, and contact information. Footers can be associated with the document as a whole or document subsections as appropriate.
Good Use of a Footer Element
The HTML5 <header> Element
The <header> element tag specifies a header for a document or section. It should be use to contain any introductory statements or links which can be a distraction when placed directly in the page content. Multiple header sections are permitted in a document. Header many not be nested however nor can they occur in a <footer> section.
The HTML5 <mark> Element
The mark element by default looks like some had a yellow high lighting pen. The snapshot show the code for the <mark> element use, the output, and the results of lookiing at the code via "inspect element".
Highlighting Some Content
The HTML5 <nav> Element
The <nav> element tag defines a set of navigation links.
The <nav> element tag was introduced to segregate the navigation options on the principal navigition toolbar(s) for a site. It was not intended to encompass all navigation links, only the major block links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
The HTML5 <section> Element
The <section> element defines a section in a document. Sections generally have a common theme and are preceded by a heading element.
The HTML5 <summary> Element
The <summary> element tag is used in conjunction wiith the <details> tag. The <summary> information is always visible while the rest of the details may be hidden or viewed as desired. The <summary> tag should follow as the first child of the <details> tag.(See the details illustration above.)
The HTML5 <time> Element
The <time> tag defines either a time or date optionally with a time and a time-zone offset. Associating the text provided with the time allows programs to associate a human readable value (e.g. My Birthday) with a value inf a format better manipulated by a machine (e.g. datetime=07-29-2014).
Time Does Not Render With Any Special Code
Wrap Up and What's Next
We covered a number of new element types available with HTML 5. Most of the new elements are block elements. They were designed to surround content with specific semantic meaning with tags that reflect that meaning. This helps to reduce dependence on the <div> tags used in the past.
In our next tutorial we will look at changes to forms and new form input types.
