📅 14-01-2013 • Δ 02-01-2022
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
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. 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)
- 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.
| 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 |
| 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) |