<div> and <span> Element Tutorials

There are 2 elements in HTML that are used as "containers": <div> and <span>. Both of these elements do almost nothing by themselves.

<div> Elements

A <div> element is a block-level container that serves as a section of a web page that can contain content within it. <div> elements are used to structure and layout the content of web pages with the use of CSS and also to add styles to the content within the <div> elements.

An ID or class attribute is typically included within the starting <div> tag. A unique ID attribute should only be once per HTML document.

The HTML code below shows you how to include ID or class attributes within <div> elements and how to apply styles to the <div> elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> #header { width:100%; height:200px; } #content { width:100%; } .content_box { width:500px; } #footer { width:100%; height:200px; } </style> </head> <body> <div id="header"> </div> <div id="content"> <div class="content_box"> </div> <div class="content_box"> </div> </div> <div id="footer"> </div> </body> </html>

<span> Elements

A <span> element is an inline container. <span> elements wrap around a section of an HTML element and styles are applied to the content within the <span> element.

For example, if you want to apply styles to only a section of text within a paragraph, you would wrap the text within a starting <span> tag and an ending </span> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> span { color:red; } </style> </head> <body> <p> This is some content. <span>This content is made bold</span>. </p> </body> </html>