Introducing HTML5 - Creating with Tags : An Overview

12/3/2012 2:27:43 AM
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



Self-contained composition in document


Content tangentially related to content of the article


Sound content container


Graphic development container


A command that the user can invoke


List generator when used with the <input> element and its new list attribute


Discloses details of an element


External interactive plug-in or content


Caption tag for the figure element


Contains a group of media content and their caption


Container for a footer for a section or page


Container for header for a section or page


A heading of a section with multiple h1 to h6 elements in a document


The key pair generator control representation.


A string of text in one document, marked or highlighted for reference in another document


Container for a known range of values (for example, disk use)


Representation of a section of a document intended for navigation


Defines the progress of a task of any kind


Representation of the progress made in a task (such as percentage complete in a download operation)


Indicator in Ruby (a programming language) annotations to define what to show browsers that don’t support the <ruby> element


Marks the ruby text component of a ruby annotation


Element for spans with ruby annotations


Theme identifier for content grouping


Container for multiple specification of media resources


Information on a <details> element


Container for a date/time


Element for linking to a video file


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. 




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





<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”>



<br />




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



A comment


The document type (only one in HTML5)


Hyperlink to a page or page area


An abbreviation


Container for an address


An area inside an image map


Bold text


A base URL for all the links in a page


Direction of text display


A block of text


Beginning a body element


A single line break


A clickable button


A table caption


Container for a citation


Format for computer code text


Defines attributes for table columns


Container for groups of table columns


Container for a value for the <dt> element


Container for deleted text


Representation of the defining instance of term


Demarcation of division in a document


Head for an association list


Specification for a name in name-value group (description list)


Emphasized text


Container for a set of form controls


Container for a form typically with input elements

<h1> to <h6>

Text header 1 to header 6


Container for the first code to be interpreted by browser


Horizontal rule (line)


Container for an HTML document


Italic text


Frame an inline sub window


Image container


User-input field within a form container


Container for inserted text within implied paragraph boundaries


Container for user keyboard input


Representation of a caption in a user interface


Title in a fieldset border


List item indicator


A resource reference (for example, CSS)


Image map container


Text in one context marked for text in different context


Container for a list of commands


Container for meta information


Container for embedded object (for example, a SWF file)


A numbered (ordered) list


An option grouping header in an options list


Container for individual options in a drop-down list


A paragraph block


Plug-in parameters


Preformatted text format


Enclosed text with quotation marks


Computer code output or snippet


Container for script for CSS, JavaScript, or another recognized script


A selectable list


Small text


Inline section in a document


Strong text that looks like bold


Container for a style definition


Subscripted text


Superscripted text


A table definition


Demarcation for a block of rows for a table’s body


A table cell


A text area container


Representation for a block of rows of column summaries for a table


Table header format


Representation of a block of rows of column summaries for a table header


The document title


Demarcation of a table row


An unordered list (a bullet list)


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.




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






=Element Types=




<th> Type

<th> Text

<th> Graphics



<th> UI

<td> text input

<td> button


<th> Links

<td> underlined

<td> icon




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


Replaced by <abbr>


Replaced by <object>


Better handled by CSS


Replaced by <audio>


Better handled by CSS


Removed in HTML5


Better handled by CSS


Replaced by <ul>


Removed in HTML5


Removed in HTML5


Removed in HTML5


Replaced by explicit <form>


Removed in HTML5


Removed in HTML5


Removed in HTML5


Removed in HTML5


Only conforming to HTML syntax


Better handled by CSS


Removed in HTML5


Better handled by CSS


Better handled by CSS


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.




<style type=”text/css”>

h1 {




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

<title>Center with CSS</title>



<h1>Headers Can Be Centered</h1>



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.

Most View
Spring Is Here (Part 2)
Is 802.11ac Worth Adopting?
BlackBerry Z10 - A Touchscreen-Based Smartphone (Part 1)
LG Intuition Review - Skirts The Line Between Smartphone And Tablet (Part 5)
Fujifilm X-E1 - A Retro Camera That Inspires (Part 4)
My SQL : Replication for High Availability - Procedures (part 6) - Slave Promotion - A revised method for promoting a slave
10 Contenders For The 'Ultimate Protector' Crown (Part 3) : Eset Smart Security 6, Kaspersky Internet Security 2013, Zonealarm Internet Security 2013
HTC Desire C - Does It Have Anything Good?
Windows Phone 7 : Understanding Matrix Transformations (part 2) - Applying Multiple Transformations
How To Lock Windows By Image Password
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular Tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Top 10
OPEL MERIVA : Making a grand entrance
FORD MONDEO 2.0 ECOBOOST : Modern Mondeo
BMW 650i COUPE : Sexy retooling of BMW's 6-series
BMW 120d; M135i - Finely tuned
PHP Tutorials : Storing Images in MySQL with PHP (part 2) - Creating the HTML, Inserting the Image into MySQL
PHP Tutorials : Storing Images in MySQL with PHP (part 1) - Why store binary files in MySQL using PHP?
Java Tutorials : Nested For Loop (part 2) - Program to create a Two-Dimensional Array
Java Tutorials : Nested For Loop (part 1)
C# Tutorial: Reading and Writing XML Files (part 2) - Reading XML Files
C# Tutorial: Reading and Writing XML Files (part 1) - Writing XML Files