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.

 

Html5 new tag elements such as: The newly added header and footer labels are mainly used to represent the DOM semantics.
No special style
Before HTML5, both header, body, and footer must be expressed using div.
The new HTML5 labels can be expressed directly using clear labels such as header, article, and footer to make the structure of the document clearer, in the previous design, div and the property id = "container" were required. Now we can use a label similar to article to express it. It is just more convenient to act on DIV.

How to understand html Semantics

How to Understand the semantic HTML Structure
Semantic html occupies a large part of the interview questions about the html structure. So why should we use semantic HTML? What are the benefits of semantic HTML?

HTML provides the context structure and meaning of the webpage document content. html itself does not show any performance. We can see that The Semantic HTML structure must emphasize the HTML structure first.
The HTML structure is the skeleton of the page, and a page is like a house. The HTML structure is a steel reinforced concrete wall, if a house does not have a steel reinforced concrete wall, it is a pile of bricks, can not live, can not work. Css is the decorative material, the log floor, the marble, the paint, and the decoration of the house. CSS is powerful and needless to say. If css has no html structure, it is a pile of boards, paint Together, no practical use value. CSS relies entirely on the (X) HTML document that references it. If you want to make full use of CSS capabilities, it is necessary to provide html with both clean and structured content. "HTML is a universal term for publishing hypertext on the Internet, HTML uses tags to structure text ".
How to Write a semantic HTML structure?
HTML is a method to supplement the structure and meaning (or semantics) of text content. It will tell us: "This line is a title, which forms a paragraph. These texts are the project list, which is a hyperlink to another file on the Internet ." It is worth noting that HTML should not tell us: "These texts are blue and red. This part of content is the rightmost column, and this line of content is italic ." These information related to performance is the work of CSS. When developing a front-end development, remember: HTML tells us what a piece of content is (or its meaning), not what it looks like. When we mention "semantic tag", the HTML we call should be completely separated from the presentation information, and the labels should all define the structure of the document in a semantic manner.
The Semantic HTML structure is actually very simple. First, grasp the semantics of each tag in html. <div> is a container, and <strong> is an emphasis; <ul> <li> is an unordered list... When you see the content, think about what label can better describe it, and what label is used.

What are the benefits of semantic HTML structure?
We know the newly added tags of HTML5, such as
1. Clear structure of the page when the style is removed or lost:
Html itself has no performance. We can see that
2. The screen reader (if a visitor has a visual fault) will "read" Your webpage based on your tag.
For example, if you use a semantic tag, the screen reader will "spell your words one by one" instead of trying to complete its pronunciation.

3. PDA, hand... the remaining full text>