Logical Style
Many HTML authors are not aware of the differences between logical (structural) elements and their presentational counterparts, and which element is more appropriate in different circumstances. Here you’ll be introduced to the terminology and methodology behind creating logical page structures.
This page was last updated on 2012-08-21
Block-level and Inline Elements
Most HTML elements fall into one of two groups: they’re either block-level elements or inline elements. This is an important distinction. Block-level elements are used to format whole blocks of text — they stand out on their own, spanning the available screen-width and usually adding line breaks before and after themselves. Inline elements can be introduced along the normal flow of text without causing any major disturbance, and can be used to affect single characters.
The block-level elements are:
<address><blockquote><div><fieldset><h1>—<h6><hr><legend><p><pre><ul>,<ol>,<li>,<dl>and<dd>
The rest of the elements are inline elements. The rules which govern these two element types are simple, but important:
- Block-level elements can contain other block-level elements and inline elements
- Inline elements cannot contain block-level elements.
For instance, an a element cannot have a h1 inside it, but a heading can enclose a link. Table elements aren’t strictly of either type, but can hold block-level or inline elements. The <br> element is another special case. It’s strictly an “inline structural” type of element, but since it can’t contain any further content anyway, it doesn’t really matter. It’s easy to make mistakes with these rules, so you should check your pages with the W3C » validator.
It’s possible to change the way an element displays through its CSS display property.
Logical vs Presentational Elements
There is another grouping method that separates HTML text formatting elements into two groups — whether they’re logical or presentational. Logical elements represent the text’s function on the page. The way they’re displayed is up to the browser (although by now the browsers have largely standardised on how this is done), which means they’re platform-independant. Presentational elements exist to create a specific visual effect, but carry no hint to the text’s semantic meaning.
As people keep needing to be reminded; the original HTML specifications contained logical elements almost exclusively. HTML was a structural language, not a design language. It was meant to convey information in the simplest way possible. Since then Netscape and Microsoft created the hazardous situation we had a year or two ago, by adding in presentational extensions like the font element. HTML files became ridiculously large, inflated by redundant tags and presentation hacks. Thankfully, the HTML 4.01 and XHTML 1.0 specifications deprecated many of the presentational elements (replacing them with stylesheets), and brought in many new logical elements that add depth to your information. HTML code could again be clean and simple.
The Landscape
In the old days when it wasn’t so easy to control how your page looked (we have CSS for all that now), it was acceptable to use presentational elements for everything, and leave your pages without any sort of logical structure. Everyone was obsessed with how their pages looked, never mind the accessibility ‘concerns’. People didn’t use heading elements because they looked terrible; plain and simple.
This was the wrong way to go about things. The flood of WYSIWYG graphical editors at the time did this culture of aesthetics over compatibility no favours at all, and editors sent out thousands of pages full of font tags and no headings.
The problem: presentational elements can only mean one thing. The <b> element, for example, means ‘bold text’. What happens when a text-only or audio browser reads that element? It is meaningless in this context, and so whatever emphasis you may have meant to show by using the element in the first place is lost on that reader. If you use <strong>, each browser can decide on their own treatment, and present its result accordingly — by making the text bold, or by pronouncing the words louder etc.
Designers used to use large font faces instead of headings to avoid the line breaks. Interpreted through any device other than a graphical browser and those pages lost a lot of their meaning. What’s the title? Where do sections of the page start? Programs that try and construct a structural outline of your document will have nothing to work with. Also, most search engines try to pick out headings for better rankings.
Recently there’s been a move back to using logical elements, glazed over with a stylesheet, so your page looks as you want it but the elements that make it up actually do more than make the page look a certain way. They allow the page to be read in any number of browser types, like aural browsers, text-only browsers, Braille displays etc., and still be presented appropriately.
Using Logical Style
So what are the logical elements, and how will they look by default in a graphical browser?
<h1>–<h6>create headings. They should flow sequentially (try not to skip levels). The title of the page should always appear as a level 1 heading, with subheadings cascading down from it. Text is usually displayed in a large, bold font. Remember that they’re all block-level elements. You can remove the margins with CSS.<em>creates emphasis, and is usually displayed as italicised text. Equivalent to<i>.<strong>creates strong emphasis, and is usually displayed as bold text. Equivalent to<b>.<code>is suitable for giving examples of computer code, and is usually rendered in a mono-spaced font. Equivalent to<tt>.<blockquote>is a block-level tag that’s used to enclose multi-line quotations from other sources. It is usually displayed as indented from both sides.<cite>is used to enclose the title of a work that is currently being referred to. It’s usually displayed as italicised text.<q>is a short quotation from another source. Modern browsers will display contained text with quotation marks added on both sides.<pre>is a block-level element that displays text in a fixed-width font exactly how it was typed in the source code (i.e. honouring all tabs, spaces and line breaks).preis not strictly a logical element, but its use is often necessary.<del>is a HTML 4.01 element used to show document revisions; text deleted from a page in this case. It is usually displayed as text with a strike-through.<ins>isdel’s partner in crime, used to show text inserted during a revision. It is usually displayed with an underline.<address>should be wrapped around contact information, including email addresses.<kbd>is suitable for marking up text that is meant to be entered by the reader on the keyboard. It is usually displayed in a fixed-width font.<var>marks up a variable’s name. Useful if you’re writing about technical subjects like computer programming.<samp>is used to signify a sample output from some code.
Adding Depth
The title attribute allows you to add a tooltip to any element of your page. These are especially helpful when applied to links, as they help the reader in judging what they may find if they click the link. You should add informational titles to as many of your links as possible, following these » title guidelines.
There are three more elements, all introduced in HTML 4, that allow you to add in supplementary information in a tooltip, using this attribute.
<abbr>is used to denote an abbreviation. Expand the abbreviation’s full meaning in the tooltip. This tag applies no formatting of its own.<acronym>is used to enclose an acronym (e.g. ASCII), with the full meaning in the tooltip (which you should try to define for at least the first instance of each acronym on a page). Usually no formatting is applied.<dfn>is used to give a definition of a tricky word. Write your own definition in the tooltip. Usually displayed in italics.
sourcetip: Since these elements have only recently been introduced, most web users will not know to look out for them. Also, some of them don’t make their presence very obvious, so you should use some formatting of your own (through CSS, of course) to help your readers find them. Add
abbr, acronym, dfn {cursor: help; border-bottom: dashed lime 1px; }
to your stylesheet to make the cursor turn to the help cursor and add a coloured border to the 3 elements making up the selector. This should be enough notice for most users to realise they should rest their mouse there for a moment.
