and
elements, and their combination:
can contain
elements, and an
can contain
elements. To describe this with an example: in your web page you could have a dashboard page with a
for social network interactions, and a
for the latest news articles which would contain several
elements. Conversely, an
might contain a
at the end for reader comments.
Q: Discuss how HTML5 simplified HTML structure. Provide examples.
For a start, HTML5 specification simplified doctype declaration. Doctype, or Document Type Declaration, tells the browser what type of document they can expect. The old XHTML doctype declaration was as follows:
<span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span>
While HTML4 Transitional doctype looks like this:
<span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"></span>
The new doctype declaration for HTML5 is very simple:
<span class="hljs-doctype"><!DOCTYPE html></span>
Another simplification that HTML5 introduced, is how we declare character encoding, or charset, of the document. The charset declaration in HTML5 is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=<span class="hljs-string">"UTF-8"</span>>
<span class="hljs-keyword">...</span>
</head>
<body>
<span class="hljs-keyword">...</span>
</body>
</html>
This is much simpler than previously in HTML4 which didn’t have charset meta attribute:
<!DOCTYPE HTML PUBLIC <span class="hljs-string">"-//W3C//DTD HTML 4.01 Transitional//EN"</span>
<span class="hljs-string">"http://www.w3.org/TR/html4/loose.dtd"</span>>
<html>
<head>
<meta http-equiv=<span class="hljs-string">"Content-Type"</span> content=<span class="hljs-string">"text/html; charset=utf-8"</span>>
<span class="hljs-keyword">...</span>
</head>
<body>
<span class="hljs-keyword">...</span>
</body>
</html>
HTML5 specification went so far in the simplification, that the tags
<span class="hljs-doctype"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>My title<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">header</span>></span>My header<span class="hljs-tag"></<span class="hljs-title">header</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Wall of text<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
The only important tag in this example to work is the new doctype for HTML5, without it the browser will not be able to detect that it is an HTML5 document.
Q: Explain why a cross-browser support is still important if all the modern browsers follow the same HTML5 specification.
HTML5 specifications is a set of rules that defines a valid document, and also provides instructions on how browsers must interpret and render such a document. Unfortunately, the reality is that no browser still supports all the rules defined by HTML5 specification. Most of the major browsers are supporting most of the specification, but there are still differences in browser interpretation of HTML5 specifications. As a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. This is why cross-browser support continues to be a headache for developers, despite the improved specifications.
Q: Discuss accessibility aspects of HTML5, especially its limitations and problems when used in real world.
Today, web pages and applications are used more and more, and making them accessible to people who rely upon assistive technology is becoming more important than before. HTML has gone a long way, and HTML5 introduced new user interface features which enable people who rely upon assistive technology to use the web more easily. Although, there are problems. One of the problems is that developers and designers previously didn’t pay too much attention to this aspect of their web pages or applications. In their defense, as mentioned, one of their main reasons was that the web prior HTML5 didn’t have any accessibility interface features. And now, even if developers want to implement additional accessibility options in their applications, there is a constant problem any new and emerging web technology is facing: browser support. HTML5 accessibility is keeping track of the most common accessibility features across browser. To implement accessibility features and to cover all the browsers, additional time investment is required from developers. This can be a key factor that clients need to anticipate if they want their web applications and pages to be on the edge of what is possible with technology today.
Q: Explain HTML5 Web Storage, discuss its security considerations, and the difference between localStorage and sessionStorage.
HTML5 enabled web pages to store data locally within the user’s browser with use of Web Storage. In earlier versions, developers could only use cookies. New Web Storage is more secure and faster. Unlike cookies, data from Web Storage is not included with every server request, it is used only when asked for. The data is stored as a name and value pairs. Other benefits over cookies is storage limit. Web storage can be up to 5MB big, and its content is never transferred to the server. A web page can only access data stored by itself because it is limited per origin.
It is important to note that while Web Storage is more secure than cookies, there are things to keep in mind. It is better than using cookies because the content is not transmitted over the wire, but local storage is not encrypted. For that reason, sensitive data like security tokens should never be stored there. Web application should never rely on data stored in Web Storage, as a malicious user can easily modify data in the localStorage and sessionStorage values at any time.
Speaking of sessionStorage, the difference between localStorage and sessionStorage involves the lifetime and scope of the storage. Data stored through localStorage is permanent: it does not expire and remains stored on the user’s computer until a web application deletes it, or the user asks the browser to delete it. On the other hand, sessionStorage has the same lifetime as the browser tab in which the script that stored it is running. When the tab is closed, any data stored through sessionStorage is deleted.
Unlike the origin limit of the localStorage, sessionStorage is window scoped. For example, if a user has two browser tabs displaying documents from the same origin, those two tabs have separate sessionStoragedata. The scripts running in one tab cannot read or overwrite the data written by scripts in the other tab, even if both tabs are visiting exactly the same page and are running exactly the same scripts.
Q: Explain what web workers are.
JavaScript is a single-threaded language, so multiple scripts cannot run at the same time. Web workers is a new API for running scripts in the browser background independently of other scripts, in its own thread. The result is that web pages don’t need to wait for web workers to complete, which improves performance and responsiveness, because users can interact with the page while the web worker is still running in the background. Web workers are, for example, perfect for long-running scripts that do heavy computation.
Wrap Up
We just scratched the surface of the knowledge needed to be a top HTML5 developer. Finding true masters of HTML5 is a challenge. We hope you find the questions presented in this post to be a useful foundation in your quest for the elite few among HTML5 developers. Finding such candidates is well worth the effort, as they will undoubtedly have a significant positive impact on your team’s productivity and results.
Read More at The Vital Guide to HTML5 Interviewing
