If you’re just starting to get the hang of HTML, you’ve probably learned how to use rudimentary HTML elements to build a page, such as <p>, <h1> and <h2>, <a>, and <image>.
These tags can be found all over the web. But, go to any big website, open the source code, and you might see something unfamiliar: a heap of nested <div> and <span> tags. If you’re not sure what these elements are for, it makes it tougher to understand how web pages are coded. And it doesn’t help that div and span do rather similar things.
Still, div and span elements are very common and probably used on most pages you visit. So, as a burgeoning website expert, you should know the difference between them if you want to grasp page structure and content. In this guide, we’ll show you what each one does and how you can apply them to your pages correctly.
span vs. div in HTML
Span and div are both generic HTML elements that group together related parts of a web page. However, they serve different functions. A div element is used for block-level organization and styling of page elements, whereas a span element is used for inline organization and styling.
Let’s discuss each element in more detail to better understand how they differ.
The div (division) element is a generic block-level element, most often used to divide page content into blocks. A block element is a page element that starts a new line and has a width equal to the entire page or the parent container.
You’ll very often see divs used to group related paragraphs, images, headings, and links. For example, a three-paragraph article may be enclosed in a div, and a navigation menu containing links might be enclosed in another div. Using divs this way makes it easier to identify different sections of a page and apply styling to them with CSS.
A basic example of a div element in HTML looks like this:
<div id=“paragraphs”> <p>This is my first paragraph.</p> <p>This is my second paragraph.</p> <p>This is my final paragraph.</p> </div>
The span element is a generic inline element, typically used to apply styling to a portion of inline content. An inline element does not start a new line and only takes up as much space on the page as its content. Span tags are used on small segments of text, links, images, and other HTML elements that appear inline with the surrounding content.
A basic example of a span element in HTML looks like this:
<p>This is a paragraph with <span id=“special-text”>a little something extra</span> inside it.</p>
To summarize, a div tag creates a block-level element while a <span> tag wraps around an inline element. Despite their differences, both are used to group like elements for structural and/or styling purposes.
span vs. div Examples
Let’s now look at a couple examples of span and div that demonstrate their differences and applications.
Here’s an instance of two <div> tags, followed by two <span> tags. I’ve applied a unique background color to each element to show their size — ;notice how divs take the entire width of the page while span tags only take up the space of their content. Also, each div adds a line break after its content, but the span elements do not.
As shown in the above examples, div and span are useful for styling and structuring web pages. It’s easy to assign id or class attributes to these elements and target them with CSS rules. You’ll usually see span tags used to style inline content like a word in a line of text. Div tags, on the other hand, should style larger sections of content or act as a container for child elements. More complex web pages often make heavy use of divs, nesting them in each other to represent different page regions and sub-regions.
Given the convenience of span and div, it’s tempting to use these tags any time you want to add a new page element — for instance, using a <div> tag instead of a <p> tag. However, it’s actually considered a best practice in web development to limit their use as much as possible.
Why would that be? Span and div are “generic” elements, which means that neither element conveys meaning about the content it contains or its purpose. You could put a lot of things inside a <div> or a <span> tag, but it’s not clear from the tag itself what the purpose of the element is or the content inside.
The opposite of a generic element is a semantic element, one whose tags communicate the meaning of the element. Most HTML elements are semantic — <p>, <em>, <h1> to <h6>, and <button> are some common examples. Semantic elements make it easier for search engine crawlers, assistive technologies like screen readers, and web developers to interpret your web page, and are much tidier than a maze of meaningless <div> and <span> tags.
Whenever you’re considering a div or span to section off a part of your page, first consider whether there’s a suitable semantic HTML element that you can use. HTML5 introduced several block-level div alternatives that are handy for common page regions, including <header>, <footer>, <nav>, and <main>. There are also semantic inline elements for text like <strong>, <em> (emphasis), <code>, and <q> (quote).
div and span: Know the Difference
Divs and spans are among the most common HTML elements, and for good reason — they let you structure and style your HTML pages exactly to your specifications. Still, they both have their own specific purpose, and understanding the differences between them ensures that you’re using each properly and only when necessary. Ultimately, this will save you a lot of confusion and scrapped code down the road.
Originally published May 11, 2021 7:00:00 AM, updated May 11 2021