Lesson 3: Introducing HTML5

Chapter 1: Introduction

Introduction

In our last lesson, we left our friends at WatzThis.com about to present their mobile app to potential investors. For the next three lessons, we're going to freeze time in their universe, so we can back up and look at how their budding mobile app actually works. We'll consider some good ideas (goodness knows they need them) to help them improve their app and get the funding they need.

What Is HTML?

HTML stands for Hypertext Markup Language. Invented by a physicist named Tim Berners-Lee in 1990 as a way to share documents on the Internet, HTML made the World Wide Web possible. Today, there are billions of webpages on the Internet that search engines know about, plus many more that search engines haven't indexed yet. Billions more can't be indexed because they're access-restricted. Almost all of these webpages use HTML.

To say that HTML is a popular and widely used language is an understatement. The reasons for HTML's success include:

• It's easy to learn.
• It's forgiving of mistakes.
• It's relatively intuitive.
• It happened to be in the right place at the right time (dumb luck, in other words).

Hypertext wasn't a new idea when Tim Berners-Lee built it into his language. Others had proposed it decades earlier, and plenty of people and companies had actually built and worked with hypertext systems before HTML. Perhaps the most successful was Apple Computer's HyperCard system.

Hypertext makes it possible for objects within documents to link to one another and to other documents. Today we're all familiar with this concept, and many of us use it every day.

For example, let's say you're reading a movie review online. The name of an actor might link to a biography of that actor. That biography might be a link to the complete list of films in which the actor has acted. Each of those films might link to more detailed information. And so on, and so on, and so on.

Hypertext makes the
Web go round.

The "ML" part of HTML stands for "markup language." Markup languages are a way of using text to describe text or to tell a computer what to do with a piece of text. The word "markup" comes from the publishing industry, in which editors "mark up" manuscripts to indicate changes they want to make to the text.

HTML is the way that website developers mark up text, images, and other types of content to tell Web browsers what to do. Web browsers are, essentially, programs for downloading and interpreting markup language and then doing something with the results (most often displaying them).

For example, in HTML, the following code indicates that the words "This is small text" should be displayed in small type.

This is small text.

Web browsers read and interpret the characters inside the angle brackets as special instructions. Browsers use those instructions to figure out what to do with the text in between and .

People have made many improvements to HTML since its beginning, but the "hypertext" and "markup language" parts of it are still the keys to understanding it.

HTML5 is—you guessed it—the fifth version of HTML. It's also the first major revision ofHTML since HTML 4.01, which the World Wide Web consortium officially adopted as the standard version back in2000. HTML5 is became the official, standardized version of HTML in October, 2014.

HTML5 represents a renaissance of HTML, in a way. After HTML 4.01 was standardized, many of the academics, companies, and other smart people who write the standards decided it'd be a good idea to replace HTML with a new language: XHTML. This effort failed to gain the sort of popular support that HTML enjoyed. Why, you ask?

• XHTML isn't as easy to learn as HTML.
• It isn't as forgiving of mistakes as HTML.
• It isn't as intuitive as HTML.
• XHTML was a top-down effort. In other words, the standards organizations led the process rather than taking their cues from the needs of Web developers.

HTML5, on the other hand, continues the path of HTML 4.01. It takes advantage of the strengths of earlier versions of HTML while improving upon those strengths and building in exciting new capabilities and features.

One great example of how HTML5 makes developers' lives easier is with how it deals with errors. In previous versions of HTML, Web browsers reacted inconsistently when they encountered incorrect code. A bug that one browser hardly noticed might cause another browser to display the webpage completely wrong. For years, Web developers have been learning tricks and creating workarounds for some of these cross-browser issues. But it's nearly impossible today to create a webpage with any amount of complexity that will look and work exactly the same on two different Web browsers.

To combat this problem and make Web developers' lives easier, the HTML5 specification, for the first time, details exactly how Web browsers should respond to poorly written or incorrect code.

Style vs. Purpose

HTML was invented to tell Web browsers how to format text in a document. Shortly thereafter, the debate began about exactly what sort of commands, or tags, should be in the language.

At first, things were chaotic. Tags like <blink>, <font>, <center>, <img> (for image), and <u> (for underline) specified how text should look. Tags like <table>, <address>, and <form> specified what the elements are.

Most people who make the rules feel that the proper role of a markup language is to identify what the meaning of the content is rather than how it should look (more like the second group of tags in the examples above). Using HTML to describe the meaning of webpages is semantic HTML. One of the big improvements of HTML5 is that it introduces a slew of new tags for specifying the meaning and purpose of content.

One of the benefits of semantic HTML over presentational HTML (which merely tells browsers what the content should look like) is that semantic HTML is useful for other types of devices besides desktop computers. For example, HTML code that specifies that a word should be red is useless when a text-to-speech program reads it. How do you speak "red"?

