What is the value of a <div> wrapping the entire body?

css, html

Solution

It's usually used for the sake of styling, e.g.,

body{
    background-color: #FFF;
}
#wrapper{
    background-color: #000;
    width: 80%;
    margin: 0 auto;
}

The above is for a simple ~10% left and right white border on the page.

Although slightly OT, there is no HTML5 element for this. I have seen `<main>` used in its place, however, quoting from the MDN article for `<main>`:

The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos

Problem

I'm taking over website maintenance for a utility company. The previous developer used far more `<div>`s than I would. Most make sense to me, but I'm puzzling over this one: ``` <html> <head></head> <body> <div id="wrapper"> <!-- All of the page content - header, footer, whatever --> </div> </body> </html> ``` Everything in the `<body>` tag is surrounded by an additional named `<div>`. There's nothing before it or after it. Is there a benefit to having a `<div>` there? My understanding is that all styling could be applied directly to `<body>` with the same effect. Even JavaScript could do identical things if I just declared `<body id="wrapper">`, couldn't it?

Original source