How to Use the Span and Div HTML Elements

Use span and div with CSS for greater style and layout control.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Use the Span and Div HTML Elements." ThoughtCo, Jun. 19, 2017, thoughtco.com/span-and-div-html-elements-3468185. Kyrnin, Jennifer. (2017, June 19). How to Use the Span and Div HTML Elements. Retrieved from https://www.thoughtco.com/span-and-div-html-elements-3468185 Kyrnin, Jennifer. "How to Use the Span and Div HTML Elements." ThoughtCo. https://www.thoughtco.com/span-and-div-html-elements-3468185 (accessed September 22, 2017).
SPAN and DIV tags in HTML
SPAN and DIV tags in HTML. courtesy J Kyrnin

Many people who are new to web design and HTML/CSS use the  <span> and <div>  elements in interchangeably as they build out webpages. The reality, however, is that each of these HTML elements serve different purposes. Learning to use each for its intended purpose will help you develop cleaner web pages who code is easier to manage overall.

Using the <div> Element

The div element defines logical divisions on your web page.

It is basically a box in which you can place other HTML elements that logically go together. A division can have multiple other elements in it, like paragraphs, headings, lists, links, images, etc. It can even have other divisions inside of it to provide additional structure and organization to your HTML document.

To use the div element, place an open <div> tag before the area of your page that you want as a separate division, and a close </div> tag after it:

 

<div>

contents of div

</div>

If the area of your page needs some additional information that you will use to style with CSS later, you can add an id selector (e.g., 

id="myDiv">), or a class selector (e.g., class="bigDiv">). Both of these attributes can then be selected using CSS or modified using JavaScript. Current best practices lean towards using class selectors instead of IDs, in part because of how specific ID selectors are. In truth, however, you could use either one and can even give a division both an ID and a class selector.

When to Use <div> Versus <section>

The div element is different from the HTML5 section element because it does not give the enclosed content any semantic meaning. If you aren’t sure whether the block of content should be a div or a section, think about what the purpose of the element and the content are to help you decide which to use:

  • If you need the element simply to add styles to that area of the page, you should use the div element.
  • If the content to be contained has a distinct focus and could stand on its own, you may want to use the section element instead.

Ultimately, both divs and sections behave pretty similarly and you can give either of them attribute values and style them with CSS to get the look of your site that you need. Both of these are block level elements.

Using the <span> Element

The span element is an inline element by default. This sets it apart from the div and section elements. The span element is often used to wrap a specific piece of content, normally text, to give it an additional  "hook" that can be styled later. Used with CSS, it can change the style of the text it encloses; however, without any style attributes, the span element alone has no effect on text at all.

This is the main difference between the span and the div elements. As mentioned above, the div element includes a paragraph break, whereas the span element only tells the browser to apply associated CSS style rules to what is enclosed by the <span> tags:

<div id="mydiv">
<p><span>Highlighted text</span> and non-highlighted text.</p>
</div>

Add the class="highlight" or other class to the span element to style the text with CSS (e.g.,  class="highlight">).

The span element has no required attributes, but the three that are the most useful are the same as those of the div element:

  • style
  • class
  • id

Use span when you want to change the style of content without defining that content as a new block-level element in the document.

For example, if you want the second word of an h3 heading to be red, you could surround that word with a span element that would style that word as red text. The word still remains part of the h3 element, but now also displays in red:

This is My Awesome Headline

 

Edited by Jeremy Girard on 2/2/17