CSS

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. 

After sometime, it became clear that the web is made up of hyperlinked text files (and very clearly not Flash). That’s it. Plain and simple. Even to this day. At a fundamental level, servers powered by PHP, Ruby, JavaScript or whatever — all pump out text documents (encoded by a markup language called HTML) that browsers can understand and parse (despite minor rendering differences it’s amazing that it all works). These linked text documents or hypertext, are plainly speaking webpages.

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:

• The <p> is a paragraph tag.
• The <blockquote> is a blockquote tag.
• The <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 <div>)
• 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 <em>, <strong>, or things like <span>s)
• Embedded content (these are typically external resources such as <iframe>, <canvas> or even <svg>s)
• Interactive content (these are your <button>, <textarea> or <label>s)
• 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 <div>.

The Content Division Element, or The <div> Tag

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.

From the <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 class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), 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.

Further watching:

Professor Brailsford makes a guest appearance on Brady Haran’s Computerphile, and has some hot takes about HTML and programming. Brilliant fun.