Learn what tables do best: display data.

HTML and CSS | Building HTML Tables and Introducing HTML5

Building HTML Tables and IntroducingHTML5

This lecture is a blend of the old and thenew, exploring an old standby in HTML, aswell as the latest innovations of HTML5.

Originally devised to display data, HTMLtables were used by Web designers of the1990s (and beyond) as a way to lay outWeb pages. Today, good designers do all oftheir layout with CSS (which we'll explorelater in the course), and HTML tables areback to their first and best use: datarepresentation.

We'll explore the tags and attributes used to represent tabular data—thekinds of facts and figures you see in an Excel document or on an e­commerce price list. Learning to create HTML tables also teaches usefulcode writing skills, including accurate tag nesting.

Once you've got your bearings in table creation, we'll switch gears to someof the latest news in Web design: HTML5. HTML5 builds on the HTML codeyou already know to add new features and usability. In this lecture, we'lllook at how an HTML5­based page is structured, and later in the course,we'll add fancy HTML5 features.

In this lecture, you canexpect to:

Learn the history andpurposes of the HTML tablein Web design. Learn how to accuratelycode an HTML table. Learn how to customize atable by modifying rows,columns, dimensions,spacing, borders, andbackground. Explore the purposes ofHTML5. Learn how to structure abasic HTML5 document.

The original purposeof the HTML table wasto represent tabular

data: facts and

Tables on the Web

Anyone familiar with Excel or any other spreadsheet application knows aboutworking with tabular data. Tables map out our personal budgets, beautify ourcalendars, and make sense of our most complicated statistics.

Places Compadres Witches Misc

Yellow BrickRoad

Scarecrow Glinda the Good Munchkins

Emerald City Tin Man The Wicked Witch ofthe West

Deadly PoppyFields

Behind thecurtain

Cowardly Lion The Wizard FlyingMonkeys

HTML, conveniently enough, is rich with tags and attributes to let yourepresent complex tabular data with great aplomb.

In the first part of this lecture, we will cover how to use HTML to create andcustomize tables.

Brief HTML Table History

Until recently, HTML tables were used not only to organize tabular data, butto create page layouts as well. Prior to the popularization of CSS techniquesthat allow you to create page layouts with elegance and ease, Web designers

figures!

HTML tables were co­opted by Web

designers of the 1990sas a structure for pagelayouts. This practicehas since become ano­no and has been

replaced with CSS forlayout.

used tables to position and size sections of a Web page.

Using tables for layout is not only semantically incorrect (as page layouts arenot the intended purpose of tables), but they are inferior to modern CSSlayout techniques. Recall the importance of separating content frompresentation: using tables for layout purposes blatantly integratespresentation within the HTML content of a page.

Tables are still occasionally used for layout, mostly by designers who don'tknow any better. We will not cover table layouts in this lecture. (It's just badpractice.) We will, however, cover CSS methods for page layout.

We'll focus on the true purpose of tables: to display data. The tags andattributes we're going to learn in this lecture are as follows:

Element Tags Attribute Value

Table <table></table> Colspan colspan

Tablehead

<thead></thead>

Rowspan rowspan

Tablebody

<tbody></tbody>

Align left, center,right, or justify

Table row <tr></tr> Width width

Tableheadercell

<th></th> Border border,bordercolor

Table data <td></td> Frame void, above,below, hside,vsides, lhs, rhs

Caption <caption></caption>

Cellspacing cellspacing

Summary <summary></summary>

Cellpadding cellpadding

Scope scope

Creating a Basic TableLet's examine a simple table on a Web page. Imagine we need to create atable that displays the price of different brands of tea for a client. Often you'llreceive such information in an Excel or Word document like this:

Table content delivered in Word format

Download the lesson2 folder here, and open the tea.html file in the tea folderwithin. I've included the basic tags we learned in Lecture One but left the

The HTML table has astrict nesting

structure: content iswrapped in data cells,which are wrapped in

rows, which arewrapped in table bodyor table header tags.

There are no tablecolumn tags. Instead,table rows tags create

each row.

It's good practice touse table body andtable header tags.

table data without markup. Note that the text within the table tags may notappear in a browser or Dreamweaver Design view until the table code hasbeen completed. (Please ignore the outrageous prices for tea; they havebeen exaggerated for the purposes of demonstrating table cell alignmentlater on!)

Let's now look at how to create an HTML table for this data. We'll add thesetags one at a time. Remember to always use closing tags.

1. Define the table: <table>

