HTML5 Page-Structure Elements

  1. HTML5 introduces a number of elements that convey a page's underlying structure
    1. Elements for common structures that appear on most web pages (headers, footers, navigational links, articles, sections, asides)
    2. Most elements do not affect the appearance of the page (use CSS to do so)
    3. Helps machines make sense of the page (browsers, screen readers, search engines, etc.)
  2. Example web page

    ACU web page
    1. <header> contains the heading of the page or article
      1. Can be used multiple times
      2. Can contain text and graphics
    2. <nav> groups navigational links
      1. For links that take you to different pages on the current site
      2. Do not use for sponsored links
    3. <article> for standalone content that could be used or distributed elsewhere
      1. Examples: news article, forum post, blog entry, video
      2. Can be nested (reader comments in an article nested inside article blog post)
    4. <aside> describes content that's related to but separate from the surrounding content (like the article)
    5. <figure> is an image, chart, or table that could be moved to the side or to a separate page
      1. Use <figcaption> element to supply a caption
    6. <footer> is content that normally appears at the end of the page or the end of a section
    7. <section> is used to group distinctly different areas of functionality or subject area or to break an article or story into different sections