Ian Marshall logo

Ian Marshall

Would it be possible to style a web page without the <div> tag?

Not only is it possible, but you should always build websites without div tags.

Before HTML5, we only had divs as block-level containers. Strangely, many folks who learned web development before that time have been exceedingly slow to adopt new, semantic elements such as header, footer, main, article, section, nav, aside, figure, and others. Libraries such as Bootstrap made it normal to wrap everything in a div just out of habit, and now React is further corrupting progress toward modernization.

Most of the semantic HTML tags are divs by another name, so what's the big deal? Well, semantics are about two very important things: human readability and computer readability. For us humans, looking at a site with divs within divs within divs is a challenge to debug or style appropriately. But if you saw HTML code with a header, main, aside, and footer, you'd have a pretty good idea what data were where and what to do next. More important, however, is the readability for screen readers and web crawlers. If you have any interest in handicapped accessibility, you'll use semantic tags instead of divs. If you have any need of search-engine optimization, you'll use semantic tags instead of divs.

That's not to say divs have no place in a web page. They are sometimes useful specifically as a non-semantic tag when no other grouping makes sense and readability isn't an issue. But I would not use a div as a wrapper around a page or component. Divs are a last resort tag, not for default use as a result of old lessons never unlearned.