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!
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:
<strong>, or things like
<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
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.
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. 👌
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.
Was this post helpful? Does it need work? Let me know below.