HTML5 is great, I think we all agree with that? With the new elements like <section>, <header> and <nav> it makes so much more semantic sense (see below for more). But what about IE old browsers that have now way of knowing the new elements? Well, they will simply skip these new elements, but at least cause no error. So if IE7 and IE8 skip the new elements, how can we style them? Usually, we can't.
But, there is an answer in the form of a Shiv (or Shim). Basically, it makes IE7 and 8 understand these new elements and adds them into the DOM to be styled as usual. The story of how this works is long and interesting and can be found here.
To get the code for the Shiv have a look at this gitHub
Here are some of the new elements of HTML5
Tag | Description |
<article> | Defines an article |
<aside> | Defines content aside from the page content |
<bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
<command> | Defines a command button that a user can invoke |
<details> | Defines additional details that the user can view or hide |
<summary> | Defines a visible heading for a <details> element |
<figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
<figcaption> | Defines a caption for a <figure> element |
<footer> | Defines a footer for a document or section |
<header> | Defines a header for a document or section |
<hgroup> | Groups a set of <h1> to <h6> elements when a heading has multiple levels |
<mark> | Defines marked/highlighted text |
<meter> | Defines a scalar measurement within a known range (a gauge) |
<nav> | Defines navigation links |
<progress> | Represents the progress of a task |
<ruby> | Defines a ruby annotation (for East Asian typography) |
<rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
<rp> | Defines what to show in browsers that do not support ruby annotations |
<section> | Defines a section in a document |
<time> | Defines a date/time |
<wbr> | Defines a possible line-break |
Contact me here or catch me on one of
the social networks below
Try this on your mobile
You should be able to use this right from the screen
M | T | W | T | F | S | S |
---|---|---|---|---|---|---|
|
|
|
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
|
Copyright David Slack - Web developer