HTML5—Usage and compatibility of new semantic elements

1. New semantic elements:

HTML5 provides new semantic elements to clarify different parts of a Web page.

• ##
  :

  describes the header area of the document, is used to define the introduction display area of ​​the content

• :

  The part that defines the navigation link.

##
:

Define the section (section, section) in the document. For example, a section, header, footer, or other section in a document, a

section usually contains a set of content and its title.

:

Define independent content.

:

Define content outside the main area of ​​the page (such as the sidebar).

: The

tag specifies independent stream content (images, charts, photos, code, etc.).

:

Define the title of the

element.


##

:

Describes the bottom area of ​​the document

,

A footer usually contains the author and copyright information of the document , linked terms of use, contact information, etc..

In a web page, the positions of these new semantic tag elements are as shown below:

2. Browser compatibility issues with new elements:

In order for these blocks and elements to take effect in all versions of browsers, you need to add them to the style Set the following attributes in the table file (the following style code allows older browsers to support the block-level elements introduced in this chapter):

header, section, footer, aside, nav, article, figure
{ 
    display: block; 
}

IE8 and earlier IE versions cannot render CSS effects in these elements, so you cannot use

,

,

,

,

,

,

, or other HTML5 elements. You can use

HTML5 Shiv

to solve this problem:

##

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

The above is the use and compatibility of HTML5-new semantic elements. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!