HTML-Lesson 15
div and span; id and class
Div and span tags
By themselves, 'div' and 'span' tags are meaningless. However, when they are used with a CSS file they can control the properties of a section of web page. The difference between div and span is that span is used for very short portions of the page and div is used for longer portions.
Examples of how these are used are:
- Div is used for the material on the page, limiting its width
- Div is used for headers and footers so that they do not print. Click on 'File' and 'Print preview' to see a printer friendly version!.
- Div's are used to locate a lot of the graphics used on this site
- Spans are used for the code examples. Bold red for direct code and light green for user generated text.
Id's and classes
The attributes used with 'div' and 'span' tags are 'id' and 'class' and their values are the names that you give them in your CSS file. The difference between them is that any 'id' can only be used once on any web page and any 'class' can be used as often as you like. E.G. 'header', 'menu' and 'footer' are 'id' div's because each is used only once on a page. In contrast, 'noprint' is a 'class' div because it is used twice on each page. This is used to ensure that neither the top portion of the page or the footer appears in the printed version.
Bold and Italic
The old tags
The old standard for bold and italic tags were <b> and <i>. E.G.Bold and italic.
The new tags
The new standard for bold and italic tags are <strong> and <em>. E.G.Bold and italic.
Block level and inline tags
In html, tags are loosely divided into 'block level' and 'inline' tags. The difference between these types is that 'inline' tags can be nested within all other tags, while 'block level' tags can be nested within other 'block level' tags, they must not be nested within 'inline tags. Another difference is that there is a line break before and after the block level tag. Most of the time you need not worry about this. However, very occasionally a 'you can not nest...' error message crops up when you validate your page. This is the reason for the error message. See also HTML Reference Lesson 1 for more information.
