What Does It All Mean?
1. In Activating Browser Modes with Doctype , Henri Sivonen summarizes the different modes browser will work in based on the doctype:
Quirks Mode
In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s.
Standards Mode
In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. HTML5 calls this mode the “no quirks mode.”
Almost Standards Mode
Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “Almost Standards mode,” that implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. HTML5 calls this mode the “limited quirks mode.”
2. This is the HTML5 doctype:
<!DOCTYPE html>
which is shorter and sweeter and also triggers “standards mode” in all modern browsers.
3. Elements in HTML5 are always in the XHTML namespace. You no longer need to declare xmlns=“http://www.w3.org/1999/xhtml” in <html> tag. lang and xml:lang attributes in <html> tag both define the language of this HTML page. This is a vestige of XHTML. Only the lang attribute has any effect in HTML5. You can keep the xml:lang attribute if you like, but if you do, you need to ensure that it contains the same value as the lang attribute.
4. A n HTTP header like this:
Content-Type: text/html; charset="utf-8"
says that the web server thinks it’s sending you an HTML document and the document uses the UTF-8 character encoding. However, few authors actually have control over their HTTP server. So HTML 4 provided a way to specify the character encoding in the HTML document itself:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Both of these techniques still work in HTML5. The HTTP header is the preferred method, and it overrides the <meta> tag if present. And it got a little easier in HTML5:
<meta charset="utf-8" />
Which itself should be encoded in ASCII( http://www.w3.org/TR/html4/charset.html#h-5.2.2 )
5. Link relations are to explain why you’re pointing to another resource. They may tell browsers:
a) it’s a stylesheet containing CSS rules that your browser should apply to this document.
b) it’s a feed that contains the same content as this page, but in a standard subscribable format.
c) it’s a translation of this page into another language.
d) it’s the same content as this page, but in PDF format.
e) it’s the next chapter of an online book of which this page is also a part.
6. HTML5 breaks link relations into two categories : Links to external resources are links to resources that are to be used to augment the current document, and hyperlink links are links to other documents. The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type.
7. Most often, link relations are seen on <link> elements within the <head> of a page. Some link relations can also be used on <a> elements , See the full chart of link relations to check where you can use specific rel values.
8. One small optimization you can make in HTML5 is to drop the type attribute from the CSS LINK element. There’s only one stylesheet language for the web, CSS, so that’s the default value for the type attribute.
9. The rel="alternate" link relation has always been a strange hybrid of use cases, In HTML5, its definition has been clarified and extended to more accurately describe existing web content. Using rel="alternate" in conjunction with type=application/atom+xml indicates an Atom feed for the current page:
<link rel="alternate"
type="application/atom+xml"
title="My Weblog feed"
href="/feed/" />
But you can also use rel="alternate" in conjunction with other type attributes to indicate the same content in another format, like PDF.
10. The correct way to link to translations of documents is to use rel="alternate" in conjunction with the hreflang attribute to specify the language of the linked document.
11. rel="author" is used to link to information about the author of the page. This can be a mailto: address , though it doesn’t have to be. It could simply link to a contact form or “about the author” page.
12. HTML 4 defined rel="start" , rel="prev" , and rel="next" to define relations between pages that are part of a series. HTML5 includes rel="next" and rel="prev" , just like HTML 4, and supports rel="previous" for backward compatibility.
13. rel="icon" is usually found together with shortcut , like so:
<link rel="shortcut icon" href="/favicon.ico">
All major browsers support this usage to associate a small icon with the page. Usually it’s displayed in the browser’s location bar next to the URL, or in the browser tab, or both.
14. rel="license" indicates that the referenced document provides the copyright license terms under which the current document is provided.
15. rel="nofollow" indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages. The thinking was that if “nofollow” links did not pass on PageRank, spammers would give up trying to post spam comments on weblogs. That didn’t happen, but rel="nofollow" persists.
16. rel="noreferrer" indicates that no referrer information is to be leaked when following the link.
17. rel="search" indicates that the referenced document provides an interface specifically for searching the document and its related resources.” If you want rel="search" to do anything useful, it should point to an OpenSearch
document that describes how a browser could construct a URL to search the current site for a given keyword.
18. rel="tag" indicates that the tag that the referenced document represents applies to the current document.” Browsers do not do anything special with them; they’re really designed for search engines to use as a signal of what the page is about.
19. HTML5 also defines new semantic elements:
a) The <section> element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information.
b) The <nav> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.
c) 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. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
d) The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
e) The <hgroup> element represents the heading of a section. The element is used to group a set of h1 –h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
f) The <header> element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1 –h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
g) The <footer> element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
h) T he <time> element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
i) The <mark> element represents a run of text in one document marked or highlighted for reference purposes.
20. All browsers render unknown elements inline, as if they had a display:inline CSS rule. There are several new elements defined in HTML5 which are block-level elements. That is, they can contain other block-level elements. If you want to use these elements in older browsers, you will need to define the display style manually:
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
However, prior to version 9, Internet Explorer did not apply any styling on unknown elements.
21. If IE 8 doesn’t explicitly recognize the element name, it will insert the element into the DOM as an empty node with no children . All the elements that you would expect to be direct children of the unknown element will actually be inserted as siblings instead. If you create a dummy <article> element with JavaScript before you use it in your page, Internet Explorer will magically recognize the <article> element and let you style it with CSS. There is no need to ever insert the dummy element into the DOM . Simply creating the element once (per page) is enough to teach IE to style the element it doesn’t recognize:
<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
You can also reference a minified version:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js "></script> <![endif]-->
22. In HTML 4, <h1> – <h6> elements were the only way to create a document outline. However it does not provide a way to mark up a subheading without adding it to the document outline. The <hgroup> element acts as a wrapper for two or more related heading elements. Headings in one group only create a single node in the document outline. Thus you can group your heading and its subheading(marked up as a smaller heading) into one group.
23. The HTML5 specification defines an algorithm for generating a document outline that incorporates the new semantic elements in HTML5 . The HTML5 algorithm says that an <article> or <nav> element creates a new section, that is, a new node in the document outline. And in HTML5 , each section can have its own <h1> element. And the <article> element can have its own <header> element. You can test your own pages in the HTML5 Outliner to ensure that you’re using the heading elements properly.
24. There are three parts to a <time> element:
a) A machine-readable timestamp
b) Human-readable text content
c) An optional pubdate flag
<time datetime="2009-10-22T13:59:47-04:00" pubdate> October 22, 2009 1:59pm EDT </time>
The pubdate attribute is a Boolean attribute. It means one of two things. If the <time> element is in an <article> element, it means that this timestamp is the publication date of the article. If the <time> element is not in an <article> element, it means that this timestamp is the publication date of the entire document.
25. People with disabilities care about the semantics of site navigation. Once they get past the page title, the next important pieces of information about a page are the major navigation links. If they want to navigate quickly, they’ll tell their screenreader to jump to the navigation bar and start reading. Thus being able to determine navigation links programmatically is important. HTML5 provides a semantic way to mark up navigation sections: the <nav> element.
26. The HTML5 specification says, “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”