Skip to main content

[Learn HTML] (https://web.dev/learn/html/)

HTML

What are div and span? Why would you use them?​

All HTML documents have two types of element - block and inline. A p tag, or paragraph is an example of a block element; A strong tag is an example of an inline element. These elements are treated differently when a browser displays your page:

a block level element has 100% width by default and any subsequent elements will appear below it.

Inline elements do just that - they appear inside block level elements, only taking up the width that they need and they can only have padding and/or margin added to the left or right sides.

Most elements in HTML are designed for a specific purpose - a paragraph, a heading, bold text, etc, but a div is a generic block element that you can use for whatever you want. In the same vein, span is a generic inline element. But what would you use them for?

spans can be used to differentiate parts of the text in a paragraph - maybe you have a brand name that you want to style differently everywhere it appears - wrap it in a span and give it a class.

(<span class="brand-mark">AwesomeBrandName</span>) - you can then change the look of that text in your CSS.

divs can be used to break up your content into distinct areas or types - maybe an interactive image area, or the graph with flyout. With the addition of HTML5 elements such as footer,main and nav, the number of uses of a div has gone down, but you will definitely still run into situations where nothing else fits and you pull the trusty div out of your toolbox!