Introducing HTML5 - Creating with Tags : An Overview

Most of the content on the Internet is created with HyperText Markup Language (HTML). You may be surprised to learn that several applications you use every day — for example, your word processor — also were created with markup languages. However, like all computer languages, with HTML, all you see is the content, not the underlying language. The language works like the frame of a building — you know it’s there underneath all that paint and drywall, but you can’t see it. 

If you’re familiar with previous versions of HTML and XHTML, you’ll be able to transfer the bulk of your knowledge to HTML5. And if you’re brand-new to working with HTML, you’ll find HTML5 quite simple. Essentially, all you have to do is place your content between an opening tag and a closing tag, called a container, and the container will style your text or display your graphics and media on the Web page. Figure 1 illustrates containers:

Figure 1: Containers in HTML5.

For example, the following line,

<h1>This is big text.</h1>

tells the interpreter in your browser to create big text that looks like this:

This is big text.

The text inside the arrow brackets < > is the code. In this case, h1 is the code for big text. The arrow brackets tell where to begin the container (<h1>) and where to end the container (</h1>). Everything inside the container is configured to the size and style of the tag, which is either built into the tag or created using CSS3.

While we’re getting started here, you can have a little fun creating and viewing some HTML5 with little examples. Save the file with the extension .html, and then open it in an HTML5 browser. To open a Web page, just start your browser and then, from the menu bar, select File → Open File (or Open), and locate the filename. (You can just double-click the file icon on the desktop to open most HTML files.)

Incorporating the new HTML5 elements

A tag is made up of an element and attributes. The tag is identified by its element, such as <h1> — h1 is the element. When we speak of a tag, we’re usually referring to its element, but actually a tag is its element and attributes. Attributes are the different characteristics or properties of an element that you can code to change features of the content in the tag’s container. For now, I’m just going to deal with the element, so I’ll use the terms tag and element interchangeably.

To give you a sense of the new elements in HTML5, Table 1 shows all the new elements, along with a brief description of each.

Table 1 New Elements in HTML5
New Element	Description
<article>	Self-contained composition in document
<aside>	Content tangentially related to content of the article
<audio>	Sound content container
<canvas>	Graphic development container
<command>	A command that the user can invoke
<datalist>	List generator when used with the <input> element and its new list attribute
<details>	Discloses details of an element
<embed>	External interactive plug-in or content
<figcaption>	Caption tag for the figure element
<figure>	Contains a group of media content and their caption
<footer>	Container for a footer for a section or page
<header>	Container for header for a section or page
<hgroup>	A heading of a section with multiple h1 to h6 elements in a document
<keygen>	The key pair generator control representation.
<mark>	A string of text in one document, marked or highlighted for reference in another document
<meter>	Container for a known range of values (for example, disk use)
<nav>	Representation of a section of a document intended for navigation
<output>	Defines the progress of a task of any kind
<progress>	Representation of the progress made in a task (such as percentage complete in a download operation)
<rp>	Indicator in Ruby (a programming language) annotations to define what to show browsers that don’t support the <ruby> element
<rt>	Marks the ruby text component of a ruby annotation
<ruby>	Element for spans with ruby annotations
<section>	Theme identifier for content grouping
<source>	Container for multiple specification of media resources
<summary>	Information on a <details> element
<time>	Container for a date/time
<video>	Element for linking to a video file
<wbr>	Representation of a line break opportunity to guide the hyphenation of long words or text strings

Some of the new elements, like <video> and <audio> add multimedia to HTML and represent a major new capacity to HTML. Others, like <ruby>, are quite specialized, and unless you need certain East Asian characters, you’re unlikely to use that element.

One characteristic of many of the new tags is that they work in conjunction with CSS3 or JavaScript. However, most of the new elements still work on their own, without any added help. When adding a style or some of the cooler features, you may find yourself using a bit of CSS3 or JavaScript, but you don’t have to learn the entire JavaScript language or even CSS3 to have some fun with it.

For example, the following script uses the new <datalist> element that has not been available in earlier versions of HTML. Enter the following code in a text editor, save it as Datalist.html, open it in your Web browser, and you’ll see how it assists users in entering data. 

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Datalist</title>

</head>

<body>

<p>

<label> Which of the following would you like to learn?<br />

<input type=”text” name=”web” list=”lang”>

<datalist id=”lang”>

<option value=”HTML5”>

<option value=”JavaScript”>

<option value=”jQuery”>

<option value=”ActionScript 3.0”>

<option value=”Java”>

</datalist>

</label>

<br />

</p>

</body>

</html>

When you open the file in an Opera browser, you’ll be given a list of input options, as shown in Figure 2.

Figure 2: Using the <datalist> tag in an Opera browser.

Unlike earlier versions of HTML, in which text input didn’t show the user an options list, this one does.

Using continued tags from HTML4

Even if you’re familiar with HTML4 (or earlier versions of HTML), you’ll be surprised by the number of HTML elements you may not know how to use or may not have even heard of before. For example, what’s the <q> tag? When is it used? If you’re new to HTML, don’t try to remember all of the elements in Table 2, but go over them to get a general sense of the available tags and a little about their description.

