# How Improper div Placement Can Harm Semantic HTML and Accessibility

DevFeed: [How Improper div Placement Can Harm Semantic HTML and Accessibility](<https://devfeed.tech/articles/divs-are-bad-52249.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2022/divs-are-bad>)

Author: Manuel Matuzović

Published: 2022-05-11T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [markup](<https://devfeed.tech/topics/markup.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [browser](<https://devfeed.tech/topics/browser.md>), [screen](<https://devfeed.tech/topics/screen.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [accessible](<https://devfeed.tech/tags/accessible.md>), [browser](<https://devfeed.tech/tags/browser.md>), [debug](<https://devfeed.tech/tags/debug.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [markup](<https://devfeed.tech/tags/markup.md>), [performance](<https://devfeed.tech/tags/performance.md>), [render](<https://devfeed.tech/tags/render.md>), [screen](<https://devfeed.tech/tags/screen.md>), [semantic](<https://devfeed.tech/tags/semantic.md>), [validation](<https://devfeed.tech/tags/validation.md>)

## AI overview

This tutorial explains that div elements are useful when applied consciously, but placing them inside semantic HTML elements can cause accessibility, rendering, and document-structure problems. It covers examples involving details, figures, fieldsets, lists, and paragraphs, and recommends validating rendered markup before deployment.

## Source excerpt

Yes, clickbait, I'm so sorry! Of course, divs are not bad. For example, they can be really useful,... ...when you need additional elements for styling. ...for structuring content, when there's no other suitable element. ...when you need custom landmarks. Even though there's nothing wrong with the div per se, some people, including me, still like to complain when they're not used consciously. The issue with divs is not the quantity, although a large DOM can affect performance negatively, and an unnecessarily large document is harder to read and debug. The real problem is the placement. If you put a div in the wrong place, it can have serious negative side effects. Here are some examples: details and summary If you wrap the contents of a details element in a div, the browser or a screen reader might not recognize the summary element properly and display and announce a fallback text instead. Wrong <details> <div> <summary>Show info</summary> Hi, I'm the info! </div> </details> Show info Hi, I'm the info! Right <details> <summary>Show info</summary> Hi, I'm the info! </details> Show info Hi, I'm the info! figure If you wrap the contents of a figure element in a div, the figcaption might not be recognized as the caption for the figure. Visually this probably has no effect, but the figure might not be exposed to assistive technology when it doesn't have an accessible name. Wrong <figure> <img src="/images/gus.jpg" width="400" alt="Gus Polinski."> <div> <figcaption> The Polka King of the Midwest talking to a desperate mother. </figcaption> </div> </figure> The Polka King of the Midwest talking to a desperate mother. Right <figure> <img src="/images/gus.jpg" width="400" alt="Gus Polinski."> <figcaption> The Polka King of the Midwest talking to a desperate mother. </figcaption> </figure> The Polka King of the Midwest talking to a desperate mother. fieldsets A fieldset gets its label from the legend element. If the legend is wrapped in a div, the fieldset has no accessible name. This