As someone who has coded before the advent of HTML5, I saw how quickly the development of a website became long and complex. Many lines of code, reference pages, and nested items were necessary to create a single web page. With a graphic design background, it was difficult to grasp what each code tag meant and where it belonged in the long string, even after taking classes and asking friends for help.
Fortunately, an intelligent team of people called the World Wide Web Consortium (W3C) saw flaws in HTML 4 and prior. Plus, with their vast HTML knowledge, they foresaw the current way of coding was not going to hold up to the future demands of the internet. So the team set out to make improvements, but to understand today’s HTML, it’s important to know the challenges developers faced in the past.
Websites Before HTML5
Before the official release of HTML5 in 2011, websites coded with HTML 4 and prior were not as powerful and required plug-ins like Flash Player or Silverlight for videos or animations. These plug-ins were not always secure and sometimes risky to download. Additionally, they were not supported on mobile devices. Also, older HTML code was complicated and difficult to read. Developers had to add extra div or class tags to try and get the styling they wanted. Even more challenging, past HTML required different code for different browsers and mobile devices. That meant that developers sometimes had to create the same website 3-4 times over so that it would work on a variety of browsers and screens. This way of coding was not sustainable. These hurdles led the World Wide Web Consortium (W3C) to rethink Hyper Text Markup Language.
Time for Change
Knowing the flaws of HTML 4 & prior, W3C, to work to make improvements. Their goal was to make a new markup language that was more machine and human readable, so they created new HTML semantics to address this need. “Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is.” These semantics also made things easier for people to understand. Here is a list of a few HTML semantics, and it’s clear how easy they are to understand:
- <section> = Section of the website
- <abbr> = abbreviation
- <cite> = citation
- <video> = video file
- <figure> = figure but necessity an image
- <nav> = website navigation
In addition to new semantics, the W3C also wanted to make sure this language could be expanded upon and would work with past HTML versions. They did not want to depend on plug-ins for graphics and needed to handle more complex applications. So they made it much more flexible where the old code still works with the new HTML semantics.
Benefits of HTML5
After working on a new HTML standard for four years, W3C launched HTML5 which proved to be more powerful and flexible than its predecessors. Here are some of the ways HTML5 benefits developers and users alike:
- Handles Multimedia. With tags like <audio> and <video>, HTML5 can play sound clips and videos without using any plug-in. Additionally, the code allows for the player bar to be customizable with various volume controls, play/pause buttons, colors, and more.
- Creates Vector Graphics. Tags like <canvas> and <svg> allow developers to draw shapes like circles, square or rounded corner boxes.
- Compatible Across All Browsers. HTML5 provides a consistent user experience on Chrome, Safari, Firefox, etc. puls, mobile browsers on iOS and Android. When the W3C was crafting HTML5, they worked to make sure the markup language also worked on old browsers like Internet Explorer.
- Cleaner Code. The new HTML5 semantics makes for much easier to understand code, and less of it is necessary to create a website. With previous versions, developers added more div and class tags to achieve the various stylings they were looking for, making the code much harder to read.
- Includes Accessibility Features. Screen readers can more effectively read HTML5, which makes for a better web-browsing experience for those who need it. For example before HTML5 semantics to have a play button, the code would read:
<div>Play video</div>
But with the new semantics a play button is now:
<button>Play video</button>
Not only does a screen reader understand <button> better, but it also allows the user to use the keyboard to navigate and play the video.
- Allows Server-Sent Events. The website server can send one-way communications to the browser. This feature allows for social media news feeds to update continuously or stock market tickers to show real-time data.
And more to come
HTML5 was created to be a much more powerful tool. Because of the semantics, developers can build more complex websites that can handle data-heavy sites with math formulas, intricate algorithms, and multimedia. HTML5 was also built to evolve continuously. Although, according to Wikipedia, HTML5 has been retired and replaced by HTML Living Standard. This “concept of a living standard is that it is never complete and is always being updated and improved. New features can be added, but functionality will not be removed.” Much in the same way that technology is continuously changing, HTML must change with it.
References
Kyrnin, Jennifer. “Why Use Semantic HTML?” ThoughtCo, Jul. 31, 2021, https://www.thoughtco.com/why-use-semantic-html-3468271
HTML5. Wikipedia. June 2, 2022 https://en.wikipedia.org/wiki/HTML5
Fitzgerald, Anna. “A Beginner’s Guide to HTML5.” Hubspot. April 20 2022. https://blog.hubspot.com/blog/tabid/6307/bid/5847/a-marketer-s-guide-to-html5.aspx
“Create Custom controls for your HTML5 Video Player.” HTML Goodies. Feb. 22, 2017
“HTML: A good basis for accessibility.” MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
