HTML5 for Web Designers – Jeremy Keith – A Book Apart

I’ve read this book many times, but it’s good to be reminded of some of the underlying principles of HTML5… The Semantic Web… All the effort that went into supporting existing content.

Keeping it Simple

  • Doctype declaration <!DOCTYPE html>
  • Character encoding declaration <meta charset=”UTF-8″>
  • <script src=”file.js”></script>
  • <link rel=”stylesheet” href=”file.css”>
  • Anything goes.. uppercase, lowercase, quoted, unquoted, self-closing… You can decide on a coding standard.
  • Backwards compatible so tags are obsolete and not deprecated.
  • Presentational elements are obsolete… use CSS.
  • APIs for creating web applications in HTML5

Tags which have changed…

  • <small> now a semantic definition for the ‘small print’
  • <b> used to be bold, but now it is ‘stylistically offset’
  • <strong> text with extra importance
  • <i> no longer italicised rather ‘in an alternate voice or mood’
  • <em> text with an emphasis
  • Try to think beyond visual rendering environments.
  • <cite> no longer means a reference, rather ‘the title of a work’
  • multiple elements can now be nested within an <a> tag

Rich Media

  • <img> once an image has been served up to the browser it cannot be updated.
  • <canvas> is an environment for creating dynamic images, backwards compatibility is achieved as only browsers which don’t support the canvas element render the markup between the tags.
  • https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element
  • The DOM can have many nodes – element nodes, text nodes and attributes. ¬†The <canvas> element has no DOM, therefore content cannot be represented as a tree of nodes which is a problem for screen readers, and therefore accessibility.
  • Unobtrusive JavaScript – enhanced content using JavaScript degrades gracefully in browsers who don’t support new features… also consider accessibility and assistive technologies.
  • https://www.filamentgroup.com/lab/update-to-jquery-visualize-accessible-charts-with-html5-from-designing-with.html
  • <audio src=”AGreatSong.mp3″ controls loop autoplay> </audio>
  • Audio formats… mp3 is licensed, but you can specify different formats for different browsers… audio/ogg or audio/mpeg, which is useful for falling back using an object element…
  • Video formats… all very similar to audio formats.

Web Forms 2.0

  • Placeholder text for form fields.
  • Autofocus
  • Required
  • Autocomplete

Semantics

  • http://alistapart.com/article/semanticsinHTML5
  • use the class attribute to add more semantic value to elements, classes are for CSS and can also be used in DOM scripting.
  • Microformats, conventions agreed by a community, using the class attribute, hCard, hCalendar, hAtom, which enables one to extend browsers and parsers to work with these specific patterns.
  • <mark> </mark> element, shows items currently of interest.
  • <time class=”dtstart” title=”2015-11-07″> 11th November 2015</time>
  • <meter> </meter> for marking up measurements
  • <progress>
  • <structure>
  • <section> very similar to div, only difference is that div has no semantic meaning, ask yourself, is all the content related?
  • <header> elements can also exist within a <section> element, as with <footer>
  • <aside> for tangentially related content, nice to have but you can removed them without significantly changing the message
  • <nav>
  • <article>
  • <hgroup>
  • Scoped styles, particularly with the use of h1 to h6 within sections.

Using HTML5 Today

  • The most important question, is what happens if I implement all these new tags, etc?
  • What would be interesting is a rewrite of the status quo a few years down the line, what has the uptake of all these new structural / semantic tags been like? ¬†Anyone using the aside element?

 

Leave a Reply

Your email address will not be published. Required fields are marked *