Home > Developer > Web Develop
Use the HTML+CSS document structure before HTML5
Diagram illustrates a typical two-column layout marked up using DIVs with ID and class attributes. It contains a header, footer, and horizontal navigation bar below the header.
The main content contains an article and sidebar in the right.
(translation: Shows a typical two-column layout tag using the div's ID and class generic.) It contains a header, footer, and landscape navigation bar. Main content includes an article and the sidebar on the right )
Disadvantage 1. SEO search engine to the page content crawl
2. The document structure definition is ambiguous
So HTML5 appear, solve the above problems, specifically add header, footer, navigation, article content and other structure-related structural element tags
The DIV elements can is replaced with the new Elements:header, nav, section, article, aside, and footer.
(translation: div elements are replaced with new elements: header headers, nav navigation, section chunks, article articles, aside Sidebar, and footer footer.)
HTML5 Structure Code
| 1234567891011 | |
Semantic tag interpretation for HTML5
<main> Defining the main content
| 123456 | |
<nav> define a collection of principal modules or navigation links
| 1234567 | |
<article> is a special section tag that has more explicit semantics than section and represents a separate, complete block of related content that can be used independently of the rest of the page. For example, a full forum post, a blog post, a user comment, and so on. In general, article will have a title section (usually included in the header) and sometimes include footer. Article can be nested, the inner layer of the article external layer of the article label has affiliation. For example, a blog post can be displayed in article, and some comments can be embedded in the form of article.
| 12345678910 | |
<aside> is considered to be independent of the content and can be split apart without affecting the whole part of the content that is almost unrelated to the rest of the page. It usually behaves as a sidebar or embedded content.
| 12345678910 | |
<section> represents an area (or section)in a document, such as a theme group in the content, which generally contains a title (heading).
It is common to identify each <section> by including a caption ( - Element) as a child node
1234
<section> <h1>这里是section标题...</h1> <p>这里是section标题对于内内容...</p></section>
<figure> 元素Represents a separate piece of content. Used to group elements. Used for pictures and picture description combinations.
123456789101112
<!-- Just a figure --><figure> <imgsrc="figure.png" alt="figure.png图片按" title="figure图片"></figure><p>段落</p><!-- Figure with figcaption --><figure> <imgsrc="figure.png" alt="figure.png图片按" title="figure图片">picture"> <figcaption>figure图片描述</figcaption></figure><p>段落.....</p>
<footer> a footer that defines the entire page or part of it (and usually contains information such as original author, copyright information, contact and sitemap, links to documents, etc.)
123
<footer> 原创作者;版权信息;联系方式;文档相关链接等...</footer>
The
pages or section headings . You can add more information to the header element by using the new HTML5 element Hgroup . (head main title/subtitle)
1234
<hgroup> <h1>Main title</h1> <h2>Secondary title</h2></hgroup>
Resources
http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/
https://samdutton.wordpress.com/2015/04/02/high-performance-html/
Https://developer.mozilla.org/CN/docs/Web/HTML/Element
Http://www.cnblogs.com/houodeit/archive/2012/05/27/2519798.html
Http://alistapart.com/article/previewofhtml5
Avenstar
Source: http://www.cnblogs.com/zjf-1992/p/6182406.html
About focusing on web front-end development
The copyright of this article is owned by the author, please indicate the original link.
A new semantic label for HTML5
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
