Now, we have a decomposition base template, let's start adding some meat to the bones, and to provide some structure for the page.
Later in this book, we will deal specifically add HTML5 CSS3 features and other advantages. Now, we will consider when building the overall layout of the site which elements you want to use. In this section and the following related chapters semantics, we will cover a lot of content. When we use the word "semantic" refers to the way a given HTML elements describe the content of meaning.
If you look back HTML5 Herald screenshot (or viewed online website), you will find it divided as follows:
The header section with the logo and title
Navigation Bar
The text is divided into three
Column article and ad block
Footer contains some authors and copyright information
Prior to these different parts of the page to determine which elements fit, let us consider some options. First, we will introduce you to some new HTML5 semantic elements that can be used to help divide the page and add more meaning to the structure of the document.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
The header element
Naturally, we'll look at the first element is header. The specification to be succinctly described as "a set of entry or navigation aids."
In contrast with the usual assumptions, you can include a new header for each section to introduce an element of content. It is not only reserved for the page title (usually use a tag <div id = "header">). When we used herein the term "knob", we are not limited to the actual element described in the following part of sectionTop; Technically, we mean HTML5 called "segment content." This means that any piece of content may require its own title, there are several such blocks, even if this means that a page.
A header element can be used to the introductory or navigation assistance specific to any single part of a page, the entire page or application, or both.
Report advertisement
Although the header element is often placed at the top of the page or partially, but not to its defined position. The left side of the layout of your site may require that articles or blog title of the article is located in the content, even below the right side. Whichever method you use, you can still use them to describe the content header.
The section element
The next element you should be familiar with the section of HTML5 elements. Specification defines the following section:
The section element represents a generic section of a document or application. In this case, the subject of a grouping of content, typically with a title.
Further described, section should only be used as a container for general scripting or styling purposes. If you are unable to section used as a generic container (for example, in order to achieve the desired CSS layout), you should use what? Our old friend, div elements are semantically meaningless.
Back specification defines the contents of the section element should be "theme" and therefore not in a generic way packaging relevant content is not true.
Some examples of acceptable purposes section element comprises:
Various parts of the tabbed interface
Various parts of the "About" page; for example, part of the company's "About" page may include information about the company's history, mission statement and team
Different parts of the lengthy "Terms of Service" page.
Various parts of the online news site; for example, the article can be divided into sports, world affairs and some other economic news
Note: section proper use
Each time a new semantic markup available to Web designers, will be on what constitutes proper use of these elements, specifications of intent and other issues to debate. You may remember dl about the proper use of the elements discussed in the previous HTML specification. Not surprisingly, HTML5 is not immune to this phenomenon, particularly when it comes to section elements. Even the famous HTML5 authority Bruce Lawson (Bruce Lawson) admits section used in the past is not correct. For clarity, it is worth reading Bruce's article to explain his mistake.
in short:
section are generic, and therefore, if a more specific semantic unit is appropriate (e.g., article, aside or NAV), using, instead.
Report advertisement
section has semantic meaning; it means what it contains related in some way. If you section just a few words can not describe succinctly put all the content you want, you may need a semantically neutral container: humblediv.
That is, with the same semantics, it can be explained in some cases. If you think you can explain why you want to use a given element as opposed to other elements, it is to resolve. If someone requested, then the end of the discussion may bring a wealth of entertainment and for everyone involved, and may even contribute to a broader understanding of community norms to you.
Also keep in mind, if appropriate, section elements allow nested elements in the prior section. For example, for an online news site, "World News" section may be further subdivided into part of every major global region.
The article element
The article element is similar to section element, but there are some significant differences. This is according to the specifications of the definition:
Article element represents a document, page, application, or site integrity or independence of the composition, and can independently distribute or reuse in principle, for example in joint tissues.
The key terms are defined separate component, may be allocated independently. And a section can contain any content can be grouped by theme, a article content must be a single piece can stand on its own. This distinction may be difficult to make your mind clear, so when in doubt, try the joint test: if a piece of content can be re-released in the case without any modification to another site, or can be via RSS as updates are released, or on Twitter or Facebook like social media sites, it has the characteristics article.
In the end, they decide your article constitution, but here are some consistent with the specification Recommendation:
Forum Posts
Article in a magazine or newspaper
Blog entry
User comments on blog entries or articles
Finally, like section elements, article elements can be nested in other elements of the article. You can also nest a section article inside, and vice versa. It all depends on what you want to mark.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
The nav element
To be sure that the nav element will actually appear in every project. nav exactly express its meaning: a set of navigation links. Although the most common use of packaging nav unordered list of links, but there are other options. For example, you can nav element packaged in a text page that contains some or part of the main navigation links page paragraphs around.