The <table> tag defines the table as a whole. Create a one­pixel border tothe existing <table> tag by adding the border attribute to the opening tag:<table border="1">

2. Specify the table head and table body: <thead> <tbody>

When a table has a header such as a row of category names, add the<thead> tag to one or more rows as the table header, then use the <tbody>tag to wrap the table body (as distinct from the table header).

3. Define the table rows: <tr>

Next, add table row tags <tr> at the beginning (and end) of each table row.This tag wraps groups of individual table cells. First you define a row, andthen you add the enclosed cells. (Note that no tag exists for a table column.)

4. Define individual cells: <th> and <td>

Use the <th> tag for each cell you want to designate as a table header cell(here, this includes Item, Description, Price). This can be the head of a rowor a column. The specific cell content should be enclosed in the tag. Bydefault, browsers bold the text in header cells.

Use the <td> tag for table data. It marks out individual cells in a table. Likethe <th> tag, it wraps specific cell content.

Done? In a browser, your table should look like this:

Click here to compare your code with mine.

To review, the tag nesting structure of a table is as follows:

1. Table header <thead> and table body <tbody> tags go insidetable tags <table>

2. Table rows <tr> always go inside table header tags or tablebody tags as appropriate

3. Table header cell <th> and table data <td> tags always go

Use <tableborder="1"> tocreate a one­pixel border

that makes thetable visible.

Colspan or rowspanattributes can be used

to make cells spanseveral columns or

rows.

inside table rows

4. Cell data always goes inside table cell header <th> or tabledata <td> tags

For example:

<table border="1"> <thead> <tr> <th>Header row</th> </tr></thead> <tbody> <tr> <td>Data row 1</td> </tr><tr> <td>Data row 2</td> </tr></tbody> </table>

As you can see, making a basic table is pretty simple. But to see howversatile the HTML table really is, let's customize it.

Customizing TablesSpanning Multiple Columns and Rows

There may be instances in which you want to merge two or more cellstogether so that they span multiple columns or rows. For example, maybeyour table header is a single cell that spans the columns below it like this:

Wizard of Oz

Places Compadres Witches Misc

Yellow BrickRoad

Scarecrow Glinda the Good Munchkins

Emerald City Tin Man The Wicked Witch ofthe West

Deadly PoppyFields

Behind thecurtain

Cowardly Lion The Wizard FlyingMonkeys

You can achieve this effect with HTML using the colspan and the rowspanattributes.

<colspan> Apply the colspan attribute when you want acell to span two or more columns.

<rowspan> Apply the rowspan attribute when you wanta cell to span two or more rows.

Both the colspan and rowspan attributes take a number (the number of rowsor columns to span) as a value. For example, <tr colspan="3"> or <throwspan="3">.

Let's try it out. Say we wanted to add a column to our table that categorizedthe types of teas listed, dividing them into black and white teas, like so:

Add the colspan orrowspan attribute tothe table cell in whichyou wish the span to

begin.

Colspan orrowspan are

tricky tovisualize and

easy to mess upat first.

Use attributes

Item # Description Price

Black Teas A01 Darjeeling $28.00

A02 Breakfast Tea $124.50

A03 Earl Grey $2,000.50

White Teas A04 White Tip $8.50

To do this, add an extra table header tag at the beginning of the first of thethree rows you want to span. The value "3" indicates that it will span threerows.

<th rowspan="3">Black Teas</th> <td>A01</td> <td> Darjeeling </td> <td>$128.00</td>

Also remember to add an empty cell at the top left and an additional tableheader tag for "White Teas":

<tr> <th>White Teas</th> <td>A04</td> <td>White Tip</td> <td>$8.50</td> </tr>

It is rendered like so:

Setting Alignment

You can set the alignment for content in a cell or row using the align andvalign attributes.

Align sets the horizontal alignment of a cell, and takes one of four values:left, center, right, or justify.

Try right aligning the numbers in the "Price" column. Edit each cell like so:

<td align="right">$28.00</td>

Next, try to center all the elements in a row:

<tr align="center">

Valign sets the vertical alignment for a cell or row. It takes one of four

to align thecontent in tablecells or rows.

Specifying the widthof a table cell or rowas a pixel value can

give it fixeddimensions. Using apercentage value canmake the table fluid.

values: top, middle, bottom, or baseline (in which the first line of text in thecell shares a common baseline with the other cells in the row).

Here, the text in the left cell will sit at the top of the cell:

<th rowspan="3" valign="top">Black Teas</th>

