Improving How the Web is Built
HyperText Markup Language (HTML) is one of the fundamental building blocks of the internet. HTML5, released in 2008, is the current version and is now a living standard for HTML. This latest iteration introduced many new tools and features. These new tools advance the internet into a more dynamic, structurally meaningful, and accessible network. There are added capabilities for multimedia, updated tags for better semantics, and better handling of form data. All of these combined make the web more accessible.
Brief History
Here is a sample of simple HTML showing a heading and a paragraph. The heading is designated by using the <h1></h1> tags. The text between these tags will be displayed as a heading. The same goes for the paragraph text between the <p></p> tags.
Here is the output of the HTML above:
The first version of HTML was created in the early 90s. Since then the markup language has evolved alongside the internet. As the internet has grown to be more widely used and more dynamic in presentation and capability, HTML has gone through several revisions.
Here’s a brief history:
- HTML 1 began with many essential tags for structuring a web document. The <p> paragraph tag and <h1> heading tag were both available in HTML 1.
- HTML 2 added <table> tables and <form> forms.
- HTML 3 made the <script> tag available for adding JavaScript.
- HTML 4 gave us iFrames and <button> tags.
HTML5
HTML 5 introduced many useful new tags and features. These address common needs for an internet that is more widely used than ever such as multimedia tags, canvas tags, and improved semantics.
Video
Video content is essential on the web. Before this latest version, handling of video was the job of Flash or complicated JavaScript. HTML 5 introduced the video tag. The video tag provides an elegant and powerful solution for displaying videos. The dimensions of the video player can be defined directly within the tag. There are also options for showing video controls.
There are also attributes for auto-play, looped playback, muted audio, and displaying an image before the video plays. Video can be displayed from a file saved on the site or from an external source like YouTube.
Simple code block showing a video tag with controls.
Here is the output of the code block.
Canvas
Another tag that can be very fun to use is the canvas tag. The canvas tag utilizes the JavaScript canvas API to draw graphics. The canvas provides the drawing area while the JavaScript code draws. It can be used for animations, data visualization, photo manipulation, or even making games.
First, a canvas tag is added to the webpage using the HTML <canvas> tag. Then JavasScript is used to select the canvas. The method getContext() is used to select the contents of the canvas. The method fillStyle() draws a rectangle and fillRect() will place it on the canvas.
Here is an example of the canvas tag in action.
Here is the result of the code block above.
Improved semantics
A very important new feature of HTML5 is improved semantics. Before HTML5 there was a heavy reliance on <div> tags to build websites. The <div> tag works well as a container to hold site sections like the header or navigation menu. What the div tag doesn’t do well is carry information about what it is being used for.
Before HTML5 this information was added using a class. Classes are useful for developers, however the meaning of the div still isn’t inherently part of the div.
HTML5 introduced several tags that are used to describe common page sections. For site headers, the <header> tag was added.
Other useful tags for structuring websites are:
<section>
For declaring a generic area of a webpage. This can be a complete piece of content or just a thematically similar area.
<article>
Articles represent content that is self-contained. The article’s complete contents are contained in the article. It can be moved and redistributed. This could be an article, forum post, blog post, or similar.
<aside>
An aside is a section taken out of the normal flow of the webpage. A side menu or advertisement could be an aside.
Here is an example of a simple webpage built with semantic HTML5 tags.
With these new tags a website can be structured in a more meaningful and descriptive way. Looking at the code block it is easy for someone familiar with HTML to see how this page is structured. The sections are now being labeled specifically for their role in creating the page. These common patterns grew out of using <div>s. Now they are a fundamental part of the language.
Forms
Field Types
The web is full of forms. Forms are one of the primary ways users interact with a website. HTML5 improves forms by incorporating functionality that would have previously been done using PHP or JavaScript code.
One example of this is the email type ex: type=”email”. This type of declaration does more than simply label the input field. This comes with email validation before any other code is necessary. The email field will not accept inputs that aren’t formatted like an email address “email@email.com”. On some devices, this will also bring up a different keyboard that is better suited for email rather than the standard mobile keyboard.
Patterns
HTML 5 also introduced the pattern attribute for form inputs. The pattern attributes allow a developer to define a pattern that the input text must meet for it to be considered valid. If the input doesn’t fit the pattern it will be seen as a mismatch and the form will not be submitted.
An example of this would be an area code for a phone number. An input field can be given the type of ‘tel’ and a pattern of [0-9]{3} . This means the form field will accept numbers 0-9 and it will only accept an input that is 3 characters long. This is perfect for validating an area code.
Improved Accessibility
With improved semantics for multimedia, page sections, and form fields comes greater accessibility. Many internet users navigate the web using a keyboard or a screen reader. These tools are not well suited for using a web page that is built from nondescript HTML. There isn’t anything to tell the keyboard what to focus on first. Screen readers won’t be able to tell what pieces of the site are most important.
One benefit of HTML 5 to screen readers is the semantic tags. The screen reading software will know which element is the navigation menu and which is an article. Screen readers struggle to navigate websites structured with <div> elements alone. The <div>s may be given class names that describe what they are. Those class names won’t be consistent across the internet though. Semantic HTML tags describe where each page section is in a consistent way that can be navigated by screen readers.
Form labels are often displayed in a way that is disconnected from the form field. A screen reader will not be able to make the connection between the label and the form field. A screen reader will be able to identify a form field that is labeled as an email field. That means the internet can continue its path toward being more dynamic while also being more accessible.
As the internet becomes more of a mainstay in our lives, HTML has evolved to meet the moment. With HTML 5, websites are more consistent and structurally sound. Complicated JavaScript and PHP code become less necessary all while creating a more dynamic experience for users. HTML5 provides a forward-thinking foundation to build the interactive and accessible websites of the future.
