This time I will bring you what aspects of html5 page structure need to be paid attention to, what are thenotes of html5 page structure, the following is a practical case, let's take a look.
Introduction to Semantic Elements
The HTML5 standard adds many new semantic elements. If divided by type, there are page structure, text content, forms, etc.
Here we mainly introduce the new elements in the page structure.
What is a semantic element
Simply speaking, a semantic element is to give a certain meaning to an element (tag), and the name of the element is the meaning that the element wants to express.
For example,
means the header, and
means the footer.
Features
①Easy to maintain: Using semantic elements will have clearer page structure information, making it easier to maintain the page later. No need to look at the code again: find the div and then find the specific ClassName.
②Accessibility: Conducive to reading by screen readers and other assistive tools.
③ Beneficial to search engine optimization: After checking some semantic elements of HTML5, search robots can collect information about their indexed pages.
Original interface layout
In the layout of the page,
is a very common element. With a certain style, it can be applied to specific scenarios, such as header, side Sidebar,
Navigation bar, etc.
In order to facilitate maintenance, designers often assign ClassName (style class name) or ID with a special name to these
.
For example, a
element representing a page header, its ClassName or ID can be page-header, header, etc.
Page structure semantic elements
Explanation
The semantic elements of page structure are mostly used for the overall layout of the page. Most of them are block-level elements, which are used instead of
. Such as: header, footer, etc.
It has no special style, so it still needs to be used with Css.
Detailed introduction
: Define the header area of a web page or article. Can include logo, navigation, search bar, etc.
Minimum browser version: IE 9, Chrome 5
Instructions for use:
①When used to mark the header of a web page, it can include logo, navigation, and search bar and other information.
②When used to mark the title of the content, use
only when the title also comes with other information. Generally, use
to mark the title.
: Define the main content of the web page.
Minimum browser version: IE not supported, Chrome 35
: Define the footer area of a web page or article. Can include copyright, filing and other content.
Minimum browser version: IE 9, Chrome 5
Instructions for use:
①When used as the footer of a web page, it usually contains website copyright, legal restrictions, links, etc. .
②When used as the footer of an article, it usually contains information about the author.
: Mark the
page navigation link. An area containing multiple
hyperlinks .
Minimum browser version: IE 9, Chrome 5
Instructions for use:
①A page can contain multiple
elements, such as page navigation and related Article recommendations, etc.
②The contact information and authentication information in the
area do not need to be included in the
element.
: Usually marked as an independent area in the web page.
Minimum browser version: IE 9, Chrome 5
Instructions for use:
①Can be used as an independent area in a web page, such as a section in an article.
: A complete and independent content block; it can contain independent structural elements such as
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
2018-06-11 11:57:34
2018-06-15 15:55:18
2018-06-15 15:49:00
2018-06-15 15:46:15
2018-06-15 15:42:38
2018-06-15 15:40:34
2018-06-15 15:39:32
2018-06-15 15:37:14
2018-06-15 15:34:21
2018-06-15 15:22:51
