HTML5 semantic tag practices (blog pages) and html5 Semantics

HTML5 semantic tag practices (blog pages) and html5 Semantics
A blog page is modeled after HTML5 + CSS3. The overall effect layout is as follows:

The page layout is based on html5 elements. Therefore, it is important to familiarize yourself with HTML5 elements before you start, and then check whether its semantics is suitable for your layout.

The HTML5 Structure

It is very important that when writing HTML5 code, do not simply replace the <div> tag with the <section> tag in html5. Sometimes the <div> element is in the Semantics

Is still a good choice. For example, wrapper or container div

One of the new labels that can be used to replace the traditional div element is the

. The h1 element that contains an anchor is the title of our blog.

At the beginning, I used <section> to wrap the page content, but after reading some documents, I felt that this was not 100% correct in semantics. Select the div element,

Inside the div element, each blog is enclosed in its own article element.

Below a series of blogs, there is a paging link. Generally, the importance of paging links is not the same as that of <nav> (it can be used in multiple places, not just the main navigation) elements.

Equal. However, the layout of this blog still uses the paging link as a main navigation.

Before the <aside> element is modified, no special element is used as the sidebar. However, you can now safely use the aside element without worrying about syntax issues.

In this example, the aside element contains several section elements. There is a simple search box at the bottom of the sidebar. It allows us to see some new features of HTML5 forms.

One of them is the placeholder attribute.

The layout ends with the footer element. In this example, the footer element needs to be placed outside the div container so that the width of the footer element spans the entire page.

For the complete source code and CSS3, see the original http://line25.com/tutorials/create-a-typography-based-blog-layout-in-html5.

The above practice of HTML5 semantic tags (blog page) is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the help house.

Address: http://www.cnblogs.com/androidshouce/archive/2016/07.html