You should use the most descriptive tag for what the content is. The tags you use have nothing to do with how the content looks and everything to do with what the content is.
Since CSS has been the way to define the way the page looks. It needsa a different mindset, but once you understand how it is supposed to work, you can write much leaner, neater and more flexible code by avoiding layout tables. Basically compare div tag with table, In some cases table are take high loading time than div. But for the better and easy alignment we can go for table.
Use divs. Tables render really slowly in browsers. Remember Me? Advanced Search. Page 1 of 2 1 2 Last Jump to page: Results 1 to 10 of Div's aren't aligned, you need to align them in the right place. Tables act like the kind of table you fill out when your signing up for something Jeremy jfein.
There is a logical reason behind this. DIV based structure will reduce the length of code with compare to table based structure. These browsers do not print long floating elements well. If a floating element runs past the bottom of a printed page, the rest of the float effectively disappears and is not printed on the next page. For more flexibility with forms, try combining the fieldset element with a list: that way, the content has semantic value, and the developer has block-level elements to design with.
Because a div element marks up only one block at a time, the code base is much smaller than that of a table-based structure. Less code is code that is more readable, easier to maintain, faster to develop, less buggy, smaller in size, you get the point. You want as little code as possible to do the job right.
When a structure is tagged correctly, more divs are needed only for graphics. The examples below should inspire developers to dig deeper into the subject of clean code and ways to avoid divitis. Notice how the semantics in the code help keep the code readable. A menu as a list is easier to use than as a div and saves many lines of codes.
The li tag is a block-level element that can have background properties attached to it, as it is the anchor tag if its display attribute is set to block in the style sheet. Using a list also makes the page more accessible for people with disabilities and allows you to nest lists for sub-menus.
Use headings where possible. They add semantic value to content and boost website rankings in search engines. They also help people who use screen readers access and understand content.
Group similar pieces of content together and put them in lists. Lists are perfect containers. They save many lines of code and make code much more understandable than it would be with tables or a mess of divs. And lists let people with screen readers know how many elements they contain. So many main pages of websites already contain lists of news.
With a class for body , there is no need for contentSmall , contentNormal , contentWider and so on. Simply refer to the container through the body parent class and then control the width in the style sheet. The page type body class will tell you which one to refer to. Use the dl tag when listing key value pairs. Many people would probably use a table for this purpose. But using the dl tag saves code and makes it possible to float the dt and dd tags and set their widths for a nice layout.
The dl tag semantically links the dd to the dt tag. Both dt and dd are block-level elements. This example is of a form that is semantic and has containers for the layout. Getting a nice layout with forms can often be quite messy. Nested tables are often used for this purpose. But using lists instead tells screen readers how many elements a form contains. The fieldset is a block-level element that groups related data and can be nicely designed using CSS.
Using divs to manage structure header, menu, footer and so on and using other block elements, like p , ul , dl and form , where appropriate would make the world a much easier place to live. Lists are already widely used and perfect as containers. When developers start coding cleanly and semantically, they never look back. Two upcoming technologies look very interesting in how they deal with structure. CSS 3 will come with a nice feature called multi-column layout. Along with new structural elements, HTML 5 also introduces many new tags.
Some of the most interesting elements:. This may look ridiculous to is 19 years! The HTML 5 team wants to have a test suite with which at least two browsers completely pass before calling it a day. HTML 5 will probably be usable by , depending on how fast browser makers implement the features and distribute their browsers to users. The semantic structure of HTML 5 will save developers from having to add many divs, but marking up the rest of the content correctly will still be important for having a semantic website.
Last but not least, understanding the difference between block-level elements and inline elements and what every tag is for will still be very important. Another new feature will display block-level elements as tables with the help of CSS.
The display attribute for the wrapper would be set to table , and the display attribute for block-level elements that are columns would be set to table-cell. Table-based layout with CSS will be more robust than the float model, in which the layout often breaks when the font size is extreme.
Another positive effect is that columns will automatically be equal in height. With the release of IE8 , all three major browsers now support the styling of block-level elements as tables. It will probably be a while, though, before the majority of users actually use a browser that renders the feature as intended. The wrapper in this example, body is set to display as a table , and the relevant columns are set to table-cell.
This even works for list elements, as the example shows and it saves a div. This is a trimmed example; a normal structure would contain a header and footer.
This would have required an extra div to contain the row with menu , content and aSide.
0コメント