Review the semantic elements of HTML5

Source: Internet
Author: User

What is a semantic element

Semantics is meaning. This means that the label's meaning can be known by the name of the tag.

For example, Div,p,span is not a semantic element, because you cannot use this tag to learn what it means.

And header,img is a semantic element, and we know what this tag represents.

Why implement a semantic element to the browser:

A better search engine included.

Enhance the structure of your Web pages.

For users, engineers and maintenance teams:

The use of semantic nonsense enhances the readability and maintainability of your code.

HTML5 New Semantic element 1.section (section)

Sections are commonly used to define chapters, headers, and footers in a Web page.

and section usually presents a set of information (containing content and headings), just like the chapters in a book.

<section>

  

2, article

Article is often used to define independent content.

<article>

  

We can see that section and article are used very similarly, so how to differentiate them.

For example, a section is like a large chapter in a book, while article is a small, independent part of it, such as the part of a note. Article always represents a chapter of independence, and the context is not related. Also, sections and article can be nested with each other. How to use it in your Web page, you need to experience it.

3.nav

The NAV tag is the label used to define the navigation link section, but note that this is not a defined link (a) tag, which means a tag can be used alone.

One of the benefits of NAV is that responsive design can be implemented well. For example, in a mobile browser or a small screen browser, we can see that some navigation bars are omitted by default.

<nav><a href= "www.badu.com" > Baidu </a><a href= "www.google.com" > Google </a><a href= "https ://cn.bing.com/"> Bing </a></nav>

  

4.aside

The aside is used to define the sidebar.

From a semantic point of view, aside needs to be associated with the main content.

<aside><p> This is the sidebar </p></aside>

  

5.header

Used to define the title bar section of a document.

Headers can be nested within article and sections, and can contain

For example, we often see the author information, Logo,icon and so on can be placed in the header.

  

6.footer

and the above header corresponds to the footer.

Footer is usually the copyright information, links and so on. This section is common on many websites, and most of the sites are at the bottom of the footer.

<footer>  <p>posted by:hege refsnes</p>  <p>contact information: <a href= "mailto:[ Email protected] ">  [email protected]</a>.</p></footer>

  

7.figure and Figcaption

Used to define some independent images, blocks of code, illustrations, and statistical charts.

Figuer the figcaption included. Figcaption is the description of a picture or block of code.

<figure>    < Figcaption>fig1. -The pulpit Pock, norway.</figcaption></figure>

  

Compatibility issues

Some of the new elements may not be available in earlier versions of IE8.

Need to download HTML5 Shiv script

Then insert the following code in the

  

 

Review the semantic elements of HTML5

Related Article

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.