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
>