Below, we've adjusted the table so that the cells in the first column arevertically aligned to the top, and the cells in other columns are aligned to thecenter:

Fluid vs. Fixed Tables

Thus far, our HTML tables have sized to the width of the content inside them.If you need a different size, you can define the width of a table, or anindividual column, using the width attribute. The attribute can take anumber or a percentage as a value.

Add this attribute to the table tag to make your table 200 pixels wide:

<table border="1" width="200">

You can also define the width of a column by applying a width to any cell inthat column:

<td width="50">Darjeeling</td>

Note that the entire column will be 50 pixels wide, not just that one cell.

Both of these examples demonstrate the creation of a fixed table. A fixedtable is one that has a determined width, regardless of the size of thebrowser window. Alternatively, you can create a fluid table, where the widthof the table shrinks or stretches with as the browser window changes size.

Create a fluid table by using percentages for the width value:

<table border="1" width="75%">

You will end up with a table that is 75% the width of the browser window:

Borders andbackgrounds can beapplied to tables to

affect thepresentation.

You need not use only"Web­safe" colors inyour page designs;almost every Web

user has a screen thatcan display millions ofcolors. But the Web­safe colors do offer agood starting point inyour color selection.

As the browser window stretches and shrinks, so will the table:

If you set a column to, say, 50%, then that column will be 50% of the totaltable width. Try it!

The advantage of the fluid layout is that it makes ideal use of screen realestate, and prevents the user from having to horizontally scroll in case thetable is wider than the browser window. The disadvantage to this method isthat it may present the table in a way that is not ideally readable (if the tableis smooshed very narrowly or stretched very wide).

Adjusting Borders and Background

Our table is legible enough, but it still looks a bit stark and boring. Let'sadjust some of the aesthetic elements to make it look a little better.

First, let's change the borders and frame. By default, tables are displayedwithout frames, though we've already added a 1­pixel border to delineate thecells more clearly.

Let's make our border 2 pixels thick and also change the color to a lightgray:

<table border="2" bordercolor="#cccccc">

The border attribute takes a number as its value (indicating how thick it is,in pixels), while bordercolor takes a hexadecimal color as its value.

Hexadecimal colors are six digits or letters that indicate a specific color toyour HTML or CSS. The cccccc you see above, after the pound sign, is ashade of light gray. A chart of the most common or "Web­safe" colors can befound here via december.com, and more colors can be found here onWikipedia. You'll notice that some colors can also be represented with threedigits or letters (#ccc), or with a word indicating the color name, such asblack or gray.

It's recommended that you stick with white, gray, and black as you buildyour tables until you get more comfortable with designing.

Let's remove the "frame" that surrounds the entire table:

Cellpadding andcellspacing attributesgive the table content

breathing room.

<table border="2" bordercolor="#cccccc" frame="void">

Now our table looks like this:

Adjusting SpacingNow, let's change some of the spacing in the table. There are two relevantattributes: cellspacing, which determines how much space there is betweencells, and cellpadding, which determines how much space there is betweenthe border and the content of the cell.

Here is our table with 10 pixels of cell spacing:

While here, we've added 10 pixels of cell padding:

But for the purposes of our table, we are going to set the cellspacing to 2,and add a bit of padding (5 pixels):

<table border="2" bordercolor="#cccccc" frame="void" cellspacing="2" cellpadding="5">

The table still looks a little dry. Let's add some color. You can add abackground color to the entire table, or any row or cell using the bgcolorattribute. This adds a light gray color to a table row:

<tr bgcolor="#eeeeee">

This adds the same color to a row header cell.

<th rowspan="3" valign="top" bgcolor="#eeeeee"> Black Teas</th>

If we add a background color to our header row and header cells, we get thefollowing:

Notice here, and whenever working with bordered tables and tablebackgrounds, that the result may be a little different depending on thebrowser. The above result comes from Firefox, while the result below comesfrom Safari:

This makes our headers stand out a bit more.

To wrap the tea site up, let's add a quick CSS document I've created, whichwill format our text and other visuals:

<head> <title>Online Ordering</title> <link rel="stylesheet" type="text/css" href="css/tea.css"> </head>

Ready to review the process of creating and customizing HTML tables? See ithappen from start to finish in this video tutorial:

Tables can be nestedwithin tables, though

this can createproblems for codersand devices alike.

The more specific thedata (displaying stockreports on your cellphone, for example),the more likely that

additional tableattributes may be

required.

Special TablesData Tables

