HTTP 503
Intro to HTML5 + Random thoughts and helpful tips
I've put together a very informal list of things you should know to get started using HTML5. I've taken some of my findings from the actual HTML5 specs, and from my own research. If you find anything incomplete or not making sense, I strongly encourage you to Google it to fill in any gaps.
What is HTML5?
Check out:
http://en.wikipedia.org/wiki/HTML5
Some people argue that if your website is coded with an XHTML Strict doctype, then there's no reason to switch. Try changing your existing XHTML Doctypes to Strict and see if your code is co-operates with your CSS.
(For future reference, and maybe for your resume, don't confuse HTML5 with HTML 5. Write it down the right way — HTML5. No space!)
History
- W3C was intent on building XHTML2
- browser manufacturers, web professionals began forming the new standard which startd with continuing the development of HTML
- HTML5 a replacement for HTML 4, XHTML 2 revoked
- retains backwards compatibility with previous version of HTML
- new semantic mark-up makes development code more meaningful and readable
HTML5 Specification
- W3C logo of HTML5 - has it's own branding to increase awareness of HTML5
- see HTML5 differences from HTML4 http://www.w3.org/TR/html5-diff/
- W3C's HTML5 Specification: http://dev.w3.org/html5/spec/Overview.html
- WHATWG has it's own HTML5 spec: http://www.whatwg.org
- CSS3 has it's own spec (google it!)
<!DOCTYPE HTML>
- no version number, no URL
- simply redone for backwards compatibility
- You can go ahead and it is safe for you to change your HTML4 and XHTML doctypes to the new HTML5 doctype
- keeps older browser from configuring in quirksmode (what is quirksmode?)
- I've also seen it like this: <html lang="en"> (good practice?)
- content being served as content="text/html" in XHTML 1.0 T
Syntax
- self closing meta tags in XHTML driven by XML requirements
- uppercase characters allowed in HTML5 tags <boDy> or even </BODY> is ok
Not needed in HTML5:
- type="text/css"
- type="text/javascript"
- <link rel="stylesheet" … /> self closing tag can now end with just the >
- <br /> can now be <br> again
New Structural Elements
- How you use the new structural elements is most often a judgement call
- There is no absolutely right way but there is now a way to validate your HTML5 code: http://html5.validator.nu/
- not for the view, it's for the browsers, accessibility devices and other user agents will notice the difference of the new HTML5 mark-up
<header> <nav> <section> <article> <aside> <figure>
<hgroup>
header element <header>
- cannot put a header or a footer inside header element
- could contain h1-h6 element, group, table of contents, search form, logos, navigation
- NOT for sectioning content
- replace div id="header"
- could contain the new <hgroup> tag
hgroup element <hgroup>
- for grouping a series of <h#> tags
- don't include paragraphy tags, etc.
nav element <nav>
- links to other pages or parts within the page
- footer links are ok but can also be unnecessary
- perhaps best used in footer for major links to other pages within site?
- nav could contain heading tags, paragraphs (ex. h1)
section element <section>
- a thematic grouping of content, typically with a heading
- webpage split into sections, intro section, content section
- why not use the article element?
- section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
- A general rule is that the section element is appropriate only if the element contents would be listed in the documen's outline
Examples:
- article element with section elements inside
- section element by itself with more sections within
- replace div id="content" with section tag
article element <article>
- news article, forum posts, blog entries, an interactive widget or gadget, or any other independent item of content
- for standalone content that can be republished or syndicated
- including republish on other pages too
- nesting article elements (article within an article)
- inner article element represents info that is related to the contents of the outer article
- Example: user comments on a blog entry
- do not over use, it's not a replacement for the div tag
aside element <aside>
- belongs to sectioning content
- 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.
- partially related to content around it
- used to represent a "sidebar" but this does not need to be a sidebar
- pull quotes, blog rolls, advertising, groups of nab elements, or other content that is separate from the main content of the page
- could be nested inside other article or section elements
- could contain a header element?
footer element <footer>
- cannot put a header or a footer inside footer element
- contains information it's section such as who wrote it, links to related documents, copyright data, etc.
- can be found as the footer in an article element, meaning it's the footer for that article.
- do not need to appear at end of a section
- footer can contain sectioning content inside them (section tags within footer)
- sections could have multiple footer elements within
- footer doesn't necessarily mean it has to appear at bottom of an element
- We used to use <div id="footer">
- perfect for authorship info
<div> element - when to use it?
- Is the content being grouped simply for stylistic reasons, or to extend its meaning further through an ID or Class attribute?
- An element of last resort, for when no other element is suitable.
- Use of the div element instead of a more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.
bold and italic tags
HTML5 specs state:
<b> - purely presentational, but nothing you're trying to emphasize
<i> - represents a span of text in an alternate voice or mood
<em> - represents a stress emphasis of its contents
<strong> - represents the level of importance of its contents
In other words...
Use <b> or <i> to bold and italicize content for stylistic reasons.
Use <strong> or <em> to effect the meaning or stress the meaning of the content.
<address> element
- not meant for postal addresses
HTML5 Validtor
http://html5.validator.nu/
Conditional Comments?
- What are they? Why use them? How do I use them?
http://www.quirksmode.org/css/condcom.html
Enable all new elements of HTML5
http://remysharp.com/2009/01/07/html5-enabling-script/
ie7.js
ie7.js is a JS library to make i.e. behave like a standards-compliant browser. Fixes transparent PNGs in ie6 and ie5
http://code.google.com/p/ie7-js/
Learn to use the HTML5 Outliner
Try out http://gsnedders.html5.org/outliner/
- Each section or heading element will create its own section
- Also check out the Google Chrome extension and Firefox browser plug-in
- and see http://code.google.com/p/h5o/
CSS Reset?
CSS Reset file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across all browsers. It essentially eliminates browser inconsistencies such as height, font sizes, margins, headings, etc…
Try out:
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
CSS3 border radius explained (rounded corners, no images)
http://www.css3.info/preview/rounded-border/
Additional Reading
With the huge amount of interest and online resources available on the web already, you may find that an actual physical book would be a waste of money. But if you are interested in further reading, I highly recommend HTML5 for Web Designers by Jeremy Keith. You can find it here: A Book Apart
The W3C members are thought to be a separate race of leprechauns living in the Swiss Alps. No one has ever seen them. (Just checking to see if you're reading.)
Top
« Go back