Web Design |
block-level tags |
||||
main menushelp pagesprinter-friendly/text-only version
|
Text formatting tags form the largest subset of HTML tags. They are themselves divided into two main groups: block-level tags (the subject of this page) and inline tags, which have their own page. The distinction matters because you need to be careful which tags you can nest within others. Basically:
Block-level tags are so called because they apply formatting to an entire block of text. In other words, whatever is between block-level tags will be separated from other text by blank lines. (You can vary how wide these blank spaces are by defining style sheet properties known as margins and padding, but we won't come to them properly until lecture 4.) The most common block-level tags are <p> tags and headings, and I discuss both in detail below: some of the more obscure block-level tags are then listed at the end. <p> tags<p> stands for Paragraph. It is the most ubiquitous of the text formatting tags - possibly of all tags. If you view the source code of this page, or any of the pages on this or the sample site, you'll see that the tag starts most of the lines of text. For a clearer example, have a look at the following link, which is the same passage of text from The Law of Freedom as was given on the page about text handling. This time it has been correctly formatted, using <p> tags rather than expecting the line breaks and spaces in the plain text file to do the work. And, as before, you can try resizing the new window, to see how the browser is able to adjust the text accordingly. Or, try resizing the text, by the means also described on the opening page. Hopefully this'll all give you some idea of the potential fluidity of web page design. headingsBasically, you should define all your separate blocks of text with <p> tags unless you want a bit of text to do a very specific job. The most obvious one of these jobs is to turn some text into a heading. Headings are the next most common block-level tags. Actually, rather than being a single tag they are more like a "family" of six tags. Heading tags are numbered from 1 to 6, with 1 being the largest, and 6 the smallest: indeed, heading styles 5 and 6 are often rendered smaller than normal text! Though the number looks like an attribute, it isn't: therefore, being part of the tag name, the number should also appear in the closing tag. Hence, the six tags are <h1>, <h2> and so on down to <h6> Follow this link for a representation of all 6 heading styles. The reason I have made this a separate page is in order to show you how your browser will render each tag in its default configuration. In the lecture we defined the <h1> tag in the style sheet. I hope by now you are getting the idea of how all this works. You can either stick with the browser's default style (as in that pop-up window with all six heading tags) or choose your own and redefine one or more of the properties. Some other comments: don't confuse headings with the <head> tag, nor with page titles. Titles appear in the blue bar at the top of the screen. Headings appear in the main browser window, being part of the page body. You can put headings anywhere you like, as well - you are not restricted to having them only at the top of text, or used as headings for subsections (though that's how I've used them on this site). Note also that the search engine Google will give a higher ranking to words found in heading tags. On the other hand if you think this a good reason to make all your text into headings, please don't! Proper headings give a page structure, and some of the more sophisticated browsers can make proper use of them: in Opera, for instance, you can type S to skip to the next heading, and W to skip back one. Used properly and well, therefore, headings can provide both visual and structural depth to your page. other block-level tagsWe've already seen one other block-level tag: <blockquote> (trivia fans might like to note that this is the longest single tag name). That defaulted to rendering the text with a wider left-hand margin. Use it for, well, what it says really - rendering long quoted passages from other authors. A similar block-level tag is <address> (try it to see what it does). As ever, you can override the browser default style with your own.
The last block-level tag is <div>. <div> doesn't actually have any intrinsic formatting of its own. But it's quite a useful tag if you want something to happen on your page that applies not only to text but to images and tables as well. For example, I have styled <div> tags on this site as follows: div { text-align: center; } As I said at the top of this page, <div> tags are the exception to the rule that you should not nest block-level tags within other block-level tags. Here are two pieces of text enclosed within <p> tags, but the second is nested within a <div> tag as well: A random sentence. Another random sentence. What's actually happened here is that the <p> tag has inherited a property (that of being centre-aligned) from the <div> tag. This probably seems a bit obscure, and is, really: but it's a useful thing to remember. Technically the table formatting tags are block-level tags too but I am not going to introduce them at this stage. They have an entire lecture devoted to them: lecture 4. | ||||
Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.