When you think of a table, you generally think of a data table: a grid usedto organize and display data. The example we've been working with so far isa data table. Thile the table we've created is simple enough to be understoodand deciphered as is, you may be asked to create very complex data tablesthat may need more work to make them optimally usable.

A complicated data table at nationmaster.com.

Tables can be particularly difficult for users that use screen readers. Thoseusing standard browsers can just glance at a table as a whole and get some

00:00 / 00:00

Creating HTML Tables

idea of what the table is about, what kind of data it contains, and how thatdata is related. Screen readers, however, read off a table cell­by­cell, line­by­line, and unless explicit connections are drawn using tags, a screenreader will not convey how certain cells (such as header cells) are related toother data.

There are, however, additional tags and attributes that you can use toprovide more meaning to content presented in tables. These additional tagscan make tables much more accessible to users with screen readers as wellas more readable and useful in standard browsers.

Let's take a look at some of these tags and attributes:

<caption>: Use the caption tag to provide a brief description ofthe table. The browser displays the caption by centering it abovethe table.

<summary>: Use the summary tag to provide a more detaileddescription of the table's contents. The summary is not displayedby the standard browser, and is mainly for the benefit of screenreaders. People using screen readers cannot glance at the tableas a whole to get an idea of what it contains, so providing asummary gives those users the benefit of having an overview ofthe table's contents.

scope: You can use the scope attribute to associate header cellswith the rows or columns that they head. e.g., <thscope="col">Item #</th> indicates that this cell heads acolumn, while <th scope="row">White Teas</th> indicates thatthis cell heads a row. Now, a non­visual browser knows whatheader cells to associate with which data.

<thead>, <tfoot>, and <tbody>: As mentioned earlier, youcan also carve out headers, footers, and body sections of a table.You can, for example, enclose all of your header rows within the<thead> tag, and the remaining rows with the <tbody> tag.Doing this does not, by itself, alter the way that the table isdisplayed. But, some browsers have the capability to print theheaders and footers on every page if the table spans more thanone page. Mozilla has the capability of scrolling the table bodyindependently of the headers and footers (so that if you have avery long table, you can set it up so that the headers and footersremain stationary while the rest of the table scrolls inside of it).

To show you how these tags work, click here to see the code for a basic tableshowing iPod specifications. Most of the content has been stripped away tofocus on presenting where these additional attributes should be placed.

Image Slice Tables

Image slicing is the process of taking a large image and dividing it up intosmaller images using your favorite image editing program. Then you canreconstitute the entire image by placing the image slices within a table.

Why would you want to slice up an image? You can create a link, rolloverimage, or other HTML event that applies to part of an image. Or you maywant to apply different file optimization settings to one part of an image. Soyou could, for example, create an image that can be turned into a navigationmenu by making certain parts of the image link to other parts of your Website.

There are quite a few tools available that let you easily slice up your imagesand even create the table that pieces the images back together. We won't gointo the details of using these tools here, as instructions vary according tothe tools that you use.

You can slice images in Photoshop, as shownabove, then export the individual pieces usingwhatever settings you like for each piece.

Photoshop generated the following HTML code, but as you can see, it's nodifferent than what you could have created yourself. Notice that the table hasno padding, no spacing, and no border, so that the images will cometogether seamlessly in the page, looking like a single image. The width andheight are equivalent to the images inside, so there is no extra space.

<table id="Table_01" width="492" height="746" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="2"> <img src="images/sliced_01.jpg" width="101" height="746" alt=""> </td><td colspan="2"> <img src="images/sliced_02.jpg" width="391" height="273" alt=""> </td></tr><tr> <td> <img src="images/sliced_03.jpg" width="264" height="473" alt=""> </td><td> <img src="images/sliced_04.jpg" width="127" height="473" alt=""> </td></tr></table>

So now that you've got a sense of tables, one of the longest­running andmost useful features in HTML, we'll switch gears to one of the newestinnovations in coding...

Introducing HTML5The True Successor to HTML 4

HTML5 offers excitingnew features andsome flexibility in

writing code.

Don't forgetyour usual HTMLtags—like html,head, and table—when working

in HTML5!

HTML5 hearkens a radical departure from the HTML 4 you have learned sofar, as well as from XHTML.

