About the practice of HTML5 semantic tags (blog page)

Imitate using HTML5+CSS3 to make a blog page. The overall effect layout is as follows:



# The page layout is based on html5 elements. So it’s important to familiarize yourself with HTML5 elements before getting started, and then check whether its semantics fit your layout.

　The HTML5 Structure


##It is very important that when writing HTML5 code, do not simply use the

tag in html5 ;section> tag instead. There are times when the

element is still a good choice semantically. For example, wrapper or container p

One of the new tags that can be used to replace the traditional p element is the

element. In the

element, we can also place the

element used to wrap the main navigation menu

of the page. The h1 element containing an anchor is the title of our blog.




At first I used

to wrap the content of the page, but after reading some documents, I felt that this was not 100% semantically correct. Still selected the p element,
Within the p element, each blog post is wrapped in its own article element.




Below a series of blogs, there are a pair of paginated links. Usually the importance of pagination links is not equal to that of the

(which can be used in multiple places, not just the main navigation) element
. But this blog layout still treats pagination links as the main navigation.




Before the

element was revised, there was no semantically specific element for a 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 gives us access to 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 p container, so that the width of the footer element spans the entire page.



The above article about the practice of HTML5 semantic tags (blog page) is all the content shared by the editor. For more related content, please pay attention to PHP Chinese Net (www.php.cn)!

-->