What is HTML5?
HTML, which stands for HyperText Markup Language, is the foundational structure of the web. It was initially developed in 1989 by Tim Burns-Lee, based on an existing Markup Language for text display called SGML. It is the mechanism used to encode information on a web page. It is not only content on a page, like the words “My Page,” but it includes tags such as “<title>” that encode that information in a meaningful way. The code “<title>My Page</title>” tells the browser “My Page” is the title and should appear at the top of the browser tab.
Other tools like screen readers can read that content and interpret what it means and how to present it. Search engines can “scrape” content from websites and understand how to display that correctly as search results. Automated bots/crawlers/spiders can regularly scan websites to keep up to date on the latest news, pricing, industry trends, or election results, all because the content is described semantically. That is, the tools reading it understand what they are looking at without requiring a human to interpret it.
HTML5 (written as a single word) is, as one might guess, the fifth version of HTML, and it’s undergone a lot of changes over the years.
History
Originally, HTML was just intended to present text on the screen. In fact, the very first version didn’t even include the ability to display images. Around 1993, the web, and HTML, really started to catch on outside of academia. As Tim Berns-Lee shared his development with colleagues around the world, they quickly came to realize that a lot more was going to be needed to make the web truly functional.
HTML went through several iterations until HTML 4.01 was released in 1997. By this point, the World Wide Web Consortium, or W3C, had been established to help standardize the web around open-source technologies and allow companies and organizations access to the future development of the web. A number of different web browsers had been introduced, and those companies were often creating their own experimental technologies, like Netscape’s Blink tag and Microsoft’s Marquee tag. Oftentimes these new technologies would make their way into the standards and become adopted by all browsers. Thankfully, others did not catch on.
The iterations that HTML went through originally were largely focused on presentation, not semantics. That is, it focused on the display of data tables, lists, headings, fonts, and how information was visually presented rather than on what the information meant. For example, HTML 3.2 introduced the <center> tag, which would align things to the center, but was absolutely no help in describing what was being aligned.
With HTML 4.01, the web was a fairly familiar place. JavaScript was well supported, allowing web developers to encode interactivity and business logic in sites. And Cascading Style Sheets (CSS) had been introduced, reinforcing the idea that design and content should be separated. These three components, scripting, styling, and markup had teamed up to provide developers with a fairly complete set of tools to build both websites and fully functional web applications. The modern web had arrived.
But, it was still lacking. Some of the HTML tags, like the “<q>” tag, were semantic – this is the quote tag which provides a means of linking to the citation URL that references source material. Others, like the “<div>” tag, were generic (HTML division) and didn’t help to convey any meaning about the content inside the tag. HTML5 was finally released in 2014 to help address these shortcomings, as well as introduce a raft of new native technologies to browsers so that users wouldn’t need to install plug-ins every time they went to a new site.
Semantic Web
HTML5 introduced a handful of new tags including “article,” “aside,” “figure,” “footer,” “header,” “nav,” “main,” and “section,” which were aimed at supporting web developers with more tools for describing the content of a website. “Article,” for instance, indicates a self-contained set of content that’s intended to be shared or redistributed. “Main” indicates the content that is the central focus of the document. “Aside” represents content that is only tangentially related to the main topic and not critical. “Nav” is navigation.
These new tags allow web developers to do a much better job of indicating what the content of the website means. This has positive implications for screen readers and accessibility, for search engines correctly cataloging a website. Other automated tools that can read and report on web content, like bots, crawlers, and spiders, can now puzzle out content from different sites. Semantic tags help give the web meaning without the need for human interpretation.
New Technologies
HTML5 also introduced a plethora of new technologies:
- Drag & Drop – HTML elements can now be moved around in a website. This includes things like moving items in a customizable dashboard, dragging items from one list to another, or dragging and dropping a file from your desktop right into a website.
- History – Originally, history meant moving back and forth from one page to another. But now, with the advent of Single Page Apps, it’s important for web developers to be able to manage a user’s history of experiences within a single browser session. When you’ve submitted a form to make a payment, you probably don’t want the back button to resubmit that form.
- Web Storage – Cookies were a pretty limited storage device for developers. The Web Storage API gives developers up to 5 MB of space to keep local data active without having to keep a constant connection open to the server. This helps apps, especially mobile apps, continue to function seamlessly as they transition from one wifi network to another or pass through dead zones.
- Audio and video – These are now supported natively in the web browser without users needing to stop and install the correct plug-in for the media type the developer chose to use.
- Forms – HTML5 introduced new form field types, including telephone and email, with built-in validation to ensure a user doesn’t accidentally submit their email address in the phone number field.
Explore
There are many amazing new features of HTML5. You can explore the new tags and APIs or follow a more general introduction on the Mozilla web site. Or you can find more advanced articles at places like Smashing Magazine. YouTube is full of excellent videos. And, as always, Stack Overflow is a reliable source for finding answers.
