HTML a Day: <div> and <span>
There are 2 types of tags in this world:
div tags and
span tags. Mastering both is one of the foundational principles of HTML, as every tag in HTML is either classified as one or the other.
Div tags are dividers that separate a page into blocks. This means that if you don’t tell the
<div> how wide it needs to be, it will stretch horizontally and take up as much space as possible. Keeping in line with a graphic design grid, imagine your website in a series of blocks. Paired with CSS, you can separate your whole layout into <div>s.
Wherever you need a “block” of something, use a
<div>tag. That’s why they are referred to as a block-level element. Although they have different default styles attached to them, these tags will behave similarly to <div> tags, filling up all horizontal space possible:
<h3>, etc. — Heading Tags
<ul>— Undordered (Bulleted) List
<ol>— Ordered (Numbered) List
<pre>— Preformatted Text (Preserve white spaces and line breaks; useful for displaying code)
<article>— Same as
div(differences explained here)
Span tags are inline elements. This means that unline
div tags, they take up as little space as possible. Instead, they stretch over text, and are most commonly used to format a few words in a paragraph, insert a link, or even be used creatively for advanced text stylization.
Because span tags stay inline with the text, they are known as inline-level elements. These tags normally can’t fill up space, and are only used for styling within
div tags. Some examples of inline tags include:
<strong>— Bold (preferred alternative to <b>)
<em>— Italic (preferred alternative to <em>)
<a>— Anchor Link
<code>— Code snippet (similar to <pre>, but doesn’t fill up space)
<small>— Small text
Remember how I said there were only 2 types of tags? Well, I lied. Technically,
<form> are neither block nor inline elements. As you might imagine, these are somewhere in between block and inline, but you’ll be able to figure these out in no time after you have a firm understanding of div and span.
p tags for big blocks of content.
span tags for text colors and styling.
- Whenever you learn a new tag, find out whether it’s a block (div), inline (span), or neither.
- You can change the tag’s display type between block, inline, or one of the other types using CSS’s