HTML5 Basics For Everyone Tired Of Reading About Deprecated Code
You’ve probably seen many references to HTML5, along with mentions of certain features being “Deprecated” or “New” in HTML5. This can sometimes be confusing, as you find out that the way you thought you were “supposed” to do something is now not the right way at all.
It can also be annoying — especially since most of these “deprecated features” still work on most browsers. Why bother learning a new way of doing something if the old way works just fine?
And, of course, it can be difficult to find the right information sometimes. Content on the internet doesn’t live forever… but almost. And the older content is, the more likely it is that you’ll find it on a search engine. (All things being equal, Google and the others prefer older content. Also, older content has had more time to acquire backlinks.) This means that you will often find out-of-date tutorials when you are looking for information about HTML.
This article should clear up some of that confusion and get you on the right track with modern web development.
- 1 All About Rats
- 1.1 Why Do Rats Make Great Pets?
- 1.2 What is HTML5?
- 1.3 Why Should I Use HTML5?
- 1.4 How To Use HTML5
What is HTML?
(Skip ahead to What is HTML5 if you are already familiar with HTML generally.)
You probably already know that HTML, or HyperText Markup Language, is the language used for web documents. It is not a programming language, but rather a language that identifies the meaning, purpose, and structure of text within a document.
For example, consider this document:
All About Rats
Why Do Rats Make Great Pets?
Forget what you’ve learned from horror films, rats make great pets — especially for children. And unlike the popular hamster, they almost never bite.
You can easily understand the structure of the document because it is simple, and you are an intelligent human being who has read many documents in your life. But your web browser needs to understand the document in order to present it to you in an intelligent and meaningful way. So we use HTML tags (also called “elements”) to identify the different pieces of the document.
For this simple document, we can add an
<h1> tag to identify the main heading for the page (the title of the document), and
</h1> to close it. Use the
<h2> tag to identify the first headline within the content, and a
</h2> tag to identify the block of content following it as a paragraph.
<h1>All About Rats</h1> <h2>Why Do Rats Make Great Pets?</h2> Forget what you've learned from horror films, rats make great pets -- especially for children. And unlike the popular hamster, they almost never bite.
Now, a web browser can show you this document in a more meaningful way. This might seem trivial for a short document with one headline a single paragraph, but it can get complicated very fast. You’ve seen a lot of web pages, so you know that there are all sorts of things (not just headlines and paragraphs) that people need to represent on their web pages. Things like:
And that’s just for starters. You also need to be able to identify sections of your document and provide metadata about the document itself. (Metadata is information about the document, such as the title, author, relevant keywords, and relationship to other documents.)
HTML History and Development
HTML has been around for a long time. Its roots go back to at least 1980, with Tim Berners-Lee‘s project ENQUIRE. And actually, the concept of hypertext goes back even further than that. The concept first appeared in the early 1940s, and was named and demonstrated in the 1960s.
In 1989, Lee proposed a new hypertext system based on the ideas of ENQUIRE (and other systems, such as Apple’s HyperCard). This became the first version of what we now call HTML.
Since then, the language has been in constant development. The specification is managed by the World Wide Web Consortium (Berners-Lee is still the director, as of 2018), and the Web Hypertext Application Technology Working Group. (So, if you don’t like HTML5, these are the people to blame.)
The language has evolved over all this time because web development has changed. We do things with web pages and HTML today that were never dreamt of by the early developers and implementers of the language. A web page is no longer just a document; it is likely to be a full-scale web application. And even when it is “just a document,” we want search engines and other tools to understand the content of the website. We aren’t just creating pages for human readers anymore, but for artificially-intelligent systems that collect and manipulate information.
Why did HTML have to change? Because the web has changed.
What is HTML5?
HTML5 is the latest specification of the HTML language, and represented a major break with previous markup practices. The purpose of the profound changes to the language was to standardize the many new ways in which developers were using it, as well as to encourage a single set of best practices with regards to web development.
Most of the individual changes are a result of larger objectives in the design of the language. These objectives primarily include:
- Encouraging semantic (meaningful) markup
- Separating design from content
- Promoting accessibility and design responsiveness
- Supporting rich media experiences while eliminating the need for plugins such as Flash or Java
Getting a handle on HTML5 isn’t just about learning which CSS features replace old HTML features. If you want to get an intuitive sense of HTML5, it is best to understand how these objectives affected the development of the language.
Encouraging Semantic Markup
Semantic markup means markup which has meaning, rather than markup which simply looks a certain way. For example, the
<h1> tag implies that the content of the element is the title or headline of the entire document. That semantic meaning would be lost if we just made the text bold and large without using the appropriate tag.
HTML has always had a little bit of semantic markup available to it: heading tags, the link rel attribute, and document metadata. But it wasn’t enough.
In previous versions of the language, common structural elements like page headers, navigation menus, and main content sections were all indicated with the same HTML element, the
<div> tag. In HTML, there are a host of new semantic elements intended to indicate the basic structure of a page:
New text-level (inline) elements have also been introduced, such as
<time>. These help search engines and other services to easily find information on a page, for display in other contexts. At the same time, existing inline elements which produce various effects like bold, italic, and underline have been refined or redefined to imply specific semantic meaning.
Separating Design From Content
Along with strongly encouraging semantic (meaningful) markup, the HTML5 specification strongly discourages non-meaningful markup — markup intended only to tell the browser how to display things. This includes things like:
- declaring fonts and text colors
- setting text alignment or justification
- placing borders on tables
- defining how text wraps around images
Most of the HTML features that allowed for these sorts of things have been completely deprecated. The few that are still officially supported come with warnings that they are usually not recommended practices.
There are primarily two reasons to prefer this separation:
- It is easier to maintain and redesign a site if the style declarations are confined to CSS
- Users view web content in a lot of different contexts — desktops, laptops, tablets, mobile phones, RSS readers, and many others. Styles and design decisions that make sense in one environment don’t always make sense in another. So it is much better to provide semantic information and let the content be adapted to the context.
This last point is closely tied to…
Promoting Accessibility and Design Responsiveness
Not everyone interacts with the web the same way you do.
“Conventional” devices — desktops, laptops, tablets, and phones — present a wide range of screen sizes, screen aspect ratios, display resolutions, and user interaction experiences. This variety alone should be enough to encourage semantic and responsive design practices. But not everyone uses a “conventional” browser.
Blind and visually impaired persons browse the web also, and they use a variety of assistive technologies to do so. Screen readers that translate a site’s content into speech, specialized browsers that strip out styling and present highly magnified or high-contrast text, braille interpreters, and keyboard-based navigation all allow those with non-standard vision to interact with websites.
And all of these technologies are hindered by markup which tries to “hard-code” design and styling into the content of a page.
No one sat down at the beginning of the internet and figured what types of things belong to each language. They each evolved in parallel to each other, often overlapping in functionality and scope.
Besides the practical considerations enumerated above, there has also been a focus on defining the nature and purpose of these languages, and limiting them (or expanding them) so that they do what is in their nature to do:
- HTML — Content
- CSS — Design
- JS — Interactivity
Supporting Rich Media Experiences While Eliminating the Need for Plugins Such as Flash or Java
As bandwidth and internet speed have increased, we have moved more and more toward using the internet as a media platform. HTML was originally created for (hyper-)text documents, with perhaps a few images, not rich media pages with audio and video.
When people first started adding these types of experiences to web pages, they required users to add special plugins to their browsers. These performed poorly, limited user options, and opened up security holes. They required developers to write core web page functionality in other languages like Flash or Java. The content was hidden from search engines and screen readers.
It was a mess.
Now, HTML5 provides support for media with elements like
Why Should I Use HTML5?
The most straight-forward answer to that question is simply that it is the current, “right” version of the language.
But some people seem unconvinced by this fact. Older markup practices still work in most browsers — if you type
<img align="right" /> onto your web page, the text will flow around the image just the way you’d expect. Why not just do that? It’s easier!
There are a number of reasons to prefer HTML5, and to avoid using any of the deprecated features. Some are practical, while others are more philosophical. Some are altruistic, while others are selfish.
- Easier to write
- Easier to maintain
- Easier to redesign
- Better for Search Engine Optimization
- Better for the blind and visually impaired
- Better for content aggregators and feed readers
- Better for users on mobile devices
- Better for users on slower internet connections
- Fewer chances of design breaks
- Easier to add media
- Easier to create interactive applications
- Deprecated features will likely stop being supported at some point, breaking your page
How To Use HTML5
You probably already know how to create HTML5 documents. The basics of the language are the same. There’s a just a few things that are good to keep in mind.
Avoid Deprecated Features
<!– Browse the list on this page to make sure that you know which HTML features are no longer supported in HTML5. If you click on the links to the individual pages, you can learn more about why each feature was deprecated and how to accomplish similar effects using modern, standard features of HTML5 and CSS. –>
Make sure that you know which HTML features are no longer supported in HTML5. If you research the deprecated tags, you can learn more about why each feature was deprecated and how to accomplish similar effects using modern, standard features of HTML5 and CSS.
You don’t have to memorize the list, though. All you really have to remember is that if you want to affect the way something looks on a page, you probably shouldn’t attempt to do what you want with HTML. Nearly all of the HTML features that affected style or design have been deprecated, and the few that are left are only recommended in particular cases.
Learn to Use the New Features
Sometimes, if you don’t know that something is available, you don’t know to look for it. For example, if you didn’t already know about the
<video> element, you might not know just how easy it is to embed video on a web page.
<!– So it’s a good idea to spend some time browsing the New Features list so that you are aware of what’s available. –>
So it’s a good idea to spend some time browsing the new Features so that you are aware of what’s available.
Get Comfortable With CSS
Many of the deprecated features were used to achieve design and styling effects. These are now properly the domain of CSS. If you want to be a modern web front-end developer, you’ll spend some time getting good at using CSS.
Use the HTML5
All HTML5 documents should begin with a tag that indicated the document is, in fact, supposed to be valid HTML5. That looks like:
This should be the very first thing in a document, before the
<html> tag, and before any whitespace.
Don’t Close Null Tags
It’s a little minor point, but…
A “null” or “empty” element is an element that has no content. These include:
Surprised that an
<img> element has no content? The image itself is an attribute of the tag, not the content.
In some previous versions, HTML (those based on the XML standard) required these elements to be closed with a slash.
<!-- Self-closing null elements -->
<img src="example.jpg" />
This is no longer required.
<!-- The HTML5 way -->
Validate Your Pages
Finally, you should make it a habit to validate your HTML documents against the specification. This means using an automated tool to check whether the markup adheres to the standard or not.
The W3C provides an official Markup Validation Service, which allows you to quickly check your pages against the HTML5 specification (and older specs too, if you like).
Deprecated Features in HTML5
New Features in HTML5