Seriously. What the hell is a
<div> tag? When I first got into web design, I had no idea how a web page worked. I had no concept of HTML elements, let alone the
<div> tag. Unbeknownst to me at the time, developers were pushing the limits of CSS and Flash to make compelling, thrilling websites.
Learning how to write a valid HTML document took a lot of trial and error, considerable patience from my mentors, and fixing my mistakes along the way. So, if you have any hypertext mysteries let me know — I’ll pay it forward, leave me a note in the comments. ☺️ Onward!
HTML Content Categories
I never really was given an answer for such a seemingly simple question: what exactly is a
<div> anyways? I mean there are some very obvious elements at our disposal:
<p>is a paragraph tag.
<blockquote>is a blockquote tag.
<ul>is an unordered list tag.
All HTML elements have inherent uses, and belong to certain content categories. The
<div> belongs to the flow content category. Here’s some other HTML content categories:
- Metadata content (out-of-band information and meta)
- Flow content (typically contains text or embedded content such as the
- Sectioning content (headers, footers, or sections — organizational structure is important)
- Heading content (heading levels, sub-headings, etc.)
- Phrasing content (these define the text and the mark-up inside paragraphs such as
<strong>, or things like
- Embedded content (these are typically external resources such as
- Interactive content (these are your
- Palpable content (this one is a bit abstract, but these are elements who are neither empty nor hidden, important for script manipulated content)
- Form-associated content (these are typically children nodes of the
<form>element, or children of the form attribute)
This brings us just about up to speed to talk about the the Content Division Element, or the
The Content Division Element, or The
While some elements have a more obvious progeny, the <div> is a bit different. It’s something of a marriage between a generic container and an inline-container, but somehow… it’s neither.
<div> Mozilla HTML Reference:
The HTML Content Division element (
<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS. As a “pure” container, the
<div>element does not inherently represent anything. Instead, it’s used to group content so it can be easily styled using the
idattributes, marking a section of a document as being written in a different language (using the
langattribute), and so on.
There you have it. While the
<div> has no stylistic weight, but it can turn some heads with a litter bit of CSS love. But it’s true purpose is one of organization. Take for example, the typical and highly sought after Holy Grail Layout:
Simple and empty for now, we can further sub-divide our sectioning content areas (<header>, <nav>, <main>, etc.). We’ll use <div>s to contain and organize the inner content:
And violá! Inside your <div>s you put your heading, phrasing, or embedded content (or anything else for that matter). It’s all about organization. 👌
The <div> Soup Problem
It’s important we use sectioning content and flow content properly. Otherwise we’ll end up with <div> soup like Google:
Look at that mess!
While it’s not the end of the world, div soup presents a readability and productivity challegne for humans. Let’s say you inherit a project built like the figure above. There will be a considerable amount of technical debt, learning the organizational structure, and possibly re-factoring the div soup for efficiency. Web Components may be a future solution, but I don’t think it’s a winner.
Anyways, thanks for joining me on this journey to the center of the
<div>. The web’s most prolific flow container.
Professor Brailsford makes a guest appearance on Brady Haran’s Computerphile, and has some hot takes about HTML and programming. Brilliant fun.