Html 5 summary

About html 5

📅 14-01-2013 • Δ 23-02-2019

A summary of HTML 5 (& CSS3)

The HTML 5 logo

HTML5 logo badge
The meaning of the HTML 5 badge icons:
Connectivity / CSS3 / Device access / Graphics & 3D / Multimedia / Performance / Semantics / Offline & storage

Important changes

  • The emphasis is on semantics. All presentation elements have been removed, moved to CSS or given another meaning.
  • HTML5 is backwards compatible with HTML 4 & XHTML. You can write loose HTML 4 or strict XHTML syntax.
    Because of this, HTML 5 has a loose syntax. You don't need to close tags. A tag that isn't closed ends when a previous tag is closed.
  • The attribute value can remain unquoted if it doesn't contain space characters.
    Ex. <input value=yes> <input value="yes"> <a href="https://www.w3.org> <a href="https://www.w3.org">
  • Tag names can have uppercase and lowercase characters.
  • It has new semantic elements. Less classes and IDs are needed because of this.
  • New elements and APIs for adding video, audio and scriptable graphics.
  • No real need any more for plug-ins like Flash and Silverlight.
  • The 'a' element may be wrapped around entire paragraphs.
  • Tags can receive semantic roles
    Navigational landmarks: application, banner, complementary, contentinfo, form, main, navigation, search
    Organize content: article, columnheader, definition, directory, document, group, heading, img, list, listitem, math, note, presentation, region, row, rowheader, separator, toolbar
    Ex. <div class="wrapper" role="main">
  • New table tags <thead> <th> <caption> <tfoot> <tbody>
  • You can define custom fonts in CSS 3 using direct links to font files with @FONT-FACE or by using 'fonts as a service'.
  • CSS 3 can use ligature icon fonts ( example 1 - example 2). A sequences of characters becomes a symbol from a font.
  • CSS 3 has nth-child and attribute selectors. :after :before :first-child :last-child :nth-child(2) :nth-child(3n+0)
  • You can create annimations directly from within CSS 3 without Javascript using the elements: transition, animation, keyframes
  • The text flow in all tags can be devided into columns with the column-count property in CSS. Codes for column breaks: break-after, column-break-inside. Column layout: column-gap, column-rule, ...
  • With media queries you can apply different styles based on capabilities like the screen resolution.
  • You can make the website flexible / liquid / elastic with more options. Interesting texts: coding.smashingmagazine | webdesign.tutsplus | thesitewizard
  • The SVG (Scalable Vector Graphics in XML) element can directly be embedded into the HTML page.
  • A standard HTML 5 template is maintained: HTML 5 Boilerplate. You can remove what you don't need.
Old elements with new semantic (non-presentational) meanings
Element Old meaning New meaning
<i> italic alternate voice
<b> bold stylistically offset
<em> emphasis stress emphasis of its contents
<strong> stronger emphasis strong importance for its contents
<small> smaller text side comments
<hr> horizontal rule paragraph-level thematic break
<s> strike-through contents that are no longer accurate or relevant
<u> underline unarticulated, though explicitly rendered, non-textual annotation
New elements
Element Meaning
<section> a generic document or application section
<article> independent piece of content
<aside> slightly related to the rest of the page
<hgroup> the header of a section
<header> introductory or navigational
<footer> footer
<nav> navigation
<details> represents additional information or controls which the user can obtain on demand
<summary> summary, legend, or caption
<cite> title of a work
<mark> mark or highlight for reference
<figure> images, video, graphics
<figcaption> figure caption
<del> a removal from the document
<ins> an addition to the document
<video> video element
<audio> autio element
<track> text tracks for the video element
<progress> shows the progress of something (ex downloading)
<meter> measurement
<time> time value
<data> data
<canvas> 2D bitmap graphics (via javascript)