{
"$type": "site.standard.document",
"description": "The use of the div element in code is still over-abundant, but the section element is replacing that.",
"path": "/blog/section-is-the-new-div",
"publishedAt": "2023-10-12T00:00:00.000Z",
"site": "at://did:plc:gevyqibw5p2xsonkbsbjm5vy/site.standard.publication/3mnqgth7gxo2f",
"tags": [
"html",
"semantichtml",
"accessibility"
],
"textContent": "Note that there are times and places to use the div and section elements. This article addresses the need for more accessible solutions and fixes as well as the need to stop overengineering things.\r\n\r\nThere will be cases when repetition is necessary. But with the overengineering I see when I do accessibility audits, and the rendered HTML I see that is choked with unnecessary containers and wrappers and elements that take up space and bytes, this is what this article addresses.\r\n\r\n Remember when…\r\n\r\nWe used to have tables for layouts? Then we had the trusty div element and it took off like a rocket you see div soup as far as the eyes can see.\r\n\r\nA man with a blue shirt scanning the distance for something.(https://media.giphy.com/media/i4JiDqwoV3A0ZO9d23/giphy.gif)\r\n\r\nSo since this craze started taking hold, many developers are grabbing the reins and sowing the seeds in the fields of web pages with divs. Planting and nurturing them until their web site blooms fully. A garden of divs for everyone to see.\r\n\r\nThen the accessibility people said, \"Wait a minute. Try not to use so many divs. They hold no semantic meaning and use semantic HTML elements like section it is much better for accessibility.\" Then the gardeners that are the developers started using the section element, and planting those seeds. And planting them. And planting them.\r\n\r\nNow we have a garden, not only overflowing with div elements, but that same garden we call the Web is not choking with the overplanting of section elements.\r\n\r\n Well how do we achieve this?\r\n\r\n Know When To Hold 'Em\r\n\r\nAs with the div element, moderation is the key. You should know when to hold 'em. For example:\r\n\r\ncss\r\n<div class=\"wrapper\"\r\n <div\r\n <div class=\"menu\"\r\n <div id=\"header\" role=\"banner\"\r\n <div id=\"search\"</div\r\n <h1Title</h1\r\n <nav role=\"list\"\r\n <a href=\"\"/page</a\r\n <a href=\"\"/page</a\r\n <a href=\"\"/page</a\r\n </nav\r\n <div id=\"main\"\r\n <h2Subtitle</h2\r\n <div class=\"section\"\r\n <section class=\"gridbox\"\r\n <h4Styled to look like an h3</h4\r\n <pStuff...</p\r\n </section\r\n <section class=\"gridbox\"\r\n <h4Styled to look like an h3</h4\r\n <pStuff...</p\r\n </section\r\n <section class=\"gridbox\"\r\n <aside\r\n <h3Sectional heading</h3\r\n <pStuff...</p\r\n </aside\r\n </section\r\n </div\r\n </div\r\n <div id=\"footer\"</div\r\n </div\r\n </div\r\n </div\r\n</div\r\n\r\n\r\nYou have a mix in the code above. You still have a lot of divs, a lot of needless divs, and other questionable practices. A div with a class of section and then sections.\r\n\r\nAt some point, this will need to be refactored. Which costs time and money. Also, stress. I'll explain.\r\n\r\ncss\r\n<div class=\"wrapper\"\r\n <div id=\"header\"\r\n <div id=\"search\"</div\r\n <h1Title</h1\r\n <nav role=\"list\"\r\n <a href=\"\"/page</a\r\n <a href=\"\"/page</a\r\n <a href=\"\"/page</a\r\n </nav\r\n </div\r\n <div id=\"main\"\r\n <h2Subtitle</h2\r\n <section class=\"gridbox\"\r\n <h3Styled to look like an h3</h3\r\n <pStuff...</p\r\n </section\r\n <section class=\"gridbox\"\r\n <h3Styled to look like an h3</h3\r\n <pStuff...</p\r\n </section\r\n <section class=\"gridbox\"\r\n <aside\r\n <h4Sectional heading</h4\r\n <pStuff...</p\r\n </aside\r\n </section\r\n </div\r\n <div id=\"footer\"</div\r\n</div\r\n\r\n\r\nNow this being a very rough example, you may need to go back and change some stuff, but for the most part, you're spending less time backtracking. Saves the company time (piling up hours refactoring code), saves headaches and stress (dev has to go back in and change things again and deadlines, and all the things), it saves the company money.\r\n\r\nNo need to set five hours to pay a dev to backtrack and refactor yet again when they can be getting paid for a project that is moving forward and not spinning its wheels. You got that time to put them on a project that is gaining steam.\r\n\r\nIf you do use the section element when grouping things genrically, please take a read through Scott O'Hara's article on his blog about the accessibility of the section element(https://www.scottohara.me/blog/2021/07/16/section.html).\r\n\r\n Use the <section element as semantically appropriate. Semantic markup, regardless of whether it is always exposed to assistive technologies is meaningful. At the very least the element can be used for other programmatic purposes. And its use can help other developers more quickly understand the structure of a web page, rather than having to rely on a bunch of <divs and classes to hopefully understand the intended structure.\r\n\r\n Know when to fold 'Em\r\n\r\nSo why do I see a lot of empty div elements? Overengineering. Whether it is with or without intent. Whether it is in a framework or the result of a dev who hand codes something but doesn't know about the accessibility implications.\r\n\r\nLook at the rendered code on X (formerly Twitter). It's a thick, creamy div chowder. Divs as far as the eyes can see.\r\n\r\nCode from the X (formerly Twitter) interface showing all the div elements used(https://res.cloudinary.com/colabottles/image/upload/v1697122400/xtwittercode.png)\r\n\r\nThere is a world of options with less code. Especially with the advancements of CSS.Even more now with subgrid gaining support in the modern browsers. If the opportunity is there, seize it\r\n\r\ncss\r\n<div id=\"wrapper\"\r\n <header...</header\r\n <main\r\n ...\r\n <section\r\n ...\r\n <aside\r\n ...\r\n </aside\r\n </section\r\n </main\r\n <footer...</footer\r\n</div\r\n\r\n\r\nIf you're a dev that is stretched thin because of the inordinate amount of work you have in front of you and you feel like you are rolling a boulder uphill in an ice storm, you are not alone.\r\n\r\nWhy make it harder ? Why subject yourself to the stress? Is the extra five hours on that issue worth the fourhundred bucks you may take home?\r\n\r\n I don't have any support.\r\n\r\nThen you need to be the catalyst. There are a lot of resources as to how to do that. A few links to read are below, the last links has links to other articles as well.\r\n\r\nKeys To An Accessibility Mindset(https://www.smashingmagazine.com/2023/02/keysaccessibilitymindset)\r\nHow Our Organization Improved Web Accessibility (Case Study)(https://www.smashingmagazine.com/2022/08/organizationimprovedwebaccessibilitycasestudy/)\r\nMaking A Strong Case For Accessibility(https://www.smashingmagazine.com/2021/07/strongcaseforaccessibility/)\r\nHow To Make A Strong Case For Accessibility(https://smartinterfacedesignpatterns.com/articles/accessibilitystrongcase/)\r\n\r\nTry learning semantic and accessible HTML and CSS, put as much into that as you do learning every new shiny toy that comes out monthly and you'll understand the foundations of the Web better than you ever have before. I guarantee it.",
"title": "<section> is the new <div>"
}