1. Common semantic tags
article - definition page independent content areas
aside - definition of sidebar content
header - defines the header area of the document
section - blocks defined in the document
nav - definition of navigation
footer - or the definition section of the document footer
2. Compatibility
IE8 and IE8 following version, new elements can not be wrapped as a parent child elements, and can not apply CSS styles. Let CSS style application simply execute document.createElement (elementName) on the unknown elements can be realized.
So the solution is: js created with these tags elements, and to set the css style
presentation: The following versions of IE8 IE8 and run the following code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<header>我是header</header>
<footer>我是footer</footer>
<article>我是article</article>
<aside>我是aside</aside>
<section>我是section</section>
<nav>我是nav</nav>
</body>
</html>Rendering results are as follows:
The new label does not recognize the need to use these labels to create js elements and js code must be run before Dom rendering! ! !
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
document.createElement('nav');
</script>
</head>
<body>
<header>我是header</header>
<footer>我是footer</footer>
<article>我是article</article>
<aside>我是aside</aside>
<section>我是section</section>
<nav>我是nav</nav>
</body>
</html>Such ie8 can properly identify a new semantic tag, but the default rendering inline elements, then need to set style for block-level element css
<style>
article,aside,header,section,nav,footer{
display:block;
}
</style>Such IE8 can also show a normal new semantic tags
3. Third-party plug-ins html5shiv.js
H5 so many new label, if each must go through this method of production, it is not too much trouble do
so, we now introduce a third way, directly borrowed from the older cattle packaged js library --- html5shiv .js
use: direct label can be introduced (js code must be run before Dom rendering !!!)
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
</head>4. Custom Label
In the advanced browser, the default can identify a custom label, but the default will be rendered as inline elements.
These can be your own custom labels to set css properties
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
yyy{
display: block;
}
</style>
</head>
<body>
<xxx>我是xxx标签的文本</xxx>
<xxx>我是xxx标签的文本</xxx>
<yyy>我是yyy标签的文本</yyy>
<yyy>我是yyy标签的文本</yyy>
</body>
<script>
// 获取第2个xxx标签
var xxx = document.getElementsByTagName("xxx")[1]
// 尝试操作样式
xxx.style.color = "red"
</script>
</html>Rendering results:
