In order to write valid HTML, you need to avoid the elements that have been deprecated. Many HTML tags, including the <center> tag, are now obsolete. It turns out that HTML, like all technology, is constantly evolving, changing, and improving. While the HTML tag is still part of the HTML specification, it will not be included in the future. If it’s not included, browsers won’t support it. This will result in Web pages that may not work in future websites or applications.
Why is the <center> tag deprecated?
Many HTML elements are deprecated in favor of CSS style sheets, the design aspect of the HTML architecture. The <center> tag is one of those elements. While it once centered whatever it wrapped around, CSS styles now manage the centering process.
This article is about how the <center> tag came to be gone from HTML, no longer supported by the time HTML 4 (XHTML 1) was adopted, and why.
Why is the HTML Center Tag Deprecated?
In a forum on Sitepoint, someone named Optl asked, “Can someone actually explain why the <center> tag is deprecated?“
I know how to use CSS to center elements properly, but it requires a lot more markup and code then simply using tags.
I realize <center> is depreciated and can display differently in certain browsers. But it still works very well in almost all situations that I’ve encountered and saves me time and markup which makes my code cleaner and easier to read. Right now I am not using because it will prevent my code from validating which is a problem; but couldn’t that be changed?
Anyway…can someone explain why the <center> tag is depreciated?
The answer is rather simple, if you understand web design and how HTML and CSS work together to design a web page when viewed in a browser.
The CENTER element is deprecated because basically a it’s a purely presentational tag rather than structural and is similar to shorthand for ‘DIV align=center’ which is better handled via CSS.
HTML is all about providing structure and meaning to content, and this should be its sole function. The W3C, the World Wide Web Consortium that sets the HTML standards, created a specification for writing correct HTML that separated the design from the architecture. With this change came deprecation of tags that influenced positioning and styles, and superseded them with other more functional or flexible alternatives, such as CSS.
The <center> element is deprecated because it defines the presentation of its contents — it doesn’t describe its contents. This is to create a refined distinction between semantics and presentation.
Here is an example of the old way.
The Aaignment, font styles, and horizontal rules in HTML documents specifications from W3.org guidelines state that floats, specifically the use of the the center HTML tag and using the <align="center"> attributes to force an element into position, are no longer supported, thus deprecated, replaced by two alternatives.
The first is the text-align attribute to center content or a design element on a web page. The following is an example of inline CSS styles using the this method.
This works only for text, not images or blocks of content or design elements within a web page.
According to the W3C Web Styles Sheets CSS Tips and Tricks on centering things, text must be styled differently from images when centering them.
Sometimes it is not the text that needs to be centered, but the block as a whole. Or, phrased differently: we want the left and right margin to be equal. The way to do that is to set the margins to ‘auto’. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width. Here is an example:
p.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}
The specification expands upon centering tips to include images and centering vertically, further complicating the business of centering things on a web page.
By using a standard style tag with descriptive properties, such as text-align:center or aligning the margins as auto, the text editor will know precisely what your intentions are depending upon the width and resolution of the viewing screen, critical for today’s responsive and adaptive web design for multiple platforms such as smartphones and tablets.
This method also guarantees that the element will be centered in all modern browsers, and it also provides an organized method to styling by describing properties within a standard tag. Describing properties within a standard tag avoids creating multiple reserved tags, which may, in the end, contradict itself.
Why Center is Deprecated in Post Content
Write some text, hit the center button on the Visual editor in WordPress or your favorite web publishing platform and you have centered text or images, right? But what if there is more to the idea of centering that justified the W3C to remove the <center> tag?
Jacci Howard Bear of About.com’s Desktop Publishing column explains that centering text isn’t gone, yet:
There is nothing inherently wrong with centered text. As with ragged right or fully-justified text alignment, what works for one design might be totally inappropriate for another layout. There are simply fewer situations where centered text is appropriate. When in doubt, don’t center it.
As with all layouts, alignment depends on the purpose of the piece, the audience and its expectations, the fonts, the margins and white space, and other elements on the page. The most appropriate choice is the alignment that works for that particular design.
Her article explained the various situations including format text such as a wedding invite, some poetry forms, and rarely in article or section titles over left or full justified text.
Oliver Reichenstein, a noted web designer, states:
Design is not primarily supposed to entertain or to be nice or to aesthetically please. It’s supposed to perform.
If centering the text makes it difficult to read, it isn’t performing to expectations.
In a powerful argument against centering content in web writing by UX Movement, the author stated:
Text is a beautiful thing. It not only has function, but form as well. When you’re creating text, it’s likely that you’re not only thinking about what your text should say, but how it should look. On the web, centered and left aligned text are the most widely used text alignments. How you use these text alignments can either help or harm your users when they read.
Left aligned text is easier to read than centered text for paragraphs. This is because when you center your text, the starting place of each line changes. This forces your users to work harder to find where each line begins to continue reading. Without a straight left edge, there is no consistent place where users can move their eyes to when they complete each line. However, when your paragraph text is left aligned, a straight left edge appears. Users can read each line by simply moving their eyes to the left edge each time. This makes your paragraphs faster and easier to read because the user’s eyes don’t have to work as hard to find where the line starts each time.
In a discussion on the forums of the Interaction Design Association in 2007 about centering text in general as well as on the web, Elizabeth Buie stated the following:
As the HFES-200 committee discussed when we were commenting on the ISO 9241 position on this topic, it’s also a matter of what the task is.
If people are looking for specific fields, what they need to do quickly is to find the field of interest. This is aided by left-aligned labels, as it is easiest to scan the list and pick out the one(s) of interest.
If people are entering information into most or all fields, what they need to do quickly is to determine the meaning of the next field. This is aided by right-aligned labels, as it is easiest to look to the left of the current field and see what label is attached to it.
The ISO standard says that under most conditions the labels should be right aligned; however, if they have more or less the same length, they *may* be left aligned.
In their popular “Web Blooper of the Month,” UI Wizards took on the topic of centering everything:
One sign of a neophyte Web designer or developer is a tendency to center text, controls, and other elements on the page. It may be because HTML and Website layout tools make centering easy, and some Web designers haven’t yet learned that centering is usually a bad idea.
Prose text written in a left-to-right language such as English is harder to read when centered than when left-aligned. The reason has to do with the way our eyes are trained to scan back and forth over lines of text. When lines don’t start in the same horizontal position, reading is disrupted. See what I mean?
The article included a sample form the early days of the web when centering content was considered an attention getter, demonstrating how hard it is to read, especially when using bullets in a centered list.
Their advice? Don’t center prose, your article’s text. It should be left-aligned or justified. Single-line headings and poetry are the only text they find acceptable for centering, but even argue against. Left-align all bullet lists.
The also make a good argument against using every tool in the toolbox just because the tool exists.
Don’t center content just because it is the default in your Web development tools. The World Wide Web Consortium, which defines HTML, had good reasons for making left-alignment the official default for content in table cells. If your Web development tool has center-alignment as its default, it is wrong; you should change the default or use a different tool.
In extensive studies on how people read the web, the research consistently finds that English language readers read from left to right, scanning the left margin for keywords that encourage them to read across the rest of the sentence. Eye-tracking studies found that most people read using an “F” letter shape, sweeping our eyes across the top of the page and down the left side, scanning across in the middle after the opening paragraphs, a point when most articles get to the point. With the focus on the left margin, centered text is often bypassed by the scanning reader.
Jakob Nielsen’s work on scannability for menus and content demonstrated the efficiency of left-aligned navigation, lists, and content:
Aligning a navigation menu with the right margin might look cool, but the resulting ragged left margin severely reduces the speed with which users can scan the menu and select their preferred options.
His point is about right aligned margins creating a ragged reading edge, and centering text creates a ragged right and left reading edge.
Wired reported in 2010 on a study by a neuroscientist at the College de France in Paris exploring the “neural anatomy of reading.”
It turns out that the literate brain contains two distinct pathways for making sense of words, which are activated in different contexts. One pathway is known as the ventral route, and it’s direct and efficient, accounting for the vast majority of our reading. The process goes like this: We see a group of letters, convert those letters into a word, and then directly grasp the word’s semantic meaning. According to Dehaene, this ventral pathway is turned on by “routinized, familiar passages” of prose, and relies on a bit of cortex known as visual word form area (VWFA). When you are a reading a straightforward sentence, or a paragraph full of tropes and cliches, you’re almost certainly relying on this ventral neural highway. As a result, the act of reading seems effortless and easy. We don’t have to think about the words on the page.
Anything that interferes with that process has a good and bad effect. It can “wake us up,” as the article explains, making us sit up and pay attention, or distract from our ability read, thus be more likely to set the reading aside as it doesn’t meet our expectations. A block of centered text interferes with that reading process as it doesn’t meet expectations, nor makes it easy to read.
Should you center or not? It is up to you. You must do it right, using the right CSS styles in compliance with web standards, but think about this from another direction, the perspective of the reader, the client, the customer, the person consuming your content.
In a collection of quotes on UXMyths, designer and developer Peter Bilak summed this up perfectly:
Right and wrong do not exist in graphic design. There is only effective and non-effective communication. Every one can complain about advertisements in the magazines, but clients are only interested in whether it attracts possible customers or not.
Next time you move towards that center button on your web publishing platform, give it another thought. Do you really want to center that? Experts say no. What do you say?