HTML5 is the Blueprint of the Future. What's new in HTML 5?

CONTENT MODELS

An information icon.

PAGE STRUCTURE

An image of a temple depicting a structure icon.

FORMS

Pages depicting aform icon.

HTML5 Content Models

IN the new specification, each defined element has a content model which is a description of it's expected contents. An HTML element must have content that match the requirements described in it's model.

    The following seven categories are used in the new specification:
  • Metadata
  • Metadata is content that sets up the presentation or behavior of the rest of the content. Elements can include: base, command, link ,meta, noscript, script style, and title. Metadata is typically found in the head of the document.

    In HTML 5, Doctype declarations have been simplified to one.The Doctype is: <!DOCTYPE html>. The document type must be declared on line one of the HTML document.

  • Embedded
  • Embedded content imports other resources into the document. Elements include: audio, canvas, embed, iframe, img, math, object, svg, and video.

  • Interactive
  • Interactive content is specifically intended for user interaction. Elements include: a, audio, button details, embed, iframe, img, input, keygen, label, object, select, textarea, and video.

  • Phrasing
  • Phrasing is the text of the document as well as the elements used to mark up the text within paragraph level structures. In many ways it is the same as inline content from the HTML4 specifications. Elements can include: a, abbr, area, audio, button, canvas, cite, code, command, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1 -  h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, ul, time, var, video, wbr.

  • Flow
  • Flow elements are those that would be included in the normal flow of the document and contain the majority of elements included in HTML5. Being identified as flow content has no bearing on how the content will be displayed in the user agent. Elements can include: a, abbr, area, article, aside, audio, b, bdo, blockquote, br, details, button, canvas, cite, code, command, datalist, del, dfn, embed, I, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby samp, script, select, small, span, strong, sub, sup, svg, textarea, var, video, wbr.

  • Sectioning
  • Sectioning defines the scope of the headers and footers. Elements include: article, aside nav, and section.

  • Heading (hgroup,  h1 - h6)
  • The heading model defines the header of a section, which can either be explicitly marked up with sectioning elements or implied by the heading content itself. Elements include: h1 - h6, hgroup.

Top

Outline Algorithms

As a basic rule of thumb, outline your page before coding it.

Div Tags have no special meaning at all and can be used with class, language and title attributes to mark up semantics common to a group. Authors are encouraged to use it as a last resort as overuse leads to poor accessibility for screen readers and poor maintainability for authors. However, it can still be used to group related content such as secondary and tertiary navigation systems.

    Other organizational Considerations include:
  • Use only section and article tags when sectioning is appropriate.
  • Use the <aside> tag for related content only.
  • Headers and footers are for grouping heading and/or footer content only.
  • Nav tags are to be used for Primary Navigation Systems only.

ID and Class Attributes for HTML5

  • Both are global attributes.
  • ID values must be unique per page.
  • Classes can be used as often as needed.
  • Create class values that describe content.
  • The getElementByClassName() is new to the DOM in HTML5.

Top

Additional Resources

spacer image A pile of books stacked up and coming through a laptop computer.