HTML5

HTML5 logo

Elements That Are New in HTML5

HTML5 allows us to skip using a bunch of divs with IDs to define the page content areas in our web pages. Instead, we have a host of new tag names to use.

Element Function
<article> Defines an article. There can be multiple articles on the page.
<aside> Defines content aside from the page content, such as a sidebar. There can be multiple asides on the page.
<footer> Defines a footer for a document or section. There can be multiple footers; for example, one for the page, one for the article, and one for the sidebar.
<header> Specifies an introduction, or a group of navigation elements, for a document. There can be multiple headers; for example, one for the page, one for the article, and one for the sidebar.
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels.
<nav> Defines navigation links. There can be multiple navs on the page.
<section> Defines a section in a document which is not a header, footer, article, or aside. There can be multiple sections on the page.

Do we still use <div>? Sure, use it for bits of content you want to style but which aren’t really page content blocks, per se.

XHTML Markup for Page Structure vs. HTML5

Here’s a quick comparison of how the markup would differ from XHTML to HTML5. I’ve left out any content so we can see just the structure.

XHTML Markup Example
XHTML Markup Example
HTML5 Markup Example
HTML5 Markup Example

Notice two other major changes in HTML5:

  • The doctype definition is simply <!DOCTYPE HTML>.
  • No more clutter in the open <html> tag.

How Does This Change Our CSS?

When using HTML5, you are using a lot fewer IDs in your markup. So you’ll see fewer # signs in the CSS. Instead, you define what’s going on in the new page content area elements. Here’s a quick comparison:

CSS for html5 and xhtml comparison

Getting Older Browsers to Play Along

All of the newest browsers support HTML5 to some degree. Unfortunately, many older ones do not—in particular, Internet Explorer 8 and older. So we have a work around.

FIRST, in the CSS define all the new elements as block elements. Otherwise, any elements the browser does not recognize are interpreted as inline.

HTML5 css define html5 elements as display block

SECOND, use a bit of JavaScript to implement the new elements fully. Right-click on the file linked below and save it into a folder in your root folder named js (for JavaScript.)

html5.js

THIRD, link to the JavaScript file inside the head of your html file. It will call the JavaScript only if Internet Explorer (version 8 or older) is accessing the page.

link to JavaScript file for HTML5 in Internet Explorer 8 and older

CSS3

CSS3 is the latest standard for CSS. It has much broader support among the browsers than does HTML5.

CSS2 already has some very advanced selectors for pinpointing specific areas in your markup for styling. CSS3 goes even further with these advanced selectors. For example, you can select for a p tag with a title attribute containing specified letter strings.

The 30 CSS Selectors you Must Memorize

Vendor Prefixes

One thing to keep in mind is that many browsers were coming up with their own properties like border-radius and box-shadow long before those properties become part of the W3C recommendations. This kind of innovation is what drives advances in the W3C specifications, not the other way around.

So what happened is that in earlier versions of Firefox, Chrome, Opera, and Safari, they had their own vendor prefixes at the beginning of the property names, and each browser might have a slightly different implementation of the property.

The latest versions of these browsers now support the W3C names of the properties, but the older ones (such as Firefox 3) may still need the original vendor prefixes.

For example, this is how we get border-radius to work in both older and newer versions of browsers:

-moz-border-radius: 10px; // Firefox
-webkit-border-radius: 10px; // Safari and Chrome
-o-border-radius: 10px; // Opera
-ms-border-radius: 10px; // Microsoft (Internet Explorer)
border-radius: 10px; // all modern browsers, including IE

We put the shorter, W3C-defined property name last in the list so that it will override the earlier implementations in newer browsers.

Progressive Enhancement

In the past, web designers worrying about cross-browser compatability used the term graceful degradation to refer to giving the latest and greatest browsers the full-course meal experience while tossing a few scraps to the sad folk unfortunate enough to be using older browsers.

Nowadays we use the term progressive enhancement to refer to a focus on the content and its accessibility. The content forms the solid base on which you layer your style and interactivity. You already know that you should be separating your content from your markup (HTML structure) and from your presentation (CSS).

In the progressive enhancement approach, you define your content first, then develop an appropriate structure for it. After that, you layer on the CSS presentation, starting with the basics which all browsers support, and enhancing it with CSS3 for browsers that are the latest versions. On top of everything else, you might bring in some JavaScript interactivity.

But if all the CSS and JavaScript fail to work for some reason (or is disabled in the browser), users can still get at the content in a way that is clearly organized because the most semantic markup has been employed. Or looking at it another way, the more modern the browser is, the more the user will get out of the visual and interactive experience. But everyone has access to the content.

It’s really just a matter of perspective, but your approach can make a big difference in your code, your search engine optimization, and ultimately in the user’s experience. Progressive enhancement does more than just pay lip service to older browsers.

Core Principles of Progressive Enhancement
  • basic content should be accessible to all web browsers
  • basic functionality should be accessible to all web browsers
  • sparse, semantic markup contains all content
  • enhanced layout is provided by externally linked CSS
  • enhanced behavior is provided by unobtrusive, externally linked JavaScript
  • end-user web browser preferences are respected

Cool New CSS3 Properties and Values

Want a quick way to just plug in the property and values you want and have someone else write the code for you? Try the CSS3 Generator. You’ll find it’s great for most of what is covered in this lesson.CSS3 Generator

Design Principles

Alignment

  • Everything should align with something else along at least one edge
  • Avoid center alignment
  • Don’t mix alignments (use a grid)
  • Margins and padding add white space
  • White space is your friend

Proximity

  • Things that go with each other should be closer to each other than things that don’t go together
  • Spacing has meaning; it implies relationships
  • Reinforce those connections with ALIGNMENT for a double-whammy
  • Provide WHITE SPACE to give the eye some rest

Repetition

  • Repeat some aspect(s) of the design
  • Creates UNITY (the sense that all the parts create a unified whole)
  • Helps identify navigation, heading levels, and overall organization
  • Aids usability (visitors don’t need to learn new structure from page to page)
  • Requires design guidelines and discipline

Contrast

  • If two things are different, make them VERY different
  • Contrast can be created with color, size, scale, texture, value, motion, dimension
  • Creates a focal point – helps define what is most important
  • If you emphasize everything, you emphasize nothing

Spelling and Grammar

Bad spelling and grammar can destroy all you’ve achieved with good design.

12 Tips for Web Usability

The following is a summarized list of tips for making web sites usable. They come from the legendary book about web design usability, “Don’t Make Me Think” by Steve Krug.

  1. Don’t make your visitors have to think. A web page should be self-evident, obvious, self-explanatory.
  2. Recognize that visitors don’t read pages. They scan them, and they muddle through.
  3. Create a clear visual hierarchy.
    fox-news
  4. Use conventional methods of organizing content (predictability is your friend).
  5. Break up pages into clearly defined areas.
  6. Make it obvious what’s clickable.
    colourlovers
  7. Keep visual noise to a minimum.
  8. Omit needless words.
    rememberthemilk
  9. Create street signs and breadcrumbs in your navigation. On any page, a visitor should be able to answer these questions:
    • What site is this?
    • What page am I on?
    • What are the major sections of the site?
    • What are my options at this level?
    • Where am I in the scheme of things?
    • How can I search?

    adobe

  10. Your home page must convey “the big picture” for your visitors:
    • What is this?
    • What do they have here?
    • What can I do here?
    • Why should I be here-and not somewhere else?
    • Where do I start?

    bestbuy

  11. Nothing beats a good tagline.
    ehow
  12. Don’t design for a mythical “average user.” Test your site with real, ordinary people.