CSS and (X)HTML lessons and tutorials
Understanding the structure of the elements will have many future implications... paradoxically it is often an unknown subject for most webmasters.
HTML tags have a particular structure. Actually, there are two principal groups of tags: "block" types and "inline" types.
This is very important, because the tags behavior is managed by their structure: position, view, overlapping,...
It is quite easy to understand the fundamental difference between both elemental structures: "block" elements are used to distinguish blocks of text such as titles, paragraphs, lists, block citations and more, the "inline" elements are used within the text to enrich it (hypertext link, strong, emphasis).
View the list of inline elements. Example: SPAN, EM, STRONG, IMG, BR, INPUT.
View the list of block elements. Example: DIV, P, H1...H6, UL, OL, TABLE, PRE.
These two groups determine the display specifics:
Example:
<p>Paragraph 1</p><p>Paragraph 2</p>
These two paragraphs will be displayed on two lines, because the <p> tag is a block type tag: each paragraph will be set on its own line.
Another example:
<strong>Toto</strong> and <em>me</em>
This text will appear on the same line because the defining tags are of the inline type.
At the structural and overlapping level, there are also important differences:
Inline elements also have distinctions, two principally: "replaced" elements and "non replaced" elements.
"Replaced" elements are the only ones with a dimension (height and width) by default. They are the following elements: <img>, <input>, <textarea>, <select> and <object>.
All the other inline elements ("non replaced") do not have a real "dimension", they only occupy the necessary space for their content. This is the case for <strong> or <em>.
Example:
<div><p>Paragraph 1</p><p>Paragraph 2</p></div>
<div> tag (block type) includes two paragraphs (blocks). This is fine.
But we could not write:
<span><p>Paragraph 1</p><p>Paragraph 2</p></span>
because the <span> tag (inline type) cannot contain block elements such as paragraphs.
Layout will be done using block elements, <div> being the most convenient for this because it is generic and is used as a container, a neutral zone (like a division).
Inline tags or elements are also called internal tags because they are used to give meaning to certain parts of text or block, staying within the text. For example, accentuation elements such as bold or italic characters.
Inline tags are meant to stay within the text to enrich it and bring meaning. They are not meant to be positionned on the page (even though it is possible) nor to have a dimension (height, width, depth), with the exception of "replaced" inline tags (see explanations above). Their size is determined by the text or element they include.
By default, inline tags have non existent internal and external margins (null value) to the contrary of block tags.
Block type tags have a structure that allows them to have dimension (height, width, depth), to contain other elements with a dimension, to have internal and external margins (padding and margin) but also to be positioned, that is to be able to contribute to page setting for the document.
Most of these properties are reserved for block elements. For example, an inline tag such as <em> cannot have dimensions, they will depend on the tag's content (text).
Note that you can easily switch from a block structure to an inline structure (and the opposite) thanks to the "display" CSS property.
By default, most of the block elements (actually all of them except for the neutral tag <div>) have internal and external margins that are not null. This detail is important because these margins are often differentiated according to the diverse navigators and you sometimes have to void them in order to avoid differences in display effects.
Remembering these default margins will spare you long annoying thoughts of compatibility between navigators.
Now that you are familiar with tags structure, you can go on to the next chapter, Positioning.
Raphael GOETTER
www.alsacreations.com