HTML Div and Span Elements

This topic covers the purpose and applications of the div and span tags.

<div> Tag:

We can break up a webpage into sections, called divs. The div tag is known as Division tag. Each of these divs can have its own styling, using either a class or an id. Coders commonly create separate divs for headers, navigation bars, main content, and footers.

Example:   Try It

 
<style>    
.info {
  border: 5px solid yellow;
  background-color: lightgreen;    
  text-align: center;
} 
</style>
<div class="info">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>

Result:

All elements within this div will be contained in a section that has similar styles.

<span> tag:

Div element is used to style whole blocks of text—paragraphs and headings. But span tag is used to style bits and pieces of those blocks. div is a block-level tag and span is an inline tag.

Example:   Try It

<style>    
.main{
Color: red;
font-style: italic;
font-size:24px
}
</style>
<p>These directions are important.  Read them carefully.</p>

Result: