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

Today, the editor will share with you the relevant knowledge points about how to use div,article,section in HTML5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

DIV

HTML specification: "div element has no special meaning"

This. The tag is the one we see the most and use the most without any semantics. It is used as a hook for layout and styling or scripting.

Department

HTML specification: "A section element represents a common part of a document or application. In this context, a section is a topic grouping of content, usually with a title."

As opposed to div's non-semantic, simply pointing to section is div with semantics, but don't think it's that simple. A section of thematic content, usually with a title to see here, we may think, so a blog post, or a separate comment is just right to use the part to see:?

"it makes sense to encourage authors to use the content of federated elements, not section elements.

When the content of the element is aggregated to make more sense, the article should be used to replace the part.

So, when should the part be used? let's move on to:

"examples of sections are chapters, each tab page in a tabbed dialog box, or the numbered section of a paper. The home page of a website can be divided into several sections for introduction, news and contact information."

Typical scenarios for some applications are the chapter of the article, the tab in the middle of the chapter and tag, or the numbered part of the paper. Interest, because the feeling section and the following introduction of artilce are more suitable for alternative applications, this topic will be discussed in a special article in the future, which will be skipped here for the time being.

Note that the W3C also warns:

"the section element is not a generic container element. Authors are encouraged to use the div element when it is needed for styling purposes or for ease of scripting. As a general rule, the section element is appropriate only if the content of the element is clearly listed in the outline of the document."

A section is more than just an ordinary container label. DIV should be used when a tag is just for styling or for scripting purposes. In general, the part is applicable when the content of the element appears explicitly in the outline of the document.

Article

HTML specification: "article elements represent independent components of a document, page, application, or site, and can in principle be distributed or reused independently, such as in federated organizations."

In general, articles have a title section (usually included in header) and sometimes footer. Although section is also a thematic piece of content, the article itself is independent and complete in terms of structure and content.

. HTML Spec forum posts, articles in a magazine or newspaper, blog entries, user-submitted comments, an interactive widget or gadget, or any other content-irrelevant item. "

When the article is embedded in the article, in principle, the content of the internal article is related to the content of the outer article. For example, in a blog post, an article that contains comments submitted by the user should be absconded in the post containing the blog post.

The question is how to calculate "complete independent content"? One of the easiest ways to judge is to see if the content is complete in RSS feed. See whether this paragraph is complete and independent without the context in which it is located.

Example:

Html page:

Copy the code

The code is as follows:

Beginners in html5

Home page

About

Service

information

contact

This is a web page made of HTML5.

HTML5 + CSS3 web pages

Lorem ipsum dolor sits, smoothing elitVivamus ac iaculis safely. Maecenas id fermentum dioo . The kind of permission granted to each indigenous person and each visionary. Fusce sagittis porta mauris, Ekulis Egastas, Mace Puestre Emmett. Sed ullamcorper orci eu dolor egestas sodales . Donec tempor aliquet pulvinar . Sed sed turpis sapien,ac dictum sem . Phasellus metus leo, in the untimely gravity, bibendum id magna. Vivamus ac nunc Tortor . Lorem ipsum dolor sat down and stayed in good shape. In quis justo ligula. Ulcers in Suspendisse sodales can have consequences. Aenea condiment eros mi. Duis consectetur placental vehicle.

Demonstration of list items

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

UL >

Lorem has Amet who sits sadly.

Lorem has Amet who sits sadly.

Lorem has Amet who sits sadly.

Lorem has Amet who sits sadly.

Lorem ipsum dolor sit amet

That's what the aside part is all about.

At Aliquam id lorem actellus fringilla bibendum of Turpis, etc. In utautor justo. Integers and semper hendrerit. Aenean has intermittent autoscleroses of body odor and sap dapibus miultricies is sick. Curabitur a nunc nisi,ac ornare nisi. Semper Placerat Accumsan. Cras eu nibh lorem . Sed sat on ligula vitae orci molestie sollicitudin and sat on odio. Maori non-elite accilsums eleifend. Maecenas eu velit sits in amet neque iaculis dapibus. Integer mol est id dignissim blandit. Quisque malesuada mattis sollicitudin . Pellentesque volutpat pellentesque luctus . Lorem ipsum dolor sat down and stayed in good shape. Sed cursus au s sem convallis ullamcorper . Donec vitan magna nec lacus varius pellentesque vel nec diam . Morbi sagittis,magna sit amet sollicitudin ultricies,neque orci fermentum ipsum, not cursed before the game. Donec neque is in sem suscipit faucibus. Aliquam nisi turpis,volutpat quis suscipit in,varius vitae nunc .

& copy; copyright Dave Woods 2009

Css page:

Copy the code

The code is as follows:

@ charset "utf-8"

/ * CSS document * /

# container {

Width: 840px

Margins: 20px automatic

Background: # fff

Inside margin: 30px

Overflows: hidin

}

/ *-header-* /

# main-navigation {

Border-bottom:5px solid#666

}

# main-navigation ul {

Overflow:hidden

Width: 100%

List-style: none

Font size: 1.6em

}

# main-navigation li {

Float:left

}

# main-navigation li a {

Background: # 999

Margin: 0 5px 0 0

Inside margin: 5px 30px

Displaying: block

Color: # fff

Text modification: none

}

# main-navigation li.current a {

Background: # 666

}

# main-navigation li a:hover {

Background: # 777

}

/ *-articles-

Article {

Width: 100%

Overflows: hidin

}

Part {

Float:left

Width: 500 pixels

}

/ *-articles-

Except {

Float:right

Width: 310 pixels

}

/ *-articles-

Footer {

Width:840px

Margins: 20px automatic

Font size: 1.4em

Text-align:center

}

These are all the contents of the article "how to use div,article,section in HTML5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.