You can make content display in red on a webpage, but the proper way to do that is with a styling language rather than with HTML. You'll learn about the style language of the Web, CSS, in Lesson 4.

HTML5 Does Multimedia

In the past, Web developers relied on plug-ins—such as Apple QuickTime or Adobe Flash—to play audio and video files. But HTML5 has support for audio and video built right in.

Here's how you embed a video in a webpage with HTML5:

<video src="myvideo.ogg" width="550" height="400">
  <p>This text will display on older browsers. It should describe the video.</p>
</video>

That's all there is to it!

Accomplishing this same task pre-HTML5 required Web developers to use a special markup that was specific to the plug-in, and it required the user to install the right plug-in. Quite often, there was a problem somewhere in the process that would cause the video to not play.

Here's how you embed audio in an HTML5 document with the new <audio> tag:

<audio src="mysong.ogg" controls="controls">
  <p>Here's the alternative text for older browsers.</p>
</audio>

At this point, I feel like I need to point something out in order to avoid confusion later on. HTML5 doesn't actually play audio or video in the same way that plug-ins like QuickTime and Flash do. HTML5 merely defines how browsers should support the control and playing of video and audio using HTML5 tags. The browser does the actual work.

Regardless of how the inner details work, the result is that the confusing and incompatible world of audio and video playback on the Web is ending.

What's in a Tag?

HTML uses tags (a predefined set of special combinations of characters) to annotate text—in other words, to add some sort of additional meaning. In HTML, each tag consists of a character or series of characters surrounded by a less-than symbol (<) and a greater-than symbol (>). Another name for these symbols is angle brackets.

There are two basic types of tags. A beginning tag comes before the text you want to annotate. It contains just the < and > symbols and the name of the tag between them. An ending tag has a forward slash (/) before the name of the tag.

When you take the beginning tag, the ending tag, and everything between them (known as the contents) as a whole unit, it's called an element.

For example, here's an HTML paragraph element:

<p>This is a paragraph of text.</p>

This paragraph element consists of a beginning tag (<p>), some content (the sentence), and an ending tag </p>.

Some elements can't have any content. HTML5 calls these void elements, and they only have a start tag. For example, here's a <br> tag, which inserts a line break into a document.

<br>

Note

If you've worked with XHTML, you may be familiar with the use of a trailing slash to mark the end of a void element, as in this example:

<br />

You don't need to do this in HTML5.

Using Attributes

Sometimes a simple HTML tag isn't enough to fully describe the data within an element. This is where attributes come in. Attributes are ways to modify (add additional information to) HTML elements. Attributes take the format "name=value," and most HTML elements accept at least a few of them.

One important one is the ID attribute, which you can use with most elements in order to give them a unique identifier.

For example, if you use the <button> element to create several buttons in a Web app, it's useful to be able to uniquely identify each one. This is where the ID attribute comes in. Here are some examples of button elements with different ID attributes:

<button id="registernow">Register Now!</button>
<button id="registerlater">Register Later!</button>
<button id="dontregister">Don't Register!</button>

The browser that interprets this code will display three buttons:

Three buttons in HTML5

The ID attribute is one of a handful of global attributes—ones that HTML authors can use on many HTML elements. Other attributes, such as the "disabled" attribute of the button element, work with only a few elements where they make sense. Some elements have attributes that are unique to that element.

There are a lot of HTML tags, and a lot of HTML attributes. Fortunately, there's no need for you to memorize them. In the Supplementary Material section of this lesson, you'll find links to cheat sheets you can use anytime you need to look up an element.

So you've learned about tags and attributes. How do they work together? Please continue to Chapter 3 to find out.

Exploring a Basic HTML5 Template

Tags and attributes are the building blocks of HTML. Now that you understand them, let's look at a basic HTML5 template. Here it is:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>

</body>

</html>

Let's deconstruct this template, so you can be sure you fully understand it.

The first line is the document type declaration, or DOCTYPE.

<!DOCTYPE html>

This DOCTYPE simply indicates that this is an HTML document and that the computer program that's reading it (most often a Web browser) should use the rules that apply to HTML documents in order to decide how to process it.

The next line is the beginning tag of the html element.

<html>

Also known as the document element, the HTML element is always the outermost element in the Russian nesting doll of elements that make up an HTML document.

After that comes the head element.

<head>

The head element is where you place the supporting characters for the HTML document. These parts of the document don't display in the browser, but they may influence how it displays or further describe what the document is.

<meta charset="utf-8">

This line specifies the character set that the webpage should use. A character set is like a list of letters, numbers, and symbols that a computer picks from when displaying text. If you don't specify a character set, you may find that many nonstandard characters (characters besides the 26 letters in the English alphabet, plus numbers and a limited set of punctuation marks) may display incorrectly.

