HTML structure of Web page layout standard

Are you learning Web Standard CSS page layouts? Are you still not fully aware of the pure CSS layout? There are usually two ways to pay special attention:

The first possibility is that you have not yet understood how CSS handles pages. Before you consider the overall performance of your page, you should consider the semantics and structure of the content before adding CSS to the semantics and structure. This article will show you how to structure HTML.

Another reason is that you are not at all comfortable with the very familiar performance layer attributes. For example: cellpadding, hspace, align= "left" and so on, do not know what to convert to the corresponding CSS statement. When you solve the first problem and know how to structure your HTML, Storm Binbin gives a list of what CSS to use instead of the original performance attribute.

Structured HTML

When we were just learning how to make a Web page, we always thought about how to design, consider the pictures, fonts, colors, and layout plans. Then we use Photoshop or fireworks to draw out, cut into small pictures. Finally, all design restores are performed on the page by editing the HTML.

If you want your HTML page to have a CSS layout (css-friendly), you need to look back and start thinking about the semantics and structure of your page's content, regardless of the "look".

The appearance is not the most important. A well-structured HTML page can be displayed in any appearance, and CSS Zen Garden is a typical example. CSS Zen Garden helps us finally realize the power of CSS.

HTML is not just read on a computer screen. Your Photoshop-designed footage may not appear on PDAs, mobile phones, and screen readers. But a well-structured HTML page can be defined by different CSS, displayed anywhere, on any network device.

Start Thinking

The first thing to learn is "structure", also called "Semantics". The term means that you need to analyze your content blocks, and the purpose of each content service, and then build the appropriate HTML structure based on the purpose of the content.

If you sit down and carefully analyze and plan your page structure, you may get a few pieces like this:

Flag and Site name
Main Page Content
Site navigation (Main menu)
Sub-Menu
Search box
Ribbon (e.g. shopping cart, cashier)
Footer (copyright and related legal notices)

We typically use DIV elements to define these structures, like this:

<div id= "Header" ></div>
<div id= "main" ></div>
<div id= "Content" ></div>
<div id= "NAV" ></div>
<div id= "Subnav" ></div>
<div id= "Search" ></div>
<div id= "Footer" ></div>

This is not a layout, it is a structure. This is a semantic description of the content block. When you understand your structure, you can add the corresponding ID to the div. A div container can contain any block of content, or it can nest another div. Content blocks can contain arbitrary HTML elements-headings, paragraphs, pictures, tables, lists, and so on.

According to the above, you already know how to structure HTML, and now you can define the layout and style. Each content block can be placed anywhere on the page, specifying the block's color, font, border, background, alignment properties, and so on.

practice the structure of

The above is just the most basic structure, in practical applications, you can adjust the content block as needed. There are often div nesting cases, and you'll see that there are other layers in the "container" layer, similar in structure:

<div id= "header" >
<div id= "logo" >

<ul>a list</ul>
</div>
<div id= "NAV" >
<ul>nav list</ul>
<form>search</form>
</div>
</div>

Nested div elements allow you to define more CSS rules to control performance, for example: You can give #header a rule to put them right, or center, and then give #logo a rule to leave it to the left, and give #nav's list and form another completely different performance.

Reprint: http://blog.bingo929.com/web-standard-html-structured.html

HTML structure of Web page layout standard