The <div> and <span> tags are used in conjunction with Cascading Style Sheets. By themselves, they do very little. In fact, the <span> tag has no visual effect on its contents. The only effect of the <div> tag is to block off its contents, similar to putting a <br> tag before and after a section on the page.
Like most tags, the <div> and <span> tags can take the class, id, and style attributes. It is through these attributes that styles are applied to the elements. The tags are used like any other HTML tags and can be nested within each other any number levels.
With the advent of HTML5, we will often use semantic (meaningful) tags in place of <div> and <span>: <header> to denote a header, <aside> for a sidebar or complementary content. For the most part in this course, we will stick to <div> and <span> tags, but keep in mind that CSS works fine for other tags, too.
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Div and Span</title> </head> <body> <div style="position: absolute; left: 0px; top: 0px; font-family: Verdana; font-size: 10pt; border-style: groove; border-width: 30px; border-color: blue; padding: 4px;"> This text appears in the <span style="font-style: italic; color: red;">upper-left hand corner</span> of the page.<br> It also has a big blue groovy border around it. </div> </body> </html>
This page will render as follows: