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.
|<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
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:
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.
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.
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.
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).
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
- 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
- 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
- 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
- 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
- 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.
- Don’t make your visitors have to think. A web page should be self-evident, obvious, self-explanatory.
- Recognize that visitors don’t read pages. They scan them, and they muddle through.
- Create a clear visual hierarchy.
- Use conventional methods of organizing content (predictability is your friend).
- Break up pages into clearly defined areas.
- Make it obvious what’s clickable.
- Keep visual noise to a minimum.
- Omit needless words.
- 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?
- 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?
- Nothing beats a good tagline.
- Don’t design for a mythical “average user.” Test your site with real, ordinary people.