HTML5 July Meeting
HTML 5
How does HTML5 differ from HTML4, and what is important to know.
Is it ready yet?
http://www.ishtml5readyyet.com/
HTML5 tries to address the deficiencies of HTML 4
The new and changed codes provides better support for current web requirements, reducing the need for plugins.
User Application support still varies, but what can be implemented now?
Evolved from HTML 4
- Better error handling
- Better Consistency across browser/platforms
- New semantic elements – these provide uniformity, portability between different screen types – desktop/tablet/phones etc.
- Redefinition of presentational markup
- ‘the evolution of the browser into a programming platform
Better Integrated API’s
- Audio
- Video
- Offline Apps
- Editable
- Drag/drop
- History
- Protocols
Browser support
Not all functionality of each new feature may be supported. Support is changing rapidly.
http://www.findmebyip.com/litmus/#target-selector
Know your target audience!
http://dev.w3.org/html5//spec-author-view/
DOCTYPE:
OLD:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> (Or flavor thereof)
NEW:
<!DOCTYPE html>
At TOP of page! All that is needed. No empty space or it could trigger “quirks-mode” in the browser.
CHARACTER Encoding (in <head> section)
OLD:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
NEW:
<meta charset=”utf-8″ />
New Structural Tags
(Must have start AND end tags)
<header> </header>
“The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section.”
Can be used to wrap a logo, table of contents..
<hgroup> </hgroup>
This can be used to group headings when there are multiple levels, subheadings, taglines etc.
<section> </section>
http://dev.w3.org/html5//spec-author-view/the-section-element.html#the-section-element
Not a replacement for a <div>, but divides the page into sections. (The type of content that might have a bullet point index at top?)
The 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’s contents would be listed explicitly in the document’s outline.
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
<article> </article>
http://dev.w3.org/html5//spec-author-view/the-article-element.html#the-article-element
Content that might be used in syndicated, or separated out of the page
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
<aside> </aside>
Related to main content but separate – a sidebar. BUT should be inside the article tag, otherwise it relates to the entire page. Good for pull-quotes, ads, related navigation.
<footer> </footer>
Typically contains information about a section – can have multiple footers on a page, copyright, author etc.
<nav> </nav>
Containing the navigation elements. Not meant for every link, but the main navigation links.
<figure> </figure>
Can be used to contain graphic w/caption, so it’s in own ‘container’. Does not affect the flow of the content, can be moved to the side etc.
<video> </video>
Media element (video/audio) Replace the need for 3rd party plug ins such as Quicktime or Flash etc. NOT at all yet standardized, and depends on browser codec support. Complicated by copyright, patents, trademarks etc.
3 formats:
H.264 (mp4) High quality, supported by MS and Apple (Patented?)
Ogg Theora (ogv) Not quite as good, open source codec, supported by Firefox & Opera
VP8 (webm) High quality, released by Google, open source. Mozilla calls for it to be adopted as standard codec
For now would need to support multiple codec’s as well as providing fall-back to plugins like Flash for older browsers.
Recources:
http://videojs.com/
http://firefogg.org/ Free plugin for Firefox, will encode video.
http://camendesign.com/code/video_for_everybody Includes source code samples
http://handbrake.fr/ Download open source video transcoder
(Videos to be covered in a future SIG meeting!)
Adding the final video to the HTML:
<video src=”path-to-converted-video.ogv” width=”xx” height=”xx” controls preload=”false”>
</video>
This only works in Firefox, so provide source to multiple formats, depending on browser:
<video width=”xx” height=”xx” controls preload=”false”>
<source src=”path-to-converted-video.mp4″ type=”video/mp4 />
<source src=”path-to-converted-video.ogv” type=”video/ogg />
</video>
The order is important, list the .mp4 first as iPhones look for that.
<audio> </audio>
Audio..
<embed> </embed>
Embed non-html, application or interactive content, such as Flash.
<canvas> </canvas>
“draw” on the page.. Define canvas element.
List of new/changed elements:
http://www.w3.org/TR/html-markup/elements.html#elements
Depreciated elements
NOT to be used anymore! (although browsers still have to support them for now..)
- basefont
- big
- center
- font
- s
- strike
- tt
- u
Use CSS instead for formatting!
- frame
- frameset
- noframes
NO frames!
Depreciated Attributes
Tag: ———–Depreciated:
img ————longdesc, name, hspace, vspace
html ———–version
table, tr, th, td—bgcolor
table ———–border, cell padding, cell spacing, valign
td, th ———-height, width
all block level —align
body ———–background
———————————————————-
LINKS:
http://diveintohtml5.org/
http://www.findmebyip.com/litmus/#target-selector
http://samples.msdn.microsoft.com/ietestcenter/
http://www.caniuse.com/ (Allows you to compare browsers)
http://www.modernizr.com/
http://www.w3.org/TR/html-markup/
http://www.designzzz.com/css3-html5-enhancing-your-website/
http://dev.w3.org/html5//spec-author-view/#auto-toc-4
http://dev.w3.org/html5//spec-author-view/
http://gsnedders.html5.org/outliner
A snippet of CSS3
Multiple columns:
Is it supported?
http://fmbip.com/litmus/
.text2col {
font: 12px Verdana, Geneva, sans-serif;
color: #666;
height: auto;
width: 500px;
-moz-column-count:2;
-moz-column-gap: 1em;
-webkit-column-count:2;
-webkit-column-gap: 1em;
column-count 2;
column-gap; 1em
text-align; justify;
}
Demo:
http://www.design.annagraphics.com/tutorials/2col-text.htm