The most common character set is utf-8. It features support for over a million characters, encompassing pretty much any symbol that you're likely to use.

Let's move on to the title element.

<title>Page Title</title>

The title element consists of a beginning tag, an ending tag, and the actual title content. Just as you'd expect, it specifies the title of this HTML document—the words that show up in the title bar or on the tab of your Web browser window.

</head>

The ending head tag indicates the end of the page header.

<body>

The beginning tag of the body element tells the Web browser to display what follows inside the Web browser window.

</body>

The browser knows to stop displaying the contents of the page when it reaches the ending body tag.

</html>

Once the body is finished, the ending HTML tag indicates the end of the entire document.

This basic HTML5 template can remain the same for every HTML5 webpage you create. The exciting things go on inside this template.

Building Structure With HTML5

The frame of a building holds it together, creates the different levels, and defines its shape. All the walls, windows, doors, elevators, wiring, plumbing, and other systems that will eventually make the building fully functional depend upon the frame.

HTML is the frame of a Web app or a document. All of the document's content, styles, and scripts depend on the HTML being solid so that they can do their job.

HTML5 code reflects how people write actual documents, such as books, letters, articles, presentations, and so on. It contains elements that can help you group and organize your webpages, while at the same time making your webpage more useful to Web browsers and other programs that will read your code.

Here are some of the organizational and grouping tags in HTML5:

• <div>: The div tag is a generic container element with no meaning. It's an easy way to define a block of text to make it easier to manipulate. For instance, you might use a div tag to center or otherwise position a section of text on a page.
• <section>: Use this to define sections within a document, such as chapters, or any other division that doesn't have a more specific sectioning element (such as <article>, for example).
• <h1>,<h2>,<h3>,<h4>,<h5>,<h6>: These let you create headings for sections.
• <article>: This tag designates the section of the page that contains the main content.
• <aside>: Content with this tag is related to but separate from the content surrounding it—for instance, a quotation, an advertisement, or a sidebar.
• <figure>: Content with this tag could be an image or a graph, for example.
• <figcaption>: Use this tag when you have text that describes the contents of a figure.
• <footer>: Use this for the footer of the current section.
• <header>: Use this for the header of the current section.
• <nav>: Content with this tag contains a group of links. This tag is useful for containing site navigation links that are on multiple webpages.
• <p>: Content with this tag contains a paragraph.

Elements that you create using these tags are block-level elements. When a Web browser displays a block-level element, it inserts a line break before the element's content.

Describing Content With HTML5

Within the block-level elements, webpage authors have a large selection of text-level elements, also called inline elements. These elements describe the role of specific pieces of text within a block-level element. They don't create new lines in a Web browser; instead, they display next to each other.

Here's an example of several inline elements within a block-level element. Text marked with <strong> is boldfaced, while text with the <em> tag is emphasized (put in italic type).

<p>HTML5 has some <strong>excellent</strong> new features. You <em>should</em> get on board with it right away!</p>

Here are some of HTML5's text-level elements:

• <span>: The span tag is a generic inline container with no meaning. It doesn't change the look of the elements it attaches to, but it lets you hook elements together so that you can apply one style to all of them at once.
• <a>: This defines an anchor, which is usually a hyperlink.
• <abbr>: This tag indicates an abbreviation.
• <code>: Use this tag to mark a piece of computer code.
• <del>: This is for text deleted during editing.
• <em>: As I mentioned earlier, this is for text you want to emphasize.
• <ins>: This is for text inserted during editing.
• <time>: This tag provides the date, the time, or both in a machine-readable format.
• <small>: Here's how you mark the fine print.
• <sup>: This is for superscript text, which appears above the line, like this: 10². Superscripts often indicate footnotes or powers of 10.
• <sub>: And here's how you mark subscript text, which often appears in scientific expressions like H₂O.
• <strong>: Use this tag to indicate important text.

Embedding Content With HTML5

Other HTML tags embed content from other sources into a document. This content could include images, audio, video, and even other webpages.

Here are some of HTML5's embedding elements:

• <img>: You'd use this tag to embed an image.
• <object>: Use this one to embed an external resource, such as a plug-in, image, or other content.
• <iframe>: This tag lets you create a nested browser frame, so you can insert a webpage within your webpage.
• <audio>: This tag's for embedding an audio file.
• <video>: This one lets you embed a video file.

The most widely used of these elements is <img>. Here's an example of how to use it to embed an element into a webpage:

<img src="http://www.watzthis.com/images/pterodactyl.png" alt="a drawing of a pterodactyl" width="300" height="179">

Here's how this element looks when rendered in a webpage:

A drawing of a pterodactyl in a webpage

In the next chapter, we'll look at the nuts and bolts of creating a document in HTML.

Creating an HTML5 Document

Back at WatzThis corporate headquarters, the marketing department is concerned that the documentation on the home screen of WatzThis.com is inadequate. They'd like something more "robust" that can double as a sales tool. Here's the text they've provided:

