How to Make All Browsers Render HTML5 Mark-up Correctly - Even IE6. HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we'll create a common layout using some of HTML 5's new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer.
Yes, even IE 6. Tutorial Details Technology: HTMLVersion: 5Difficulty: IntermediateEstimated Completion Time: 1 hour Prefer a Video Tutorial? The HTML 5 Working Draft provides a new set of semantically-meaningful elements for describing a typical web page layout. The HTML 5 elements we'll be using are: headerfooternavarticlehgroup Just by reading the names of the elements, you should get a pretty good idea of what they're for, and that's the point! The one element that may not be obvious is <hgroup>. Step 1: The HTML We're going to recreate the most common layout on the Web, the 2-column layout: The article element. We’ve discussed a lot of new elements here at HTML5Doctor, but the article element has somehow escaped the microscope… until now! Article is one of the new sectioning elements. It is often confused with section and div but don’t worry we’ll explain the difference between them.
What the spec says Thankfully, the spec is short and sweet: The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. In addition to its content, an <article> element typically has a heading (often in a header element), and sometimes a footer. The smell test for going independent An independent piece of content, one suitable for putting in an <article> element, is content that makes sense on its own.
Examples of <article> in use A bare-bones <article> <article> <h1>Apple</h1> <p>The <b>apple</b> is the pomaceous fruit of the apple tree... Summary.
Microformats. The W3C CSS Validation Service. World Wide Web Consortium (W3C) The W3C Markup Validation Service.