Define HTML5 elements as block elements
HTML5 defines 8 new HTML semantic (semantic) elements. All of these elements are block-level elements.
In order for older browsers to display these elements correctly, you can set the CSS display property to block :
header
,
section
,
footer
,
aside
,
nav
,
main
,
article
,
figure
{display:block
;
}
Add new elements to HTML
You can add new elements to HTML. The following example adds a new element to HTML and defines a style for that element, named <myHero>:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Add new element to HTML</title> <script> document.createElement("myHero") </script> <style> myHero { display:block; background-color:#ddd; padding:50px; font-size:30px; } </style> </head> <body > <h1>My first title. </h1> <p>My first paragraph. </p> <myHero>My first new element. </myHero> </body> </html>
The JavaScript statement document.createElement("myHero") adds a new element to the IE browser.
The perfect Shiv solution
<
!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset="utf-8">
<
title
>
Rendering HTML5
</
title
>
<!--
[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]
-->
</
head
>
<
body
>
<
h1
>
My first post
</
h1
>
<
article
>
Rookie tutorial - not only learning technology, but also a dream! ! !
</
article
>
</
body
>
</
html
>