TECHNICAL SUPPORT | Structure/Meaning vs Presentation
The Difference
What is the difference between BOLD <bold> and STRONG <strong> or ITALIC <i> and EMPHASIZED <em>?
<strong> and <em> define the structure and meaning of the content, while <bold> and <i> describe its presentation.
The purpose of HTML from the beginning was to logically describe the structure and meaning of the information on the page so that browsers could then interpret the pages and relay the content in a logically designed way.
The Separation of Struture from Presentation
Structure encompasses the necessary components of a document plus the logical marking up of the content in that document.
Presentation is the way the content is styled. Usually, presentation refers to visual styles.
Ideally, you'll separate structure from presentation with the structure in your HTML or XHTML document and the presentation in your CSS. The advantages of this are many, but the three most immediate benefits:
- more efficient document management
- faster rendering of documents
- improved accessibility of content.
HTML was never meant to be used for presentation, but designers have found ways to bend and shape the original HTML specification to their needs to control the appearance of Web pages. This has resulted in documents weighed down by heavy use of tables and tags. Not only does such coding practice stray from the intent of HTML, it slows page-loading times.
With the power of Cascading Style Sheets (CSS) it is now no longer necessary to style using HTML. Meaning and Structure (HTML) can now be completely separated from presentation using CSS.
Following this philosophy basically means you shouldn't style anything within the HTML. Tags such as <font> or attributes such as "bgcolor" should not be used. There is no styling that can be done in HTML that can't be done, and done better, with CSS.
The Application of Meaning (Semantic Markup)
It isn't just about taking away the presentation from HTML, the application of meaning means specific HTML tags should be used when appropriate.
- Semantic Markup -
* "Means [...] that you use tags that have specific meaning assigned to them, either in the (X)HTML specification, or in generally accepted use." - Mark Pilgrim
* "As much as possible, the tags surrounding the content of a document should describe what that content is and/or what it's for" - Jason Kottke
For example, heading tags like, <h1>, <h2>, etc. should be used for headings - you should not just use CSS to make fonts larger. (more info)
A good guide is to see if a visual browser, with its default styling, presents the document well without a style sheet.
Example: http://www.csszengarden.com/
- View this site with Cascading Style Sheets turned off. You can turn off style sheets in the browser (or click here). Notice the structure of the site. You can also jump ahead and choose VIEW SOURCE to see the markup language (XHTML).
- Next turn the show Style Sheet option back on (or click here) and look at the page. Notice the Presentation of the site. It's quite different.
- Scroll down to choose a few different versions of the site, turning on and off the style sheet. Notice that the Structure stays the same, but the Presentation changes dramatically.
- HTML controls the Structure. CSS controls the Presentation.