HTML Reference

Boxes

All the tags contained in the body tag, the display tags, all render a rectangle around them. In HTML it is all rectangles! How these rectangles interoperate with each other when contained and floated differs though.

Block: Leading and closing line breaks.
Inline: Displayed as is, no line breaks added.

There are more display type, but these two form the basis of the other displays. A block element is like a paragraph of text, or a distinct division. An line element is normally an element that can be inlined with other elements in a flow, so text modifications, images etc.

Flowing around floated elements

Unfortunately, non floated elements don't flow around floated elements. The content does, but not the actual elements. This tends to cause obvious problems when the background color changes. Two solutions exists; either float the other element, or make it smaller in size.

Boxes in boxes

It is quite common to embed elements in elements, even the block elements. In fact, the inline tags only make sense when enclosed in a block element (the body tag is of the block type). Block elements cannot be contained in inline elements if you are looking to produce valid HTML, though at times only certain designs are possible if you break the rules; the practice is discouraged though.

The box model when contained differs from browser to browser, the most common quirk is, the empty box containing another box with a margin. Here the margin gets applied to the outer box and not the inner box in some browsers, which generally does not give you the desired effect.

Empty Boxes

If an element does not contain anything (even a space), the element may not be rendered. The way round this is to include at least a space (non breaking space [ ] makes the point more clearly), and to reduce the font-size to 1px.

Conclusion

Once you realise it is all boxes in the display, then debugging a design layout is a lot easier to do if you just flip a border or background-color on. The background-color is perhaps the safest way as you won't introduce more width or height to an element that adding a border would create.

In the past tables were often used to create design layouts, and it is still valid today, but you have to be careful to keep this practice to a minimum. Tables are in fact 3 boxes a piece (a table, a row and a cell), if you embed tables you are adding 3 boxes every time and this can have an effect on the performance of the render model. Embedded tables can also make your HTML code rather confusing when it comes time to edit the content.

Add a Comment - CyberVisor - Concept Visor

Bookmark and then activate Concept Visor to comment on this page, or any other page on the web. The Concept Visor also allows you to view comments made on the page.

Concept Visor

Links

If you have found this site useful please consider linking to it @ http://html.poisedsolutions.com/

Social BookMarks

Site Designed & Developed by Poised Solutions

If you wish to discuss hiring Poised Solutions for an information technology (IT project please get in contact
or visit the main PoisedSolutions IT Consultancy Website.
Poised Solutions is based in the Thames Valley area of the UK.