XHTML (a mixture of HTML and XML) was once billed as the successor toHTML 4, the previous standard in Web languages. HTML 4 was not verydemanding in how its code was formed, and browsers were designed to bevery forgiving of mistakes. Browsers would try to render buggy pages thebest they could. XHTML was developed with much stricter syntax rules. Foran XHTML page to be considered "valid," it had to abide by many rigidguidelines. For example, you couldn't capitalize your element tags and youhad to close all open tags.

HTML5 loosens the rules again, but does so by employing simpler language(such as for many of the header elements). Overall, this makes coding easierfor Web designers (meaning fewer lazy mistakes!), and more lax validationrules for HTML5 documents (which, again, makes for less of a headache forus). It includes many welcome HTML elements, which is expected, but it alsomakes the language easier and the syntax more forgiving. Check outhttp://studio.html5rocks.com to see a few of the great things HTML5 can do.

What does this mean for HTML 4? Well, nothing really! You can still use theHTML 4 Doctype for your Web pages, code to that specification, and beperfectly right with page validators, your browser, and the world at­large.

However, we can move forward and adopt additional semantic HTMLelements like header, nav, footer, and other cool stuff in HTML5 while stillutilizing all of the basic concepts of semantic markup that HTML 4 gave us.But now with the HTML5 specification, we have a markup language thatbetter reflects the kind of Web we use and code for every day.

Let's create a simple HTML5 document that uses some of the new elements.Then in the next lecture, we'll try some of the really fancy new features.

Setting the DOCTYPE, Charset, and Language for HTML5

Open the the healthy.txt file inside your download folder. This documentcontains the text for our simple HTML5 example. Start a fresh HTMLdocument and follow along.

The doctype declaration could not be simpler for HTML5. Include thefollowing as the first line of your HTML document, as you always would for adoctype declaration:

<!DOCTYPE html>

Gone are the long and cryptic doctype declarations of the past; HTML5requires a mere two words to start rendering your Web page in standardsmode.

Now add your usual <html>, <head>, and <title> tags to the document.

The character set encoding for HTML5 is also much simpler. For the standardUTF­8 encoding, include the following in your head:

<meta charset="utf-8" />

Don't forget to set the default language of your document as well. This line isnecessary for the browser to use the correct font, spell checker, and so on.Include it in the <html> tag and set it to English:

<html lang="en">

Structural Elements (Header, Footer, Section, Nav)

Section elements inHTML5 eliminate theneed for specially

named div tags thatwere required in

XHTML.

Use the footerelement foryour site'scopyright

information.

HTML5 includes several new elements that add semantic value to thestructure of a Web page. When structuring a page in XHTML, you needed toenclose the header, footer, navigation, and so on with separate <div> tags,and then label those <div> tags with meaningful id values like "header" and"nav". (Note that <div> tags still play an important role in HTML, but we'lltalk about them later in the course in conjunction with CSS.)

In HTML5, most of those structural pieces are their own element now, whichnot only makes it simpler to code, but also makes it easier for Web browsersand search engines to make sense of the content on a page. These elementsdon't make your page look any different (unless you style them with CSS, aswe'll learn in detail later), but rather they define sections of the code.

Defining a section heading: <header>

The header element defines a section heading of a page. The first line in yourdownloaded file is our section heading. Use the header element and an h1heading to define it.

<header> <h1>How to Eat Healthy on a Budget</h1> </header>

Note that a header element is not uniquely reserved for the top of the Webpage. And, unlike <div> elements, you can use headers more than once inan HTML document. Any section of a Web document that is titled can have itsown header (as well as its own footer and navigation section as well).

This brings us to the more generic <section> element...

Defining a generic section: <section>

The <section> tag defines a section within a Web document. Nearlyanything that would naturally have its own header could be delineated as asection (except for syndicated content like blog posts, which would use the<article> element instead).

The healthy eating steps in your download file should go in their own section,along with their own headers. For example:

<section> <header> <h1>Step One: Plan Your Meals</h1> </header> ... </section>

Note that with HTML5, the rules for using <h1> to <h6> tags have changed:In previous versions of HTML and XHTML, these tags were used to definedocument sections, and a document hierarchy was outlined by the correctuse of these elements: You were to always use them in correct order (<h2> isalways followed by <h3>, and so on), and you could only use <h1> once.

Now, we can define a document hierarchy by nesting section elements. And,we enclose the title of each section in the <h1> tag. So, as you can see in ourexample page so far, there will be multiple <h1> tags within an HTMLdocument, but they will each be within the context of their own section.

Defining a footer section: <footer>

The <footer> tag encloses elements that end sections of a page. Footerstypically include information such as the author, copyright information, andrelevant links. Like the other elements mentioned here, you can have morethan one footer on a page: You can include a footer with each section withina document.

