HTML5

These pages represent my attempt to provide structure for students who are learning theĀ  new HTML5 elements and attributes. Since HTML5 is not yet a W3 recommendation, this information is subject to change. I am using WordPress so that others can include comments on the individual elements. This list may not be inclusive. If readers note missing elements, please let me know via a comment and I will try to incorporate. Likewise, if an explanation is outdated (after all, this is a moving target), notify me via a comment as well.

There are associated technologies (while not specifically HTML5, they are often associated). I am gradually including examples. Personally, I think some of these technologies border on amazing. magical. Some of these technologies include:

Alphabetical listing of elements new to HTML5

  • <article> – section of content which forms independent part of document or site.
  • <aside> – content which is slightly related (a tangent) to the main content
  • <audio> – sound content (audio stream)
  • <bdi> – text isolated from surrounding text for purpose of bi-directional text formatting
  • <canvas> – defines a bitmap area for rendering images (for example for games)
  • <command> – multi-purpose element for representing commands
  • <datalist> – set of option elements which represent predefined options for other controls
  • <details> – control from which user can obtain additional information
  • <embed> – integration point for external content
  • <figcaption> – figure caption
  • <figure> – figure with optional caption
  • <footer> – footer for the section it applies to
  • <header> – header of a section
  • <hgroup> – group of headings
  • <keygen> – control for generating public/ private key pairs
  • <mark> – run of text in one document highlighted for reference purposes
  • <meter> – measurement within a known range
  • <nav> – group of navigational links
  • <output> – result of a calculation in a form
  • <progress> – progress indicator
  • <rp> – ruby parenthesis
  • <rt> – ruby text
  • <ruby> – ruby annotation
  • <section> – section of a document (typically with a title or heading)
  • <source> – media source
  • <summary> – summary, caption or legend for details control
  • <time> – date and/ or time
  • <track> – supplementary media track
  • <video> – video or movie
  • <wbr> – line break opportunity

Functional listing of elements new to HTML5

  • Layout
    • <article>- section of content which forms independent part of document or site.
    • <aside> – content which is slightly related (a tangent) to the main content
    • <embed> – integration point for external content
    • <figcaption> – figure caption
    • <figure>- figure with optional caption
    • <footer>- footer for the section it applies to
    • <header> – header of a section
    • <hgroup> – group of headings
    • <mark> – run of text in one document highlighted for reference purposes
    • <nav> – group of navigational links
    • <section> – section of a document (typically with a title or heading)
    • <wbr> – line break opportunity
  • Media
    • <audio> – sound content (audio stream)
    • <source> – media source
    • <track> – supplementary media track
    • <video> – video or movie
  • Web Applications
    • <canvas> – defines a bitmap area for rendering images (for example for games)
    • <command> – multi-purpose element for representing commands
    • <datalist> – set of option elements which represent predefined options for other controls
    • <details> – control from which user can obtain additional information
    • <output> – result of a calculation in a form
    • <progress> – progress indicator
    • <summary> – summary, caption or legend for details control
  • Other
    • <keygen> – control for generating public/ private key pairs
    • <meter> – measurement within a known range
    • <rp> – ruby parentheses
    • <rt> – ruby text
    • <ruby> – ruby annotation
    • <time> – date and/ or time

Alphabetical listing of elements changed in HTML5

  • <a> – hyperlink
  • <b> – offset text conventionally styled in bold
  • <cite> – cited title of a work
  • <hr> – thematic break
  • <i> – offset text conventionally styled in italic
  • <input> – input control for a form
  • <menu> – list of commands
  • <meta> – metadata (data about data)
  • <s> – struck text
  • <small> – small print

Deprecated Elements

Although browsers will likely continue to support these elements for some time, these are absent from the emerging HTML5 specification. Accordingly, they should not be used on pages you develop/ modify. Let’s try to future proof our work as much as possible.

  • Presentational elements (now better handled with CSS)
    • <basefont>
    • <big>
    • <center>
    • <font>
    • <strike>
    • <tt>
    • <u>
  • Usability and accessibility concerns
    • <frame>
    • <frameset>
    • <noframes>
  • Rarely used or confusing usage
    • <acronym> – use <abbr> for abbreviations now
    • <applet> – just use <object>
    • <isindex>
    • <dir>

References (will open in new browser window/ tab)

Leave a Reply

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