HTML5 the practice of Semantic tagging (blog page)

Modeled after the use of HTML5+CSS3 made a blog page. The overall effect layout is as follows:

The page layout is based on the HTML5 element. So it's important to familiarize yourself with the HTML5 element before you start, and then check that its semantics are appropriate for your layout.

The HTML5 Structure

It is important that when writing HTML5 code, do not simply replace the <div> tag with the <section> tag in the HTML5. There are times when <div> elements are in semantics

is still a good choice. Like wrapper or container div.

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

The <nav> element. The H1 element that contains an anchor point is the title of our blog.

At first I used <section> to wrap the contents of the page, but after reading some of the documents, I felt that this was not semantically 100% correct. Or did you select the DIV element,

Within the div element, each blog is wrapped in its own article element.

Below a series of blogs, there are a couple of page links. Usually the importance of paging links is not the same as <nav> (can be used in multiple places, not just the main navigation) elements

Peer. But this time the blog layout is still a paging link as a primary navigation processing.

Before the <aside> element was revised, there was no semantically specific element as a sidebar. However, it is now safe to use the aside element without worrying about grammatical problems.

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 of the new features of the HTML5 form.

One of them is the placeholder property

The layout finally 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.

The complete source and CSS3 sections are described in the original HTTP://LINE25.COM/TUTORIALS/CREATE-A-TYPOGRAPHY-BASED-BLOG-LAYOUT-IN-HTML5

HTML5 the practice of Semantic tagging (blog page)