Table 2 Continued Tags from Previous HTML Versions
Continued Tags	Description
<!--...-->	A comment
<!DOCTYPE>	The document type (only one in HTML5)
<a>	Hyperlink to a page or page area
<abbr>	An abbreviation
<address>	Container for an address
<area>	An area inside an image map
<b>	Bold text
<base>	A base URL for all the links in a page
<bdo>	Direction of text display
<blockquote>	A block of text
<body>	Beginning a body element
<br>	A single line break
<button>	A clickable button
<caption>	A table caption
<cite>	Container for a citation
<code>	Format for computer code text
<col>	Defines attributes for table columns
<colgroup>	Container for groups of table columns
<dd>	Container for a value for the <dt> element
<del>	Container for deleted text
<dfn>	Representation of the defining instance of term
<div>	Demarcation of division in a document
<dl>	Head for an association list
<dt>	Specification for a name in name-value group (description list)
<em>	Emphasized text
<fieldset>	Container for a set of form controls
<form>	Container for a form typically with input elements
<h1> to <h6>	Text header 1 to header 6
<head>	Container for the first code to be interpreted by browser
<hr>	Horizontal rule (line)
<html>	Container for an HTML document
<i>	Italic text
<iframe>	Frame an inline sub window
<img>	Image container
<input>	User-input field within a form container
<ins>	Container for inserted text within implied paragraph boundaries
<kbd>	Container for user keyboard input
<label>	Representation of a caption in a user interface
<legend>	Title in a fieldset border
<li>	List item indicator
<link>	A resource reference (for example, CSS)
<map>	Image map container
<mark>	Text in one context marked for text in different context
<menu>	Container for a list of commands
<meta>	Container for meta information
<object>	Container for embedded object (for example, a SWF file)
<ol>	A numbered (ordered) list
<optgroup>	An option grouping header in an options list
<option>	Container for individual options in a drop-down list
<p>	A paragraph block
<param>	Plug-in parameters
<pre>	Preformatted text format
<q>	Enclosed text with quotation marks
<samp>	Computer code output or snippet
<script>	Container for script for CSS, JavaScript, or another recognized script
<select>	A selectable list
<small>	Small text
<span>	Inline section in a document
<strong>	Strong text that looks like bold
<style>	Container for a style definition
<sub>	Subscripted text
<sup>	Superscripted text
<table>	A table definition
<tbody>	Demarcation for a block of rows for a table’s body
<td>	A table cell
<textarea>	A text area container
<tfoot>	Representation for a block of rows of column summaries for a table
<th>	Table header format
<thead>	Representation of a block of rows of column summaries for a table header
<title>	The document title
<tr>	Demarcation of a table row
<ul>	An unordered list (a bullet list)
<var>	Variable style in formula

Most of the elements with the same names from HTML4 are the same in every way in HTML5, but some have slightly modified meanings. Also, rules for some tags have changed. For example, in creating tables, the tag for specifying a row <tr> no longer requires a closing </tr> tag. Some attributes for elements have changed as well. As you continue to learn about the new features of HTML5, you’ll find that many of the “old” elements have lots of new characteristics. The following HTML table script provides a new example with old elements. Enter this text into your text editor, save it as NewOldTable.html, and open it in an Opera browser.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Table</title>

</head>

<body>

<table>

<caption>

=Element Types=

</caption>

<thead>

<tr>

<th> Type

<th> Text

<th> Graphics

<tbody>

<tr>

<th> UI

<td> text input

<td> button

<tr>

<th> Links

<td> underlined

<td> icon

</table>

</body>

</html>

Figure 3 shows what your table looks like.

Figure 3: A table created with HTML5.

Generally, you don’t use tables for formatting text. Instead, tables are used for formatting data — such as data that’s loaded from a database or created dynamically by another program like JavaScript. In HTML5, though, tables used in conjunction with CSS3 do a bit more formatting than in previous versions of HTML and CSS.

Forgetting or replacing discontinued tags

This final set of tags (see Table 3) is for anyone familiar with HTML4 and earlier versions of HTML. The following tags have been discontinued, either because they posed certain problems or were replaced by other structures that better handled what they used to do.

If you’re new to HTML, you can look at these to get an idea of what to avoid. In working with HTML, you find many samples on the Web, and you’re likely to incorporate them into your own code. However, because HTML5 is so new, you’ll find that most of the HTML was created with earlier versions that may have obsolete tags, and you’ll want to replace them with the newer structures.

Table 3 Discontinued Tags
Deleted Tags	Removed or Replaced
<acronym>	Replaced by <abbr>
<applet>	Replaced by <object>
<basefont>	Better handled by CSS
<bgsound>	Replaced by <audio>
<big>	Better handled by CSS
<blink>	Removed in HTML5
<center>	Better handled by CSS
<dir>	Replaced by <ul>
<font>	Removed in HTML5
<frame>	Removed in HTML5
<frameset>	Removed in HTML5
<isindex>	Replaced by explicit <form>
<marquee>	Removed in HTML5
<multicol>	Removed in HTML5
<nobr>	Removed in HTML5
<noframes>	Removed in HTML5
<noscript>	Only conforming to HTML syntax
<s>	Better handled by CSS
<spacer>	Removed in HTML5
<strike>	Better handled by CSS
<tt>	Better handled by CSS
<u>	Better handled by CSS

One of the most common discontinued tags is <center>, but you can easily center text using a little CSS, as shown in the following example. Type this text into your text editor, save it as CenterMe.html, and open it in your Web browser.

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

h1 {

text-align:center;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Center with CSS</title>

</head>

<body>

<h1>Headers Can Be Centered</h1>

</body>

</html>

All you’re going to see when you test the code in your browser is:

Headers Can Be Centered

It may look like a lot of work to get a simple centered header, but pages are generally short, and you can center any header with an <h1> tag because you’ve changed the behavior of the tag. You can change any tag you want with CSS.