If you are 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 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.
HTML <DIV> TAG
The div 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=“content”>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
</div>
HTML <SPAN> ELEMENT
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 in line with the surrounding content.
A basic example of a span element in HTML looks like this:
<p>Our online <span id=“span-text”>YouTube channel, blogs, and website source code services help you reach </span> your digital goals remarkably.</p>
When to Use span vs. div
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 will 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.
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.
