Chapter 2. Marking Our Content with HTML5

Many consider that HTML is code. Well, it's not. HTML—any version of it—is a markup language.

A markup language is a computer language that can be read and understood by humans. It uses tags to define the parts of the content. HTML and XML are markup languages.

To further help the differentiation, a coding language involves much more complex abstractions, scripting, database connections, transmission of data in some shape or form via complex protocols, and so on. Coding is truly a magical world.

HTML can do all these, but it's way less complex and a lot easier to understand.

In this chapter, we're going to focus on the science behind marking up content. Content can come in many different forms: text, images, videos, forms, error messages, success messages, iconography, and so on. Also, the way a type of content behaves in the browser or the way the user interacts with it will tell us what type of HTML element that specific content should be marked as.

For example, many web designers make an anchor link <a href="#">Start 30 day trial</a> look like a button. Many web developers make the same anchor link behave like a button. Why not just use the <input type="button" value="Start 30 day trial"> element? Better yet, use the <button>Start 30 day trial</button> element that behaves exactly the same, is a lot easier to style, and allows the addition of HTML content if necessary.

The idea is to keep our markup as semantic as possible. Semantic markup basically means that we use HTML tags to describe what a specific piece of content is. Keeping a semantic markup has a lot of benefits:

Paying close attention to the content will go a long way for everyone in the chain—helping us during the project, helping the project itself, and eventually helping our users with and without assistive technology.

The best recommendation I can give you when marking up your content is listen to the content; it talks to you. It really does.

We will cover the following topics in this chapter:

So, which HTML elements can we use now so we're sure our websites/apps look fine in all browsers? The answer is all elements.

On October 28, 2014, the W3C finalized the HTML5 standard. However, all major browsers had been supporting HTML5 elements for several years.

What this means for us is that even way before the W3C finalized the HTML5 standard, we could already use any HTML5 element. So if you've been building websites/apps with HTML5, keep doing it; if you haven't started to use HTML5 yet for any specific reason, this is the time to start.