HTML5 Study Notes (iii): Semantic and new structure elements

Before HTML5, using a machine to read a webpage is very difficult, we use different styles of Div to mark different content, so in fact, the machine can not know which part of the page is the body, which part is the title, then in the HTML5, for this problem introduced the concept of semantics, A new label is also provided to specify the corresponding content type.

The benefits of semantics

• Semantic HTML is only used to build the structure of the Web page, after removing the CSS, the structure of the page will not change;
• A screen reader (if the visitor has a visual impairment) will "read" your page exactly according to your tag;
• Search engine crawlers also rely on tags to determine the context and the weight of individual keywords;
• It is important that your page is easy to understand, because the crawler largely ignores the markup used for performance, and only focuses on semantic tagging;

The relationship with Div

The div itself is nothing extra, and as a purely container for CSS style definitions, he is just a label, just to build the look and structure. It is therefore the most suitable label for containers. So it is not possible to discard the div because of the new label of HTML5, and every thing has its unique function. A DIV is just a way to use it to combine elements or add styles to them.

New structure Element Header element

Header elements represent headers for "Web page" or "section".

Usually contains the H1-h6 element or Hgroup, as the title of the entire page or a block of content. You can also wrap a section of the catalogue section, a search box, a nav, or any related logo.

The entire page does not limit the number of header elements, you can have multiple, you can add a header element for each content block:

1 <Header>2     <Hgroup>3         <H1>Site Title</H1>4         <H1>Website subtitle</H1>5     </Hgroup>6 </Header>

Header Use Note:

• Can be a "webpage" or the head part of any "section";
• There are no number limits.
• If Hgroup or H1-h6 can work well on their own, don't use the header.

Footer elements

The footer element represents the footer of "Web page" or "section" and usually contains some basic information about it, such as: Author, related document link, copyright material. If the footer element contains the entire section, then they represent some other similar information such as appendices, indexes, promotions, license agreements, tags, categories, and so on.

1 < Footer > 2     [email protected] small C3</footer>

Footer Use Note:

• Can be a "webpage" or the bottom part of any "section";
• There are no number limits, except that the contents of the package are different, others are similar to the header.

Hgroup elements

The Hgroup element represents the title of "page" or "section", and when the element has multiple levels, the element can place H1 to H6 elements, such as a combination of the main title and subtitle of the article

1 < Hgroup > 2     < H1 > This is an introduction to HTML 5 semantic tagging and a more concise structure </H1>3     <  h2>HTML 5</h2>4</  hgroup>

Hgroup Use Note:

• If you need only one h1-h6 tag, you don't have to Hgroup.
• If you have multiple H1-H6 labels, use Hgroup
• If there are multiple headings and other article data in succession, the H1-H6 tag is wrapped with hgroup and placed in the header tag along with other article metadata

Nav element

The nav element represents the navigation link area of the page. Used to define the main navigation section of the page.

1 <nav>2     <ul>3         <Li>HTML 5</Li>4         <Li>CSS3</Li>5         <Li>Javascript</Li>6     </ul>7 </nav>

But I sometimes can't help but want to use it, for example: Sidebar on the table, breadcrumbs, search style, or the next article, but in fact, the norm is that NAV can only be used in the main navigation section of the page. The list of links in the footer area, although pointing to different areas of different sites, such as the terms of service, copyright pages, and so on, these footer elements can be used.

Nav Use NOTE:

• Used in the main navigation section of the entire page, do not use the nav element is inappropriate;

Aside elements

Aside elements are included in the article element as the main content of the subsidiary Information Section, wherein the content can be related to the current article relevant information, tags, rankings interpretation. (Special section)

Use the Subordinate Information section as a page or site global outside of the article element. The most typical is the sidebar, where the content can be a log concatenation, other groups of navigation, and even ads, these content related pages.

1 <article>2     <P>Content</P>3     <aside>4         <H1>About the author</H1>5         <P>Little North, one on the front.</P>6     </aside>7 </article>

Aside use summary:

• Aside of the main content within the article,
• Outside the article can do the sidebar, there is no article corresponding to it, it is best not to.
• In the case of ads, other log links or other classified navigation can also be used

Section element

Section elements represent "sections" or "segments" in a document, and "segments" can refer to sections in an article by topic; "section" can refer to a group in a page.

Sections are usually also titled, although sections in HTML5 automatically downgrade the title H1-h6, but it's a good idea to downgrade them manually. As follows:

1 < Section>2     <H1>What's section?</H1>3     <article>4         <H2>About Section</H1>5         <P>Introduction to Section</P>6         < Section>7             <H3>about other</H3>8             <P>Introduction to other sections</P>9         </ Section>Ten     </article> One </ Section>

Section Use NOTE:

• A page can be divided into sections as profiles, article entries, and contact information. However, in the article pages, it is best to use article. section is not a container element in the general sense, and you can use div if you want to be convenient for styling and scripting.
• Represents a section or segment in a document;
• Article, Nav, aside can be understood as a special section, so if you can use article, NAV, aside do not use section, no practical meaning with div

Article elements

Article elements are easiest to confuse with sections and Div, in fact article represents a self-contained content in a document, page, or site, and is designed to be developed or reused independently by developers. such as forum posts, blog articles, a user's comments, an interactive widget gadget. (Special section)

In addition to its content, article will have a title (usually in the header), and there will be a footer footer. Let's give some examples of article to better differentiate article, sections, and Div:

1 <article>2     <H1>An article</H1>3     <P>Article content:</P>4     <Footer>5         <P><Small>Copyright: Html5jscss Network, small north</Small></P>6     </Footer>7 </article>

Article Use NOTE:

• Self-contained case: with article
• is relevant: Use section
• No semantics: with Div

Address element

As contact information appears, postal address, e-mail address, etc., generally appear in footer.

Time element

Used to mark the publication time of an article.

<datetime= "2012-02-15"  pubdate>February 15, 2012 </  time>

There are generally three components

• Machine-readable timestamp: The format must be a number of months and days separated by a minus sign, if you increase the time, then add the letter T after the date and then follow the 24-hour format time value and time zone offset, shaped like datetime= "2012-2-15t22:49:40+08:00"
• People can recognize the text content: The format is arbitrary, as long as can read.
• An optional pubdata tag: Pubdata is a Boolean value, and if necessary, write the property name as well pubdata. But for the sake of beauty, we can also write Pubdata= ""

We also note that if the time is in a article, it indicates when the article was published, and if it is not in article, the entire document is published.

1 <article>2     <Header>3         <H1>Html5jscss Net< Timedatetime= "2012-02-14">February 14</ Time>Was founded</H1>4         <P>Release< Timedatetime= "2012-02-15"pubdate>February 15, 2012</ Time>Category: Front-end AC</P>5     </Header>6     <P>Hello World!</P>7 </article>

HTML5 Learning Note (iii): Semantic and new structure elements