Content: HTML5’s new semantic tags and compatibility handling for these new tags.
New Semantic Tags
HTML5’s new semantic tags are similar to div
but provide a more meaningful structure, helping to avoid naming conflicts.
Important notes:
- The
main
tag is not supported in IE. - IE8 and below do not support the new tags, but they can be used with dynamic JavaScript creation (make sure to set the created elements to
display: block
).
Tag | Description |
---|---|
header | Header |
main | Main content |
footer | Footer |
nav | Navigation |
aside | Content aside |
article | Document |
section | Document section |
1 |
|
Compatibility Handling
Method 1:
Use JavaScript to dynamically create the new tags for compatibility.
1 | <!-- Generate [if lte IE 8] conditional comment --> |
Method 2:
Use the JavaScript library (html5shiv.min.js) to achieve compatibility with semantic tags.
1 | <!-- Load this js file only for specified IE versions using conditional comments --> |
Conditional Comments
Expanding on the knowledge mentioned earlier, we used conditional comments. Here’s an extension:
The “emmpty” syntax for conditional comments: cc:ie6 + tab
.
Note: The “emmpty” syntax generates “[if lte IE 6],” and if you need to check for other versions, you should modify it manually.
1 | <!--[if lte IE 6]> |
The above code means that if it’s IE6 or below, it will load html5shiv.min.js.
Detailed Syntax:
- lt: Less than the specified version
- lte: Less than or equal to the specified version
- gt: Greater than the specified version
- gte: Greater than or equal to the specified version
1 | <!-- Less than IE9 --> |
Other information:
- Typing “lorem” + tab generates placeholder text, and for multiple paragraphs, you can use “lorem1000” + tab.