Nathan Jacobson
Posted on November 4, 2015 by Nathan Jacobson on Front-End Dev

Repurposing the HTML Center Tag

One of the wonderful developments in HTML5 is the objectification of content that is inherently connected. So, we now have self-explanatory elements called section, aside, and article that are discrete, repeatable units. Each of these whole can be subdivided into parts, including a header and footer. This highly structured, predictable, and fractaline scheme has an unfortunate omission. The header and footer make it easy to target all elements within them for margins, padding, etcetera. We cannot, however, easily apply rules to everything but the header and footer. That is to say, we cannot target the body of the section, article, or aside which may consist of a whole host of tags including images, lists, and paragraphs.

 

Just as the HTML document has a head and body, and a table has a thead, tbody, and tfoot, the section, article, and aside elements would benefit greatly from being similarly divided in a consistent way. Unfortunately, this option is not currently available without making use of a neutral div — perhaps with a .body class — to wrap the inner body.

If there were such a tag to wrap the body of a page element, what might it be? Considering the unique and important role that the <body> tag already plays within the HTML document, a body within the body it is not a candidate. Neither can we follow the pattern of going from <head> to <header> or <foot> to footer; “bodyer” just doesn’t sit well. The W3C could have introduced a new tag like <corpus> or <matter>, but that ship has probably sailed.

Fortunately, we have an existing, deprecated tag that is a sensible candidate to fill this role: <center>. So, I suggest the following pattern.

.

To make this work, a simple CSS declaration to unset browser defaults makes <center> stylistically neutral: center { text-align: left; }