Semantic Tags and the File API in HTML5

 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:

<video src=”myvideo.mp4″ controls> No video support in your browser </video>

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:

var blob1 = new Blob([“This is blob content”],
{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 Now  

About the Author:

Newton Godoy  

With over 17 years of in-class training experience and over 16 years of industry experience, Newton offers students a wealth of real-world technical knowledge and expertise in the areas of .NET application development, SQL Server and SharePoint Server. After spending several years lecturing as a professor, Newton found his true calling and began his career as a MCT. He worked as a technical trainer for some of Brazil’s and Australia’s largest corporate training organisations before finally finding a home with New Horizons where he is now one of our top trainers. Newton brings a thorough mentoring capability to the classroom where he can advise on technical issues and challenges often beyond the scope of the course curriculum. His combination of technical knowledge and instructor experience make him one of the most respected instructors within the IT training industry.

Read full bio
top