- Mastering a language like HTML5 can be intimidating. It doesn’t have to be!
- Under the expert guidance of John Allsopp, you’ll find the combination of digestible audio, video and mini-articles with a supportive forum of classmates to be so much fun, you won’t even realize how much you’ve learned by the time you’re done.
- What you'll learn:
- How HTML5 is similar to, and differs from HTML 4 and XHTML 1
- The various features of HTML5, which ones are ready for use now, and which are more experimental
- New semantic and structural markup elements and attributes
- Extending HTML5 accessibility and semantics using the ARIA role attribute
- Native audio and video in HTML
- Drawing with the canvas element
- Dealing with shortcomings in browser support
- Quality assurance techniques for HTML5
- Who should do this?: This course is for web designers and developers who are proficient at hand coding HTML and CSS. The goal of the course is not to teach core HTML concepts or markup, but build on top of an existing solid understanding of semantic HTML and XHTML. Those taking the course should understand:
- HTML Syntax
- The concept of semantic HTML markup, and
- Separating markup, presentation and behavior.
Course Outline, Contents and Notes1
- Lesson 1: What Exactly is HTML5?
- General motivational overview and discussion of what’s generally supported and what’s not.
- See the links below.
- Lesson 2: Markup (Part I)
- The HTML5 doctype: <!DOCTYPE html>. Implemented.
- Declaring Character Encodings in HTML5: <meta charset="utf-8">. I’ve not generally implemented this as the browsers I use (Chrome and Safari) display lots of characters as “?”. This was the case even in the test exercise in the course. I need to follow this up with Sitepoint Learnable. So, I’ve retained <meta charset="windows-1252"> in the pages for which I have historically used MS Word to compose the text, but have used the utf-8 character set for static pages crafted using NotepadPlusPlus.
- Common Page Layout Patterns: Headers and Footers, with content in the middle; Sections and Sub-sections, also with headers and footers; Navigation (often in the main Header, but also elsewhere). HTML5 provides markup for all this. Note, though, this is where the “semantics” comes in. As far as I can tell at the moment, this doesn’t make any visible difference, but it does make the page more “accessible” – eg. screen-readers can understand what’s going on in the page.
- <header> element: Not to be confused with <h1> and so forth, wich are contained within a <header> block.
- <hgroup> element: If you don’t want the Outlining Algorithm to include lower-level headers (<h2>, <h3>, .., say), you can enclose a block within an <hgroup> block. It appears that this has been removed from the HTML5 spec, so don’t use it – and I haven’t!
- <nav> element: used for main hyperlinking blocks.
- <footer> element: used at the bottom of the page. Can contain headers2 and other footers, as well as <nav> elements – but it’s best not to be too fussy (the HTML5 spec deprecates <nav> elements in <footer> elements).
- Lesson 3: Markup (Part II)
- Again, this mark-up is mainly for screen-readers and the Outline Algorithm. Consequently, I’m yet to adopt most of it.
- <section> element: not the same semantic meaning as <div> element, which is just a container useful for CSS. <section>s usually have headings3. Often, <section>s will be used instead of <div>s.
- <article> element: “a self-contained composition … intended to be independently distributable or reusable”. A form of <section>, but more specialised.
- <aside> element: “content that is tangentially related to the content around”. May be used a bit more generally.
- We are promised that HTML5 offers help for heading levels.
- The Outline Algorithm in HTML5: Explicit <section> and <article> elements start sections that appear in the outline, as do implicit sections starting with <h1>s etc. (but not <header>s and the like4). We can supress lower-level implicit sections using the <hgroup> element. We can start each section5 with an <h1>. However, existing screen-readers rely only on <h1>s etc., so currently it’s best practice to retain the meaning of <h1>, <h2>, etc. That is, a top-level <section> should start with an <h1>, a second-level <section> should start with an <h2>, etc. This also helps with CSS (it avoids descendent selectors). The example of the Wikipedia CSS page (Wikipedia: Cascading Style Sheets) is used – it’s HTML4, so uses the “implicit” Algorithm.
- <time> element: Example - <time datetime="1969-07-20T17:30" pubdate> July 20 1969, 17:30 </time>. This gives semantic meaning to the dates – all that appears on the page is the text (however formatted) between the tags. The time (“THH:MM”)string is optional, as is the “pubdate” string. I have implemented this in my “static” pages, but not yet in my dynamically-generated pages.
- <figure> element: incremental semantic markup – still need <img src="../../Photos/Notes/xxx">. I have not implemented this, though I could do so easily enough.
- <figcaption> element: again, incremental semantic markup – still need <alt="…">. I have not implemented this either!
- There was a brief discussion on the syntactic differences between XHTML and HTML for HTML5 – but either is treated as HTML6. See the links below.
- Lesson 4: ARIA
- WIA-ARIA stands for the W3C’s Web Accessibility Initiative’s Accessible Rich Internet Applications. Again, it is applying semantic markup so that pages become more accessible to the disabled. It has nothing to do with adding functionality for the able-bodied. Attributes include …
- <role> attribute: Similar usage to class or id, but with semantic content (rather than just a label for use in CSS). <role> values overlap somewhat with other HTML5 semantics as indicated below. You cannot just invent roles as you can with CSS classes, but have to choose them from the three pre-defined categories of <role>:
- Widget <role>s
- Document Structure <role>s
… banner: similar to <header>. Usually site- rather than page-oriented.
… complementary: similar to <aside>, but more supportive of (though still separable from) the main text.
… contentinfo: meta information such as footnotes, copyrights, links to privacy statements.
… main: the content that is directly related to or expands upon the central topic of the page. There’s no HTML5 element for this.
… navigation: similar to <nav>.
… search: either for searching this site, or the web more generally.
- Landmark <role>s
… note: similar to <aside> when in combination with complementary.
- Lesson 5: Recorded Webinar/Q&A Session
- Lesson 6: Native Audio and Video
- Lesson 7: Drawing With the Canvas Element
- Lesson 8: Quality Assurance for HTML5
- Lesson 9: Bringing it all Together
- Lesson 10: Recorded Webinar and Q&A Session
- Lesson 11: Bonuses
Some useful Links7
- Lesson8 1, Steps 3 (Link (Defunct)) & 4 (Link (Defunct)): What Exactly is HTML5?
- Lesson 2, Step 2 (Link (Defunct)): The HTML5 doctype:
- Differences between HTML4 and XHTML1: Link
- Link (“A seminal work” by Henri Sivonen)
- Link (John Resig’s Blog)
- Link (W3C Working Draft 24 June 2010)
- Link (Dive into HTML5).
- Lesson 2, Step 3 (Link (Defunct)): The HTML5 charset:
- Definitive guide to charsets: Link.
- Declaring Languages: Link
- Small type for copyright: Link.
- Lesson 3, Step 2 (Link (Defunct)): Sectioning in HTML5:
- <Time> Element spec: Link.
- Official list of recommended HTML5 markup tags: Link (focussed on web developers).
- HTML Working Group Charter: Link. Give 2Q14 as the date for recommended implementation date for HTML5.
- Warning that W3Schools9 is pants!: Link.
- Lesson 3, Step 5 (Link (Defunct)): Marking Up Dates and Times With HTML5:
- <Time> Element Time-zone Support spec: Link.
… Updated at Link.
- Lesson 3, Step 7 (Link (Defunct)): A short note on the two flavors of HTML5 - XHTML and HTML:
- Serving Content: Link
- HTML vs. XHTML: Link.
- Lesson 4, Step 2 (Link (Defunct)):
- WIA-ARIA Overview: Link
- : .
Footnote 2: The lecture uses <h1> as an example, so I wasn’t sure whether <header> elements were being referred to here.
- I’ve indicated whether or not I’ve implemented the HTML5 standards and features.
- Note that displaying the HTML syntax in a browser can be a pain. But I’ve found from the source of a page on the course website that replacing the “<” and “>” signs by their encoding works fine.
Footnote 3: In a later example, these are of the <header> variety, but with <h1>s (or lower-level) within them.
Footnote 4: It seems – in response to a question – that “<nav>, <header>, <footer>, <aside> all create their own outlines, but these aren’t part of the main document outline”. Not sure I understand the difference.
Footnote 5: I don’t really understand what’s going on here. It has to do with nested sections, maybe. But it doesn’t work yet, so I’m not too fussed. You’re recommended to use the heading level appropriate to the level in the page structure.
Footnote 6: I didn’t understand any of this – in particular the references to “serving content with a MIME type of application/xhtml+xml)”.
Footnote 7: Lessons without links aren’t mentioned.
- The links to the Sitepoint Learnable documents are given against the lessons, where appropriate.
- I’m not sure of the access requirements, so you might not be able to follow the links.
- This remark applies to all links of this sort. I’ve not repeated the warning ad nauseam.
- Someone had supplied a useful-seeming link to their HTML5 reference (Defunct Link (Defunct)) – but the link doesn’t work anyway!
- I received an unsolicited email from Link which provides a helpful-looking replacement (Link).
Text Colour Conventions (see disclaimer)
- Blue: Text by me; © Theo Todman, 2019
- Mauve: Text by correspondent(s) or other author(s); © the author(s)