HTML5 semantic Element (i) page structure

Source: Internet
Author: User

This article focuses on the page structure of the added semantic elements of HTML5, including: <article>, <aside>, <figure>, <figcaption>, <footer> ,

Directory

1. Introduction to semantic elements

1.1 What is a semantic element

1.2 Features

2. Original interface layout

3. Page structure semantic elements

3.1 Description

3.2 Detailed Introduction

3.3 Example Diagram

1. Introduction to semantic elements

The HTML5 standard adds a lot of new semantic elements, which, if differentiated by category, have page structure, text content, forms, and so on.

And here we mainly introduce the new elements on the page structure.

1.1 What is a semantic element

Simply put, the semantic element is to give a meaning to the element (tag), the name of the element is the meaning of the element to be expressed.

such as

1.2 Features

① easy to maintain: the use of semantic elements will have clearer page structure information, easy to follow-up maintenance of the page. No more code to look at: Find the div and find the specific classname.

② accessibility: Facilitates reading of screen readers and other assistive tools.

③ facilitates search engine optimization: The search robot can collect information about its index pages after examining the semantic elements of some HTML5.

2. Original interface layout

In the layout of the page,<div> is a very many elements, with a certain style can be applied to specific scenes, such as the header, sidebar, navigation bar and so on.

For ease of maintenance, designers often assign these <div> classname (style class names) or IDs with special names.

For example, a <div> element that represents a header, whose classname or ID can be Page-header, header, and so on.

Example:

3. Page structure semantics element 3.1 description

The semantic elements of the page structure are mostly used for the overall layout of the page, mostly block-level elements, but instead of <div> use, such as: headers, footers, and so on.

And it doesn't have a special style, or it needs to be used with CSS.

3.2 Detailed Introduction

: Defines the head area of a Web page or article. Can include logos, navigation, search bar and other content. < detailed information >

Browser Minimum version: IE 9, Chrome 5

instruction for use: ① when you use the header to label a page, you can include information such as logos, navigation, search bars, and so on. ② when used to label the contents of the title, only when the title also comes with other information to consider using 
Instructions for use

<main> : Defines the main content in a Web page. < detailed information >

Browser minimum version: IE not supported, Chrome 35

<footer>: Defines the trailing area of a page or article. May include copyright, record and other content. < detailed information >

Browser Minimum version: IE 9, Chrome 5

Instruction for use: ① as a footer for a Web page, it usually contains site copyrights, legal restrictions, and links. ② as a footer for an article usually contains information about the author.
Instructions for use

<nav> : Callout page navigation link. A region that contains multiple hyperlinks. < detailed information >

Browser Minimum version: IE 9, Chrome 5

instruction for use: ① a page can contain multiple <nav> elements, such as page navigation and related article recommendations. Contact information and certification information in the ② <footer> area may not be included in the <nav> element.
Instructions for use

<section>: usually labeled as a separate area in a Web page. < detailed information >

Browser Minimum version: IE 9, Chrome 5

Instruction for use: ① can be used as a separate area of a Web page, such as a section in an article.
Instructions for use

<article> : A complete, independent content block that can contain independent detailed information >

Browser Minimum version: IE 9, Chrome 5

<aside>: Defines a block of content outside the main content of the perimeter. such as: Annotations. < detailed information >

Browser Minimum version: IE 9, Chrome 5

<figure>: Represents a separate piece of content that is often used in conjunction with <figcaption> (for the presentation of headings) for pictures, illustrations, tables, code snippets, and so on. < detailed information >

Browser Minimum version: IE 9, Chrome 8

<figcaption>: Defines the title of the <figure> element. < detailed information >

Browser Minimum version: IE 9, Chrome 8

3.3 Example Diagram

================================== Series article ==========================================

This article: 6.2 HTML5 semantic Element (i) page structure

Web Development Road Series articles

HTML5 semantic Element (i) page structure

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.