Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use HTML5 semantic tags for everyone, Xiaobian thinks it is quite practical, so share it with you as a reference, I hope you can gain something after reading this article.

I created a blog using HTML5+CSS3. Overall effect layout such as:

The page layout is based on html5 elements. So it's important to familiarize yourself with HTML5 elements before you get started, and then check if its semantics fit your layout.

The HTML5 Structure

It's important that when writing HTML5 code, don't simply replace tags with html5 tags. Sometimes elements are semantic

It is still a good choice. such as wrapper or container div

One of the new tags that can be used to replace traditional div elements is the element. In the element we can also place the main navigation menu used to wrap the page

elements. The h2 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, it felt that this was not 100% semantically correct. Or did you choose div element,

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

Below the series of blogs is a pair of pagination links. Usually pagination links are not as important as (they can be used in multiple places, not just the main navigation) elements

Reciprocity. But this blog layout still treats pagination links as a dominant navigation.

Semantically, there is no dedicated element as a sidebar until the element is revised. However, you can now safely use the aside element without worrying about syntax.

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 HTML5 forms.

One of them is the placeholder attribute.

The layout ends with a 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.

About "how to use HTML5 semantic tags" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.