EverWeb Widgets HTML5

HTML5 Main Elements

HTML5 in EverWeb


These are the main elements considered in this section…

  • The <article> element specifies independent, self-contained content.
    An article makes sense on its own and it should be possible to distribute it independently from the rest of the web site.
  • An <aside> is like a sidebar and contains content related, but not essential, to the main page content.
  • The <details> element contains additional information that the website visitor can show or hide by clicking a turn arrow.
  • The <summary> is the heading for the details element.
  • A <figure> denotes an image or other illustration. The image should have an alt attribute with descriptive, alternative text and a caption...
  • The <figcaption> allows the addition of text - which is viewable to humans - to describe an image's content. Unlike a caption added in a text box, the search engine spiders "see"this as being related to the image.
  • The <header> and <footer> are familiar names but, in the context of HTML5, they denote the introductory and closing content of the whole page document or a section.
    This means that there can be more than one header/footer, h1 heading etc per page which, when used correctly, provide a lot more semantic meaning to the contents.
  • The <nav> element defines a list of links and, obviously, there be can several on a page.
  • The <section> element is just what it says. It defines a section of a document containing related content. A section can have a header, h1, h2, h3 headings, text content, figure with figcaption and a footer if required.
  • The <fieldset> tag draws a box around related elements and the <legend> provides a caption or heading for the content.

Using The Elements

These are the most usefull ones for page layout…

  • The section element is the most used one for general content which can be text, text and image, image with text wrap or a list.
  • All images should be enclosed in a figure element with alt text, caption and perhaps a description.
    Slideshows and video players can also use the figure with heading and a figcaption to greatly increase SEO with information about the media content.
  • The article is used for self contained content such as a blog post, dated material or any info that can be used on another page without losing its sense.
  • An aside expands on the subject matter of the page content and provides references and links to other source material.