Getting High Fives with HTML5
June 1, 2016
The source code of the Internet has always been a loosely interpreted language, with each browser having their own take on how web pages should be rendered for users.
The latest version of HTML is a huge improvement because it normalizes ideas that developers want to write once and work across all browsers.
HTML5 is a generational leap in making the web a better place. It subsumes different variations of syntax into one single standard, introduces many new elements and improves the source code to be more human readable. Unfortunately, a lot of these changes are much needed revisions on old implementations and are not entirely reverse compatible.
Legacy, out-of-date browsers are the most detrimental to the Internet. Since browsers have been around, there have been security holes and exploits in browsers. Not only does running an older browser put your machine and personal data at risk, but web pages will appear ‘broken’ or featureless unless there are fallbacks in place which are expensive to implement.
The era of HTML4 was ruled by Internet Explorer. Browser market share varies depending on the source, but the consensus is that IE now controls less than 50 percent, and its share is steadily declining. HTML5 was released in a time when browsers like Chrome, Firefox and Opera push out quicker updates and reduce the window during which users are behind technologically.
Finally, Markup designed for semantics
The new version of the HTML specification brings a plethora of elements which makes code easier to read and browsers easier to interface. An easy way to tell if you are viewing an HTML5 page is to view the source and look at the very first line for the document declaration. An old declaration will look something like:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
This long string of text would tell browsers and website validators the type of syntax in which the page was supposed to be written. With the new HTML5 specification, which eliminates the need for different specifications, all you should see is:
That’s all that is needed to define the document as the latest spec. Other new tags such as <main>, <header>, <footer>, <content>, and <aside> don’t produce visually different elements but instead give pages a richer semantic structure which makes it easier for search engines to distinguish content and navigational elements.
New APIs for smarter pages
Flash is a tremendous burden on internet users: it’s resource intensive, expensive and difficult to create and has been the target of countless security exploits. It has been kept on life support because of its perceived simplicity in playing audio and video files. Now we have the <video> and <audio> tags, which play hardware accelerated media in as little as one line of code without the need for any plugins.
Consumer hardware is far more powerful than it was 15 years ago, and many presentation elements are being shifted from servers back to the user’s machine. The <canvas> element allows for simple, bitmap based manipulation of 2D elements to be done on the fly. A user could add text or even draw on an image without desktop editing software.
Scalabe Vector Graphics (SVGs) are also enjoying increasing support. Instead of saving an icon or logo as a bitmap image (which is better suited for larger images, photographs), it can be exported into a file which contains the maths that make up the icon. The SVG file can be embedded inside the HTML document itself, which greatly improves page speed by reducing the number of requests it has to make.
Web storage is the likely successor to cookies since it offers a better API, 1,000 times more data capacity per entry and allows web applications to manipulate user specific information all in the browser without needed to have a connection. It means web applications can use your browser as a temporary or semi-permanent database, perfect for offline use.
With great markup comes great stylesheets
HTML5 brings desired improvements to the structure of web pages by unifying the various hacks and underdeveloped ideas. This alone doesn’t make beautiful and user-friendly pages. Cascading style sheets, now in its third version (CSS3), separates content and design on web pages.
Other changes that have been introduced include 3D transformations, keyframe animation, storing images as data and fancy text decoration techniques such as shadows and borders. These new CSS declarations are great for developers because it means fewer lines of code which are easy to maintain, and great for users because nicer effects are produced from fewer computational resources.
Making a good thing better