11. How to give your web page some structure
Now, it's time to finally give our web page some content. But remember, you can't put text directly inside the body -- only tags.
(X)HTML has several structural tags that are specifically designed to contain text and to divide up the page into logical parts.
The first of these is the <div> tag. divs can contain text and inline elements, as well as other divs, and pretty much any other content tag.
(X)HTML has two main types of content elements -- inline elements and block elements.
Inline elements -- text formatting tags, img tags, form input tags, etc. -- are those that either apply to text or should be treated as text, flowing about the document's structure wherever they can.
That structure is defined by block elements, which have a clearly-defined rectangular shape. div is a block element.
Like text, inline elements cannot be contained directly by body. Instead, they must go inside a block element.
1) Let's add a div now.
<div> is a pretty broad tag, with no specific purpose other than to group together areas of content. When possible, you should still not put text or inline elements directly inside a div, but instead enclose them inside a more specific element.
One of these is the paragraph tag, <p>, which is also a block element. You'll learn about some of the others later.
2) Now, we'll put a paragraph tag in our div.
3) Finally, for some text.
4) We can put as many elements inside a div as we want, so let's add another paragraph.
The final element we'll show you today is the <span> element. Without some more advanced knowledge of XHTML and CSS, you won't understand its full potential, but you should still know about it.
This tag is used to define a span of text or other inline elements. span itself is an inline element.
5) Let's wrap a <span> tag around this second sentence.
All three tags you've learned about in this tutorial will be very useful when applying CSS styles to a web page.
6) Now, let's Save the web page and take a look at it in our browser.
By default, the <div> and <span> tags will not affect the elements they contain.
The <p> tag, however, usually has a top and bottom margin, which we can see by the spaces above and in between our two paragraphs.
This is the end of the tutorial. You now know a little bit about three structural tags, and what inline and block elements are.