WhatThis.com Documentation

How to Use WatzThis

Chapter 1: The Buttons

WatzThis has several buttons. Each has a different function. The following figure shows the buttons.

(insert a picture of the buttons, with the caption: You can see the buttons here.)

Chapter 2: The Lights

WatzThis has colors. They change when you press different buttons.

Chapter 3: "Auto" Mode

WatzThis has an automatic mode that's useful for those times when you're doing something else, such as dancing, but would still like to have changing colors on your mobile device.

created by WatzThis Enterprises

This looks like a perfect chance to try out some of the HTML5 tags that you just learned. Here's one way you could mark up the marketing department's text to create an HTML document:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> WatzThis.com Documentation</title>
</head>
<body>
  <header>
    <h1>How to use WatzThis</h1>
  </header>
     <section>
      <h2>Chapter 1: The Buttons</h2>
      <p>WatzThis has several buttons. Each has a different function. The following figure shows the buttons.</p>
      <figure>
      <img src="http://www.watzthis.com/images/buttons.png" alt="Here are the buttons">
      <figcaption>You can see the buttons here.</figcaption>
      </figure>
    </section>
    <section>
      <h2>Chapter 2: The Lights</h2>
      <p>WatzThis has colors. They change when you press different buttons.</p>
    </section>
    <section>
      <h2>Chapter 3: "Auto" Mode</h2>
      <p>WatzThis has an automatic mode that's useful for those times when you're doing something else, such as dancing, but would still like to have changing colors on your mobile device.</p>
    </section>
  <footer>
  <p>created by WatzThis Enterprises</p>
  </footer>
 </body>
</html>

Here's what this HTML5 document looks like when rendered in a web browser:

The start of the WatzThis.com online documentation

Are you starting to see how you could use these tags within apps of your own?

Summary

In this lesson, you learned what makes HTML so important to the Web and why HTML5 is such an exciting improvement over previous versions.

You discovered the fundamentals of markup languages, including the definitions of tag, element, and attribute. Then you dissected a basic HTML5 template and learned the elements that every HTML5 document has in common.

Next, you expanded upon the HTML5 template using tags for creating structure and groups. You also got a glimpse of the multimedia capabilities of HTML5.

What's next? In Lesson 4, we'll continue discussing about HTML5. You'll learn about more of its elements, work with more markup, learn about the mobile-specific elements of the language, and get a preview of some of the advanced capabilities that HTML5 supports.

Supplementary Material

HTML Reference

List of New HTML5 Tags - Webucator Blog

Web     Google Developers

Freeformers - Accelerating growth through people & technology Freeformers

Lesson 3 FAQs

Q: If semantic HTML is the correct way to write HTML, why does HTML5 have tags like <i> (for italics) and <b> (for bold)?

A: These tags are so widely used in existing webpages today that it's just not possible to remove them completely from the language or remove browser support for them at this point. Most Web developers have stopped using these tags, however, in favor of the semantic HTML <em> (for "emphasis") and <strong> (for "strong", of course).

Q: It seems like some of the tags are redundant. For example, why is there a <section> tag in addition to a <div> tag and an <article> tag?

A: The differences between these three tags are somewhat hard to understand unless you have experience working with each of them. Basically, though, <article> is for things that you'd consider an article. That's simple enough. The HTML5 spec actually further qualifies its meaning by saying that people should use it for content that could be syndicated, such as a blog post, a news story, a feature article, a lesson, and so forth. Use the <div> tag when you want to create a block of text that's styled a certain way or that behaves a certain way, without attaching any special meaning to it. For example, you might want to have a block of text that's hidden until someone clicks on a button on the page. This would be a good use for <div>. Sections are a little trickier. Many people feel <section> is redundant and shouldn't be a part of HTML5. There are very few good reasons to use <section>, so don't worry about it.

Lesson 3 Assignment

Are you ready to create a webpage on your own with HTML5? I know you are!

Starting with the HTML5 template that you created in Lesson 1 (and that was repeated in this lesson), use some of the HTML5 tags you learned in this lesson to build a new HTML page. Feel free to start with the WatzThis documentation page from Chapter 4 and to cut and paste the other bits of code in this lesson into your new document.

Here are some ideas for documents to get you started:

A résumé
A recipe
A bowling tutorial
An article about pterodactyls

Just remember that HTML is primarily a language for creating structured documents. It works well for outlines, descriptions of steps, or even categorized lists of poems or songs. You can certainly mark up documents that don't have much logical structure to begin with (such as an advertisement or a free-verse poem, for example). But you'll get more out of this exercise by thinking of a document that has repeated elements and some form of organization. You can use any or all of the tags you learned in Chapter 4, and you can try out other tags you saw in the Supplementary Material links.