If you are going to an interview and want to make sure you covered everything, this article is perfect for you. It will clear any uncertainties you may have on various aspects of HTML5 and other related technologies.
What are the main differences between HTML and HTML5?
HTML stands for Hypertext Markup Language and it is used for formatting and organizing data in a webpage’s user interface in different web browsers. HTML5 is the fifth and last version to date of HTML where all modern web browsers support it. HTML5 has many enhanced APIs and many tags have been added while others are deprecated giving web developers the possibility to get better results easier.
Let’s take a look at the main differences of HTML and HTML5:
- HTML did not support audio and video without the use of a flash player. Making it more complicated to implement. With HTML5 by using simple tags <audio> and <video> implementations of a video or audio is much easier.
- JavaScript was not allowed to work in the background when using HTML on the other hand with the use of HTML5 JavaScript can be run in the background with the use of the JS web worker API that was introduced with HTML5.
- Drag and drop is not possible in HTML while in HTML5 this feature is possible
- HTML works with old browsers while HTML5 is supported in Chrome, Firefox, Internet Explorer and Safari
- HTML is not mobile friendly while with HTML5 it is much easier to work on a mobile website.
- Elements commonly used in HTML5 are <nav>, <header>, <footer>, <output> are not present in HTML’s other versions.
- Geolocation is nearly impossible to implement with HTML while with HTML5 Geolocation is very much possible using the JS GeoLocation API.
- HTML cannot handle inappropriate syntax while HTML5 can accept such syntax.
- Doctype declaration is long and complicated in HTML while with HTML5 it is declared by simply using <!DOCTYPE html>
Apart from these main differences as mentioned earlier HTML5 has a number of added tags that HTML does not have. Here is a list of these tags:
- <article> used to write a blog
- <aside> content which has nothing to do with the rest of the page
- <audio> for an audio file
- <canvas> used to input bitmap graphics like graphs
- <command> command that a user can call
- <datalist> new list attribute
- <details> information which a user can access
- <embed> external content or plugin
- <figure> self-contained flow content
- <footer> in information at the bottom of a webpage like copyright text
- <header> information at the top of a webpage
- <keygen> control of key pair generation
- <hgroup> the header of a section
- <nav> its content represent navigation
- <mark> text marked for reference
- <meter> contains measurements
- <output> output from a calculations
- <progress> a task is taking place such as download
- <ruby> allow ruby annotations
- <section> a document section
- <video> a video file
- <time> contains date and time
- <wbr> a line break
What is the key difference between HTML Elements and Tags?
HTML5 makes use of these tags continuously throughout all the entire HTML pages. HTML tags are in fact tags that HTML5 uses to organize the entire data in a website. Every HTML tags start with a ‘<’ and end with a ‘>’ example of these are <p>, <br>, <input> and <header>
These HTML5 tags usually hold an HTML element. These HTML elements are the content that is found between the tags and it is what is displayed in a website. For example if we have this:
<p> This is a text </p>“This is a text” is the element and <p> </p> are HTML tags.
Describe what are the New Media Elements tags in HTML5?
As already mentioned HTML did not support audio and video tags and to make such feature work, flash players had to be used. With HTML5 there is no need for a flash player because of the existence of new media tags.
Here is a list of these new media tags in HTML5:
- <audio> used to add a sound or music file in a website
- <video> used to add a video to a website
- <source> used to define the resource of an audio and video
- <embed> creates a container to hold an image, video or plug-in application
- <track> used to insert text such as sub titles in a video which is playing
Examples of how these media tags are used are the following:
First we have an example of a video tag, source tag and track tag
<video width=”400” height=”350” controls>
<source src=”animals.mp4” type=”video/mp4”>
<source src=”animals.ogg” type=”video/ogg”>
<track src=”subtitles.vtt” kind=”subtitles” srclang=”en” label=”English”>
</video>The following is an audio example where source tag is also used:
<audio controls>
<source src=”cat.ogg” type=”audio/ogg”>
<source src=”cat.mp3” type=”audio/mpeg”>
</audio>And here is an example how to use embed tag:
<embed type”text/html” src=”pic.html” width=”500” height=”300”>What are web workers ?
Web worker is a JavaScript API that runs in the background of a webpage without affecting its performance. Without this API when some process happens in a webpage, the user has to wait for the process to finish to continue using the website.
There are two types of web workers
- Dedicated web workers are only accessible by the script that called it. Data is sent through a message system being sent from one side to another with the help of postMessage() method and messages are answered through onmessage() method.
- Shared web workers on the other hand are accessible by more than one script. These scripts can be accessed by different windows, iframes or workers itself. However, communication in shared web workers between a thread to another happens through a port object. This means that a port has to be opened on the scripts being used to allow communication.
What is HTML5 Web Storage? Explain the difference between localStorage and sessionStorage
HTML5 web storage is a storage in the browser where web applications can store data in it. This storage was first introduced with the release of HTML5 and before this, data was always stored in cookies which were included with every server request. Web storage stores data within the same domain and protocol, therefore all pages within the same website can have access to the same data.
I can say that web storage is a wonderful invention because of its advantages. Unlike cookies, web storage can store large amounts of data in the browser (around 10MB per domain) without affecting the performance of the web application. All information stored in never passed to the server.
Web storage has two types of objects for storing data:
- Local storage stores data that is not lost when the browser window is closed. This is called like this: window.localStorage
This is an example how to store data in a local storage:
localStorage.setItem(‘name’, ‘John’);
This is an example how to get data from local storage:
localStorage.getItem(‘name’);
- Session storage stores data for one session and when the browser is closed, data will be lost. This is called like this: window.sessionStorage
This is an example how to store data in a local storage:
sessionStorage.setItem(‘name’, ‘John’);
This is an example how to get data from local storage:
sessionStorage.getItem(‘name’);
What is the Geolocation API and how do you use it?
In particular applications like for example a GPS or features where information on places in the area is required the user’s location is essential. The Geolocation API gets the geographical position of the user. This is only done with the approval of the user so the privacy of the individual is assured.
Here are some basic steps to use geolocation API to retrieve user’s location:
- Add ‘geolocation’ in the manifest.
- “navigator.geolocation” is used to access the API. This makes the browser ask the user to approve his/her location.
- To retrieve the user’s location ‘Geolocation.getCurrentPosition()’ is used.
- Geolocation.watchPosition() is a handler function used to register a new position every time the position is changed.
Describe the difference between <svg> and <canvas>
SVG stands for Scalable Vector Graphics. Is a language used for 2D graphics in XML which supports images and animations.
Canvas is an element in HTML. The purpose of the canvas is to draw graphics in a rectangular area with the help of JavaScript.
Here is a list of differences between svg and canvas:
- SVG has much better scalability than canvas therefore SVG is used to print an image in a high resolution.
- SVG can be edited in both script and CSS while canvas can only be edited in the script itself.
- SVG is a vector based and made of shapes, canvas on the other hand is based and made of pixeles.
- SVG is used with a large surface or smaller number of objects while canvas is used with a small surface or large number of objects.
What are the advantages of using HTML5?
Using HTML5 has many advantages over other versions of HTML. Let’s mention some of the important advantages of this version:
- HTML5 code is much cleaner as it allows you to write descriptive and semantic code in a cleaner way. Also the developer can separate the style from the code.
- HTML5 caters more for web applications on mobiles than any other HTML version. Making mobile websites much more user friendly no matter which device is being used.
- Cross browser compatibility is one of the major advantages of HTML5. HTML5 is supported by all important browsers like Internet Explorer, Safar, Firefox and Google Chrome.
- Audio and video features can be much easier to develop by using new <audio> and <video> tags.
- Allows the use of geolocation API to be used.
- Gives an alternative for cookies, as with HTML5 web storage as introduced where larger data can be stored in the browser making it much easier to access.
- New <canvas> tag can be used to develop games in an easier way.
- Much better user interface as with introduction of new tags and APIs allows the developer to achieve better results.
What is the differences between the font size units em and rem?
When using font size particularly with CSS ‘px’ is a very common to use. However ‘px’ does not scale when the user changes the browser’s resolution and ‘em’ or ‘rem’ will be required to appropriately scale the fonts in a webpage.
When using the ‘em’ unit the computed pixel value comes from the font size of the element being styled also taking into consideration the inheritance of that element. em unit is commonly used to scale line-height of menu’s items, paddings and margins.
‘Rem’ units are equal to the computed value of the font-size on the root element. That means that 1rem equals the font size of the html element.
What is Web SQL?
Web SQL database is an API that allows a web page to store and manage data. Web SQL does not form part of HTML5 specifications however, it coordinates other APIs to manage the client-side database. Web SQL is supported by the latest versions of Chrome, Opera and Safari browsers.
Because of the APIs lack of independent implementation the W3C web applications concluded that web SQL cannot be a W3C recommendation. Meanwhile because of these issues Mozilla Corporation designed another alternative storage to web SQL which is the indexedDB API.
Web SQL has three main methods which are:
- Open Database – That creates a new database. If the database already exists it opens it.
- Transaction – This method controls the transaction. Either commit it or rollback.
- Execute SQL – This method executes the SQL query being passed.
An example of how these three methods are used is shown below:
Var database = openDatabase(‘databaseName’, 2.0, ‘myDB’, ‘2*1024*1024’);
database.transaction(function (db){
db.executeSql(‘CREATE TABLE IF NOT EXISTS MYDB(id, log)’);
});
When opening or creating a database you pass the database name, the database version number, a description name and the size of the database. In the command executeSql we are creating a table which will be named as ‘MYDB’.
What is Canvas in HTML5? How to write a Canvas?
Canvas is an HTML element which is used to draw graphics using JavaScript. This Canvas is like a container where graphics, photos or any other animation can be drawn inside it.
Here is an example how to create a canvas:
<canvas id="canvas1" width="400" height="200"> </canvas>What are Server-Sent Events in HTML5?
Server-Sent Events (SSE) is an API which is part of HTML5 standardization by W3C. Server-Sent Events permits a web page to get immediate updates from a server without the need for the web page to ask for any updates. This API works only one way from client to server and never vice versa. Some examples of websites that use this technology is of course Facebook, Instagram or any other social media, news feeds or sports results where content needs to be updated instantly.
Before the invasion of Server-Sent Events updates were not given from the server automatically but the webpage would have to ask for these updates, making the website extremely slow. Below there is an example how to use such API and get updates from a server.
var page = new EventSource(“myPage.php”);
page.onmessage = function (e) {
}Every time an update happens in “myPage.php”, “onmessage” event occurs.
What is Microdata in HTML5?
Microdata is a standardization of HTML5. It provides additional semantics in a web page. Microdata elements can be customized and custom properties can be inserted in a web page.
Microdata makes use of five attributes:
- itemscope: Announce that it’s the start of Microdata on the page. It is mainly used to create an item.
- itemType: It is a URL which defines the item.
- itemId: the id of the item
- itemProp: defines the property of the item
- itemRef: Gives a list of additional elements to find the name-value of an item
Here is an example of how this Microdata and its attributes are used:
<div itemscope>
My birthday is
<time itemprop=”birthday” datetime=”5-2-1989”>
5th Feb 1989
</time>
</div> The printed result would be “My birthday is 5th Feb 1989”.
What is Web Forms 2.0?
Web Forms 2.0 is an upgrade of the forms features in HTML4.01. This extension applies to both HTML and XHTML. Web forms 2.0 consists of new input fields, new attributes, new DOM interfaces, new DOM events for validations as well as XML submission and initialization of forms.
Here is a list of some new input attributes for HTML5:
- Placeholder: <input id=”name” placeholder=”please enter your name”/> the placeholder will appear as a watermark in the input field.
- Autofocus: <input id=”name” type=”text” autofocus/> this textbox will be given automatic focus as soon as the page is loaded.
- Required: <input id=”name” type=”text” required/> this input field cannot be left empty.
- DataList: The input field will open into a menu to choose from the list of these people added in a dataList:
<dataList id=”people”>
<option value=”Jane”>
<option value=”John”>
<option value=”Mary”>
<option value=”Peter”>
</dataList>New Input types for Web Forms 2.0:
- Search: <input id=”mySearch” type=”search”/> input field will look like an appropriate search field.
- Email: <input id=”email” type=”email”/> validates the e-mail and it makes sure a proper email address is inputted
- URL: <input id=”url” type=”url”/> validates the URL to make sure that a URL is entered.
- Phone: <input id=”phone” type=”tel”/> validates the field to make sure that a telephone number has been entered.
- Number: <input id=”age” type=”number” value=”0”/> In this input only numbers are allowed to be inputted and the default value when the page is loaded will be zero until the user inputs a different number.
- Date: <input id=”dob” type=”date” value=”1989-02-05”/> This field when clicked a calendar will pop up to choose a date from it. If you indicate a date in the value the calendar will open on that date by default.
- Color: <input id=”txtColor” type=”color”/> When clicked on this input field the color chart will pop up to make the user chose the exact color.
- Range: <input id=”range” type=”range”/> a slider will be displayed for the user to choose a number from the range provided.
How do you use the following semantic elements <article> <footer> <header> <section>
With the introduction of HTML5, new elements were introduced such as <article>, <footer>, <header> and <section>. We will go through each one of these newly semantic elements.
- <article>: is an independent self-contained content. It is mainly used to separate text.
- <footer>: footer is the bottom part of a document or website. It usually contains copyright information, contact information or author information.
- <header>: is typically the top content of a website where it can contain a logo or icon.
- <section> used to divide information in a website.
What is <!DOCTYPE>? Name the DOCTYPE types available in HTML5.
The DOCTYPE declaration defines the HTML that will be used in the page. In fact this declaration is always at the start of the HTML code and all HTML documents must have it. This DOCTYPE is also used by the browser running the HTML code. Based on the type of document, The browser decides how to render the page. In HTML5 the declaration is as follows:
<!DOCTYPE html>
However, when HTML4 the declaration isn’t that short. This also implies XHTML1.1. Where their respective DOCTYPE are the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">How do you implement drag-and-drop functionality in HTML5
Drag and Drop (DnD) API is a very important feature to make websites much more user friendly. It makes it easy to copy and reorder items only with a click of a mouse button. Also this feature is easily achieved thanks to HTML5. In HTML4 implementing a drag and drop feature was not as easy and complex JavaScript was required.
Below there is an example of how to drag and drop an item from one div to another div:
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var image= event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(image));
}The HTML needed to use the above functions:
<div id="container1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img.png" draggable="true" ondragstart="drag(event)">
</div>
<div id="container2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>How do you add the autocomplete feature in HTML5
The autocomplete feature in HTML5 is used to display the whole word when only the initials has been written. It was introduced with the release of HTML5 and we can say that it is a very convenient feature especially when there are lots of input fields to be filled. Many websites use this popular feature nowadays like Gmail, Facebook, Google and any other websites most commonly where registration or login is needed.
Being very convenient this feature also has its disadvantages as sometimes we don’t want the website to save our details. This can be because we are logging from an internet cafe or another computer which is not ours. Therefore it is very important to disable this feature which can be done adding an attribute in the input field. We will take a look at how to implement an autocomplete feature.
<form autocomplete="on">
<label>Name:</label>
<input type="text" id="name">
<label>Date of Birth:</label>
<input type="date" id="dob">
<label>Email:</label>
<input type=”email” id=”email autocomplete=”off”>
<input type=”submit”>
</form>In this example we have three input fields, their autocomplete is switched on as in the forms the autocomplete is enabled. However, the email’s field is switched off from the input field itself.
