HTML5 page structure, dynamic node, Java school

Time:2019-12-2

Introduction to semantic elements

HTML5 standard adds many new semantic elements, such as page structure, text content, form and so on.

Here we mainly introduce the new elements of page structure.

What is semantic element

In short, the semantic element is to give a meaning to the element (tag), and the name of the element is the meaning of the element.

For example, < header > means header, < footer > means footer.

Characteristic

① easy to maintain: using semantic elements will have clearer page structure information and easy to maintain the page later. No need to look at the code: find the div and find the specific classname.

② accessibility: it is helpful to read screen readers and other auxiliary tools.

③ for search engine optimization: after checking some semantic elements of HTML5, the search robot can collect the information of its index page.

Original interface layout

In the layout of the page, < div > is a very common element, which can be applied to specific scenes, such as header, sidebar, navigation bar, etc. with certain styles.

For the convenience of maintenance, designers often assign these < div > classnames (style class names) or IDS with special names.

For example, a < div > element representing a header, whose classname or ID can be page header, header, etc.

Example:

 

Page structure semantic element

Explain

The semantic elements of the page structure are mostly used for the overall layout of the page, most of which are block level elements, only replacing the < div >, such as: header, footer and so on.

However, it has no special style, so it needs to be used with CSS.

Detailed introduction

<header>:Defines the header area of a web page or article. It can include logo, navigation, search bar, etc.

Browser minimum version: ie 9, chrome 5

instructions:

① when it is used to mark the page header, it can include logo, navigation, search bar and other information.

(2) when the title is used to mark the content, the use of < header > is considered only when the title is accompanied with other information, and in general, the use of < H1 > to mark the title is enough.

<main> :Defines the main content in a web page.

Browser minimum version: not supported by ie, chrome 35

<footer>:Defines the tail area of a page or article. It can include copyright, filing, etc.

Browser minimum version: ie 9, chrome 5

instructions:

① as the footer of a web page, it usually includes the copyright, legal restrictions and links of the website.

② as the footer of an article, it usually contains information about the author.

<nav>:Annotate page navigation links. Area containing multiple hyperlinks.

Browser minimum version: ie 9, chrome 5

instructions:

① a page can contain multiple < NAV > elements, such as page navigation and related article recommendation.

② the contact information and authentication information in the < footer > area need not be included in the < NAV > element.

<section>:Usually labeled as a separate area in a web page.

Browser minimum version: ie 9, chrome 5

instructions:

(1) it can be used as an independent area of a web page, such as a section of an article.

<article>:A complete and independent content block, which can contain independent structural elements such as < header >, < footer >. Independent content such as news and blog articles is fast (excluding comments or author profiles).

Browser minimum version: ie 9, chrome 5

<aside>:Define blocks of content outside the surrounding main content. Such as: notes.

Browser minimum version: ie 9, chrome 5

<figure>:Represents a piece of independent content, often used in conjunction with < figcaption > (for title), which can be used for pictures, illustrations, tables, code snippets, etc. in an article.

Browser minimum version: ie 9, chrome 8<figcaption>:Define the title of the < figure > element.

Browser minimum version: ie 9, chrome 8

Example diagram

Legacy browser support

IE8 or above

The browser will display the unknown elements as inline elements. The semantic elements related to the page are all block level elements, so you only need to set a browser that does not support these elements to display them as block level elements.

Add the following code to the style:


article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
    display: block;
}

IE8 and below

Browsers under IE8 and IE8 do not support applying styles to unrecognized elements.

So create these semantic elements with JS and attach the basic styles.

Take the header as an example


<script>
    document.createElement('header');
</script>

Apply external files

These tedious creations have been written by Lei Feng, and only need to be loaded on the old version of IE.


<!–[if lt IE9]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]–>