Paragraph (<p>) tags and span (<span>) tags are both commonly used for enclosing text inside of HTML. They are arguably two of the most commonly used tags for it. Often, it’s hard to distinguish which tag to use for displaying your message in the right way. Let’s cover the main differences in this article, and then go into more general practices used when displaying text depending on the context of your message within the HTML page.
Use paragraphs for long-form text
Paragraph-tags are called block-level HTML elements because they take up the full width of the page. By default, <div> tags and other section based elements are the same way. When it comes to taking up the full width of the page, the <p> tag will do that automatically and allow you to format your text in interesting ways with the help of a little styling. You can make paragraphs center-aligned, left-aligned, right-aligned, or justified just like in a regular word processor.
Use spans for text labels
Span tags, on the other hand, are inline elements that take the width of the content inside of them. So, the width of a span tag adapts to the width of the content inside it, which depends on font size, family, among other things. Because of this, <span> tags make good labels. Take a look at the example below, where we try to enclose a paragraph tag inside another paragraph tag. Then, try the same with a <span> tag.
<!DOCTYPE html>
<html>
<head>
<title>Paragraphs vs spans in HTML</title>
</head>
<body>
<main>
<p>
This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph.
<p>This is a shorter paragraph that will introduce a line break.</p>
This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph. This is a super long paragraph.
</p>
</main>
</body>
</html>Try to run the above code in your web browser. You will see a line break created by the smaller paragraph inside the larger paragraph. At first you might think it’s because of the way the code is spaced out inside the paragraph tags, but HTML is not sensitive to more than one space in its elements. This is a real feature of the paragraph tag. It’s why you should only include inline elements like <span>, <em>, <strong>, <b>, <i>, <u>, or hyperlinks (<a>) inside paragraph tags. In fact, the code written above is not considered valid HTML and the browser will often complain about it.
This is the main difference between the two tags (<p> and <span>): the amount of space they take up. This makes the <p> tag a block-level element because it takes up the full width of the page and the <span> tag an inline element because it only takes up the space it needs to display the text inside it. For other tags used to format text, refer to the introductory article on HTML and learn about headers, bolding, italicizing, among other methods of text formatting. As an interesting aside, the amount of space that displaying an element takes up by default—something we just went into detail using paragraph and span tags as examples—is controlled by a specific property of that element’s styling: the display property. After getting into CSS and how it can be used to make elements look prettier on a web page, adjusting this property will make more sense based on the specific layout you are trying to achieve.