Sep 28, 2016
HTML5 introduces new elements such as section, article, header, footer, nav, aside, figure, etc. to define the semantic structure of a web page. They are commonly referred to as the semantic tags. Using semantic tags can help give a clear meaning to the different parts of a document.
The <section> represents a thematic grouping of content. The <article> represents self-contained content, typically starting with a <header> element. A web page could have several articles organised by sections. Content that complements an article but are not considered an integral part of the article should go into an <aside>. Use the <nav> for a block of navigation links. Copyright information, links to contact information, terms of use, etc. are well fitted in a <footer> element.
Before HTML5 you would probably rely on the class attribute to achieve the same goal. So stop using things like <div class=”footer”>. All those new sematic tags will typically be used in CSS selectors to specify how they will be formatted for a particular document.
Another nice feature of HTML5 is that now it allows the browser to play media without a dependency on plug-ins like Adobe Flash or Microsoft Silverlight. You simply use the video tag specifying what the source for the video is:
The controls attribute will render the video playback buttons. So you can start/pause/stop and forward/reverse your video. The content inside the video tag only gets rendered if there is no support for the video element in the browser. You could place an <object> tag in there and fall back to Flash in such cases. There are a few other attributes you can use with the video element, like for example autoplay (starts automatically) and loop (repeats forever). There is an API for you to control programmatically the video element. There is also an <audio> tag with similar usage.
Maybe the most exciting new feature in HTML5 for developers are the new APIs and among those APIs the HTML5 File API is high on the rank of usefulness. The File API has four key interfaces. Let’s take a quick look at them.
The Blob interface represents immutable raw binary data. It has a slice() method that returns a specified portion of the data.
The File interface represents an individual file and it includes readonly informational attributes about a file such as its name and the date of the last modification (on disk) of the file.
The FileList interface represents a collection of File objects. You typically use this interface by handling the change event of an input of type file in your web page.
The last interface is the FileReader which provides methods for reading a File or Blob. The readAsText() method makes the content available as plain text. It is typically used when reading text files. The readAsDataURL() makes the content of a Blob or File available as data URL. It is typically used to read image files. The readAsArrayBuffer() makes the content available as an ArrayBuffer. The FileReader interface also defines a fair number of events, like onloadstart, onprogress, onload, onloadend, etc.
The following code snipped shows how to create a blob and retrieve data from it using a FileReader:
{type : “text/plain”});
var reader = new FileReader();
reader.addEventListener(“loadend”, function(e) {
document.getElementById(“result”).innerHTML = e.srcElement.result;
});
reader.readAsText(blob1.slice(1,5));
The slice taken from the Blob will be displayed inside a div element called result.
For a complete coverage of the File API and many others I recommend the course 20480 : Programming in HTML5 with JavaScript and CSS3.
How do your Excel skills stack up?
Test NowNext up:
- Using PowerShell to upload files to your Azure Storage Container
- Put your Photoshop skills into practice
- The importance of acknowledgement
- Decisions made easily with Excel
- Frame fun in InDesign
- How to be positive and enthusiastic at work after a long weekend!
- Nintex: Submit a form to a different page
- An introduction to PRINCE2® Agile
- Why we all need Emotional Intelligence
- “How was the training?”…“Yeah good thanks, now what’s for lunch?”
Previously
- Using PowerShell to upload files to your Azure Storage Container
- Lightroom vs. Photoshop’s Camera Raw
- The importance of a break-even point in budgeting
- How-to: Put SharePoint calendars into Outlook
- Unleash creativity in the workplace
- How to get the most out of Outlook
- Tools and methods for identifying learning and development needs
- Create cascaded dropdowns in Nintex forms
- Story-Telling leads to Story-Selling: From Content to Insights to Revenue (Infographic)
- Convert imagination into art with Adobe Capture