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 <!DOCTYPE> Declaration

All HTML5 documents should begin with a tag that indicated the document is, in fact, supposed to be valid HTML5. That looks like:

<!DOCTYPE html>

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:

  • <img>
  • <br>
  • <hr>

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" />
<br />
<hr />

This is no longer required.

<!-- The HTML5 way -->


<img src="example.jpg">
<br>
<hr>

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

–>

Related Posts

Beginner’s Guide to Sass

Have you ever wondered what SASS stands for? Or perhaps you already know what it is but haven’t taken the time to study and use it. Whether…

Responsive Web Design – Modern Website Code for Beginners

When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites. Then when smart phones were developed, mobile…

Beginner’s Guide to React

React is a JavaScript library that aims to simplify the development of visual interfaces. Developed at Facebook and released to the world in 2013, it drives some…

Server-Side Rendering (SSR) Made Easy With Angular Universal 9+

The Angular team recently, announced a pre-render builder in Angular Universal, in Jan 2020 to be specific. Angular Universal is for server-side rending (SSR); with these new…

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…

Best Practices for Preparing Your Markup for Styling

Now that you know how classes, IDs, and element tags can be used as hooks for CSS rulesets, how can you best implement this knowledge to write…