Add the remaining text for the page as a footer.

<footer> <p>Copyright 2010<p> <p>Email me at <mailto:imdandy@gmail.com> imdandy.com</a>.</p> <p>Find me on <a href="http://twitter.com/imdandy"> Twitter</a>.</p> </footer>

Defining a navigational section: <nav>

The <nav> tag carves out navigation sections. Use this element, as you mightexpect, to delineate lists of links that take you to other sections of the site:

<nav> <ol> <li><a href="/home/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/contact/">Contact Me</a></li> </ol> </nav>

Like the other new elements in HTML5, you can include more than one <nav>section within a Web page. For example, you might have a navigation menuat the top of the page, as well as a set of navigational links in the sidebar.

Defining subheadings

As we discussed earlier, HTML5 is a living standard, and that means thatsome things come and go. Here's a case of that: there is currently nodedicated HTML5 markup for defining groups of headings. So if you'relooking, for example, to define a title and subtitle of a section, you have tothink carefully about the semantic roles of those headings to ensure thatyour code remains valid.

If your subtitles define new sections, as in a table of contents, you'll want touse <h1> to <h6> elements.

If your subtitles simply define further descriptions of a title, you can enclosethem in a <p> element in the line below your numbered header element(such as <h1>). For example:

<section> <header> <h1>How to Eat Healthy on a Budget</h1> <p>Five Tips for Wise Eating without Going Broke</p> </header> ... </section>

For more information and up to date resources on all things subheadingrelated, see the subheadings section of the W3 specs.

Putting It All Together

Our sample page combines all of the elements above in a document thatshould look something like this:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>How to Eat Healthy on a Budget</title> </head>

HTML5 isn'tsupported byolder versionsof IE. Use the

JavaScriptModernizer toautomaticallymake your

HTML5compatible.

<body> <nav> <ul> <li><a href="/home/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/contact/">Contact Me</a></li> </ul> </nav> <header> <h1>How to Eat Healthy on a Budget</h1> <p>Five Tips for Wise Eating without Going Broke</p> <p>By Mike Pendleman</p> </header> <section> <header> <h1>Step One: Plan Your Meals</h1> </header> ... </section> <section> <header> <h1>Step Two: Stick to Your Grocery List</h1> </header> ... </section> <section> <header> <h1>Step Three: Frequent Your Farmer's Market</h1> </header> ... </section> ... <footer> <p>Copyright 2010</p> <p>Email me at <a href="mailto:imdandy@gmail.com"> imdandy.com</a>.</p> <p>Find me on <a href="http://twitter.com/imdandy"> Twitter</a>.</p> </footer> </body> </html>

After the requisite <head> of our document, we've included a navigationmenu, a page header, several sections (along with their own headers) and afooter. While a fairly simple document, you can appreciate the semanticorganization that HTML5 brings to our Web page. Our page is divided intomeaningful sections that we can style with CSS, and that search engines or aWeb client can easily parse.

Note on HTML5 Support

While modern browsers support the HTML5 syntax, the older versions ofInternet Explorer don't. In order to support HTML5 in those browsers, aspecial JavaScript needs to be inserted at the top of the document to forcethe acceptance of these new HTML elements.

Thankfully, this can be done with a very handy JavaScript library calledModernizr, which requires no JavaScript knowledge. To use it, first downloadthe Modernizr JavaScript library (click the Development version and go toFile > Save Page As in your browser to save the JS file) and put it in afolder for your Web page or Web site; I like to have a folder called "js" formy JavaScript files. Then add the line of code below to your page head,adjusting the link path as needed for the folder you've chosen and for the filename of your version of Modernizr.

<script type="text/javascript" src="/-/js/modernizr-2.0.3.js"></script>

Make sure that you upload the .js file to the correct location on your server.Just like an image or link, it won't work if it is pointing to the wrong location.

That's it! The Modernizr script does some cool things, which we will cover inother lectures, but for now, that's all you need to get your HTML5 supportedin IE.

Learn how HTML5 haschanged the use of audioand video on the Web. Learn how to addmultimedia using the audioand video tags. Explore attributes andscripts that that customizemultimedia presentationand aid in browsercompatibility. Learn guidelines fortesting and validating aWeb page as well as fixingbroken links and images.

Discussion Share your thoughts and opinions with other students atthe Discussions Board.

ExerciseCombine tables and HTML5 to create a Web calendar.