📅 14-01-2013 • Δ 23-02-2019
A summary of HTML 5 (& CSS3)
The HTML 5 logo
The meaning of the HTML 5 badge icons:
Connectivity / CSS3 / Device access / Graphics & 3D / Multimedia / Performance / Semantics / Offline & storage
- 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. I created an open tag demo page.
- The attribute value can remain unquoted if it doesn't contain space characters.
Ex. <input value=yes> <input value="yes"> <a href=http://www.w3.org> <a href="http://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)
- 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.
|Element||Old meaning||New meaning|
|<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|
|<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|
|<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|
|<del>||a removal from the document|
|<ins>||an addition to the document|
|<track>||text tracks for the video element|
|<progress>||shows the progress of something (ex downloading)|