Hyper Text Markup Language, better known simply as HTML, is the standard language used for building websites. Like everything else in the tech world, HTML has evolved immensely since its inception in the late 1980s. Those who are new to coding should familiarize themselves with its latest incarnation - HTML5. But having a thorough understanding of the language’s evolution can give both budding and veteran coders some perspective on the past, present, and future of web development.
The Basics of HTML#
HTML code instructs web browsers how to render content. It explains the underlying structure of a web page. For decades, HTML has been considered a cornerstone technology of the World Wide Web along with Cascading Style Sheets, or CSS, and JavaScript. Standards for both HTML and CSS are maintained by The World Wide Web Consortium.
As its name implies, HTML isn’t technically a programming language; it’s a markup language used to organize data from the Internet. HTML documents are composed of HTML elements represented by tags, which are written inside angle brackets, to categorize content. An example of the HTML structure to display a simple “Hello World” message would look like this:
<html>
<body>
<p>Hello World</p>
</body>
</html>
HTML documents delivered from web servers let the browser know how to present text in addition to embedding links, images and interactive forms.
The History of HTML#
Rather than rendering older versions obsolete, each new version of HTML has focused on making Internet technology more accessible to everyone. For example, in addition to introducing new options for creating templates, HTML4 improved accommodations for visually impaired Internet users.
The last major overhaul of HTML during the late 1990s was a major collaborative effort by global experts to internationalize the language and make it easier for coders across the world to collaborate. As a part of this effort, the Universal Coded Character Set was adopted as the official HTML character set. This move allowed browsers to better represent the many characters and accentuations present in human languages and dialects.
As a result, we now have better archive indexing for more accurate web searches in addition to top-quality typography. With the introduction of HTML4, web designers also gained more control over the speed and order of content rendering.
HTML vs HTML5: The Evolution of Web Development#
The Internet is a very different place than it was in 1999 when the last major update, HTML4.01, was implemented. Technologies exist today that we couldn’t have imagined before the turn of the century. Smartphones, tablets and other mobile devices have introduced new challenges to engineers and software developers. Increased globalization has made the standardization of Internet technology a top priority for everyone with a stake in the world economy. Internet usage worldwide continues to grow year after year and the technology used is projected to evolve at an increasingly faster rate.
Therefore, HTML5 was implemented to start addressing these issues to provide a smoother and more consistent experience for web users and developers.
HTML5 is the result of a collaboration between the World Wide Web Consortium, or W3C, and the Web Hypertext Application Technology Working Group, or WHATWG. The organizations teamed up in 2006 to reduce reliance on plugins, improve error handling and replace scripting with more markups. Consequently, HTML5 has greatly simplified the process of creating web applications.
Thanks to HTML5, web pages can now store data locally on the user’s browser, which eliminates the need for HTTP cookies. As a result, content can be delivered faster and more securely. HTML5 has also made it easier to ensure consistency across all browsers. Since browsers have traditionally relied upon different plugins to play multimedia files, native support of video and audio allows developers to avoid compatibility issues. New attributes also allow for video controls including play, pause, and volume options.
Gradual Implementation#
Because HTML4 was the standard for about 15 years, many coders still use it, and all browsers will continue supporting it for a very long time. Likewise, older browsers can “overlook” new HTML5 code while rendering content. Virtually all modern browsers including Chrome, Firefox, Mozilla, Opera and Safari now all support HTML5 specifications fairly well. Because HTML5 is constantly evolving, browsers are incrementally introducing support for new features. Fortunately, all of the major browsers have been consistently adding support for features as they are released.
You can use HTML5test to run a test with your current browser to see what it scores in terms of HTML5 support.
There’s no need for most developers to overhaul their old webpages; however, anyone with a future in website creation should learn to take advantage of the many benefits of HTML5 vs HTML.
HTML vs HTML5: What’s New?#
If HTML was fine for over a decade, why was it updated in 2014? The most significant difference between older versions of HTML vs HTML5 is the integration of video and audio into the language’s specifications. Additionally, HTML5 includes the following updates:
- Deprecated elements like center, font, and strike have been dropped
- Improved parsing rules allow for more flexible parsing and compatibility
- New elements including video, time, nav, section, progress, meter, aside and canvas
- New input attributes including email, URL, dates and times
- New attributes including charset, async and ping
- New APIs that offer offline caching, drag-and-drop support and more
- Support for vector graphics without the aid of programs like Silverlight or Flash
- Support for MathML to allow better display of mathematical notations
- JavaScript can now run in the background thanks to the JS Web worker API
- Global attributes such as tabindex, repeat and id can be can be applied for all elements
Additionally, the image below provides a quick overview of HTML5’s major features broken down by category.
What Are the Advantages of HTML5 vs HTML for Web Users?#
Now that we’ve covered the technical side, what are the advantages of HTML5 for regular web surfers? Here are some benefits you may or may not have noticed since developers started using HTML5:
- Some data can be stored on the user’s device, which means apps can continue working properly without an Internet connection.
- Web pages can display more fonts with a wider array of colors, shadows, and other effects.
- Objects on the page can move in response to the user’s cursor movements.
- Interactive media, such as games, can run in web browsers without the need for extra software or plugins. Audio and video playback also no longer require additional plugins.
- Browsers can display interactive 3D graphics using the computer’s own graphics processor.
By limiting the need for external plugins, HTML5 allows for faster delivery of more dynamic content.
What Are the Advantages of HTML5 vs HTML for Web Developers?#
A major focus of HTML5 was to give developers more flexibility, which in turn would lead to more engaging user experiences. HTML5 was conceived with several goals in mind:
1. Consistent Error Handling#
All browsers have parsers for handling syntactically or structurally improper HTML code, or “tag soup.” However, until recently, there was no written standard for this process.
Therefore, new browser vendors had to test malformed HTML documents in other browsers so
that they could create an error handling process through reverse-engineering.
Malformed HTML is an unavoidable fact of life; according to Rebuildingtheweb, about 90 percent of webpages are estimated to contain some improper code, so error handling is vital for properly displaying websites. Consequently, codified error handling can save browser developers a lot of time and money.The benefits of a clearly defined parsing algorithm cannot be understated.
2. Support for More Web Application Features#
Another goal of HTML5 was to enable browsers to work as application platforms. As websites became more complex, developers had to find ways to “work around” browser extensions and other server-side technologies. HTML5 gives developers more control over the performance of their websites. Many of the Flash and JS-based hacks commonly used in HTML4 are now elements inherent to the language. These changes also allow for a faster and smoother user experience.
3. Enhanced Element Semantics#
The semantic roles of some existing elements have been improved to make the code more insinuative. New elements like section, header, article and nav can replace most div elements, which makes scanning for mistakes a less painful process.
4. Maximized Mobile Support#
Mobile devices are notorious for giving web developers headaches. Their rapid proliferation over the last decade has made the need for better HTML standards more urgent. Users expect to access web applications from anywhere, anytime on any device, so developers have been forced to meet the demands of the market. Fortunately, HTML5 makes mobile support easier by catering to “low-fueled” devices like smartphones and tablets.
Other Notable Improvements#
Now that a few years have passed since the launch of HTML5, several major companies have converted their websites, and many developers are sharing their opinions on HTML vs HTML5. Features that have been commonly cited as favorites include:
1. Support for Custom Data Attributes#
Adding custom attributes in a tag was risky before HTML5. With HTML4, custom attributes wouldn’t prevent pages from rendering completely, but they could result in an invalid document, which would cause browsers to render in quirks mode. The data-* attribute has taken care of this problem.
The data-* attribute has multiple uses, but its primary purpose it to store additional information about elements. Data is stored as a simple string. The inclusion of custom data lets developers make more engaging web pages without relying on Ajax calls or server-side lookups.
2. No More Cookies Thanks to Local Storage#
Although its already been mentioned, support for local storage has been a real game changer. Before HTML5, cookies were the only reliable way to store state information. Of course, cookies hold a very limited amount of data, and some web users disable cookies by default. HTML5’s localStorage object provides developers a way to work around the stateless nature of the HTTP protocol.
Because it is part of the global window namespace, localStorage may be accessed from any point within scripts. Only string values may be held in local storage, but the JSON.stringify() and JSON.parse() methods make serialization a quick and easy process. Alternatively, sessionStorage allows data to be stored only until the visitor closes their browser.
3. Form Field Autofocus#
The form field autofocus attribute lets developers designate which form field will have input focus once the page loads. Of course, only one form element per document may utilize the autofocus attribute, and the user can override it by selecting a different field. For example, by adding
autofocus to the Last Name input element as shown in the screenshot below, we can see that upon loading the page the Last Name input box is automatically highlighted.
4. Script and Link Tags No Longer Require Type Attribute#
Since it’s now implied that script and link tags refer to scripts and stylesheets respectively, the need for the type attribute has been eliminated.
The Future of HTML vs HTML5#
A new generation of developers will undoubtedly discover new ways to take advantage of HTML5, and social media will likely drive the continual evolution of the language. The W3C has announced that future updates to HTML5 will prioritize core “application foundations” such as privacy tools. Since a major focus of HTML5 was defining a set of dependable interoperable features, non-interoperable features have been saved for HTML 5.1. One of the more controversial proposals has been the inclusion of digital rights management tools.
As of early 2017, working web developers could still get by with a thorough knowledge of older HTML specifications; however, anyone who intends to continue pursuing a career in web development would be doing themselves a disservice not to embrace HTML5. Native support of video and audio alone makes HTML5 a substantial improvement over 4.1.
0 Comments
Thanks for comment.