All about HTML5

Todo: Make a reference about semantics etc.

Web components

  • LitElement - A simple base class for creating fast, lightweight web components
  • Polymer Project - Libraries, tools, and standards for a better web
  • Stencil - A toolchain for building reusable, scalable Design Systems.


Todo: write something about outlining content and semantic structures. Nice tool: HTML 5 Outliner


<!DOCTYPE html>

Root element

<html lang="en">

Check W3C's Language Tags

Head elements

  • Character Encoding / Meta charset
  • Link relations
    • Stylesheet
    • Alternate
    • Rel:
      • Author
      • Start
      • Prev
      • Next
    • Nofollow
    • Shortcut icon
    • Prefetch
    • Search

Html5 Semantic Elements


Represents a thematic grouping of content, often with a heading. Could be chapters or tabbed interfaces. Webpages could be split into several sections like introduction, news items, latest posts, etc.


This element is for a page section with links, to other pages or area's within the current document. Only major navigation blocks can use the nav element, paginations and footer links don't need it.


Represents a document, page, post, forumpost, article etc. and is intended to be indenpent or reusable.


Is a section of the page that contains content that can be related to the main content, but is considered separate.

Hgroup - don't use this

Important: this tag has been removed from the spec, do not use. It would be used to group multiple levels of headlines, subheadings, alternative titles and taglines (h1 - h6).


Can be used for headers with logo's, navigation and search forms. But also for a sections heading.


Typically contains information about the author, links to resources, coprights, etc. Can be used for sections and for documents.


Can be used with a 24 hour clock notation or Gregorian calendar, also has an optional time-zone attribute. Commonly used for publication dates etc.

More semantic elements


Wraps the main page content and there can only be one in a document. It must not be a descendent of an <article>, <aside>, <footer>, <header> of <nav>. More the main element can be found on Mozilla's MDN.

Figure caption



  • Video
  • Audio