Table of topic groups > Front page of CSS-guide > Extra pages > D What are semantics of (X)HTML elements

D What are semantics of (X)HTML elements

Topics

• Common
• The semantics of this site
  • Inline level elements
  • Block level elements
• Other elements
• Importance of semantics for aural style sheets

Common

HTML elements should be used according their original purpose. Instead of presentational elements should use elements, which have clear semantic meaning. Indeed if someone wants to support Netscape 4.x browsers, in situations, where CSS doesn't work for them, it is reasonable to use presentational elements (I must use them in some navigation elements).

Elements, which has clear semantic meaning have been called as phrasal elements. What is a phrasal element? The following block gives the answer:

A phrasal element is such text element, which have as far as possible media independent semantics. The name of the element is defined according to the contents (and it should be used only in appropriate content dependent situations). As an example is this block quote (the element BLOCKQUOTE), where I as if quote myself.

Block level phrasal elements have also more or less structural meaning, which inline level elements don't have. The importance of good semantics concerns especially inline level elements. I use commonly only Inline Phrasal elements and I express presentation only with CSS and the CSS-related element SPAN.

In HTML 4.01 and XHTML 1.0 sections, which need only presentational advice should be used DIV (division > div; block level) or SPAN (inline level) elements. The are generic elements, which are especially designed for presentational purposes of CSS (they can be used also for some other generic purposes like language overriding). If they are not needed in some media types, they can be skipped without causing any harm to the semantics of the documents. These elements can be used to anything, because they are generic elements, which don't have exact defined semantics (in addition of CSS, they can be used for exampe in language overridings).

The semantics of this site

Because HTML can't describe all semantics, I have to use the closest element. The meanings of semantic used elements in this site and additional pages are following:

Inline level elements

• ACRONYM: if some term has it, I use this element, when I handle the meaning of the abbreviation. CSS works with this element at least in MS IE 5.x+, Opera 4.x+ and MS IE 5.x+ browsers and the advisory title attribute at least in Opera 5.x+, MS IE 5.5+ and Mozilla Gecko (for example Netscape 6.x+) browsers, when the mouse goes over the text. Opera 7.x sets border-bottom: 1px dotted if the element has the title attribute (the same concerns also the element ABBR). An example.
• DFN (definition > dfn): I use this as a definition of some abbreviation, when I use the ACRONYM element.
• CODE: I use it to express basic markup codes (primary elements and attributes) like in this list item.
• SAMP (sample > samp): I use it to represent all kinds of comments (for example /* this is a CSS-comment */), which are one kind of literal code (at least to the author of the source code).
• VAR (variable > var): I use it to express scripting because scripting languages use variables and they base on the usage of variables. That's why it is natural, that VAR represent the whole languages (for example getDocumentElement()).
• CITE: I use it inside BLOCKQUOTE as to express a cite. But I use it also as a in normal text cite of the name of some term, organization, person, section or web address. CITE is the closest semantic element and especially for example to the phrase Inline Phrasal written with capitalized letters is correct to use the CITE element just because it capitalized and not lower case characters. The usage is pure technical and phrasal, not presentational.
• EM (emphasized > em): I use it in most cases as emphasized cite of a term, when I mention an important term at the first time (for example structure).
• Q (quote > q): this is intended to short inline quotations, when is used certain language dependent quotations marks (as default should be some kind of quotation marks). MS IE 5.x+ for Windows identifies the element, but it doesn't quote the text. Works as intended in Opera 4.x+ and Mozilla Gecko browsers. I use it when I explain the meaning of some term and inside comments of code examples, when they refer to source codes
  A test - this text should be red and it should be inside quotation marks and the browser should render the advisory attribute.
• STRONG: such emphasized text, which is not a term.
• SUB and SUP (subscript > sub, supscript > sup): I use them only like Inline Phrasal elements, because in the original usage of them they have clear semantic meaning (read notes to ABOVE etc.), even if in the Modularization of XHTML™ they are classified as Inline Presentational elements. They are problematic to classify, because they are semi-presentational or semi-phrasal elements. Indeed they could be expressed with some phrasal elements with semantic classes (for example <var class="superscript">).

Block level elements

• ADDRESS: I use it in the original purpose in the end of the document to tell my contact informations. In addition I express with this element group of related web addresses. I a way the can be understand as contact information to other sites An example.
• BLOCKQUOTE: I use to quote some person, which is the original usage of this element. In addition I use it into long code examples as if code quotations (the element PRE doesn't always fit to this purpose).
• PRE (preformatted > pre). I express with it some code examples in situations, where it works better than BLOCKQUOTE. The semantic meaning of this element is: the white space in this element is relevant (the text is preformatted in the code level and the element gives a parsing instruction to the browser - it doesn't fulfil the ideals of phrasal elements and it should not belong among them but to an own classification, which W3C has not looked to be justifiable).
• H1-H5 (heading > h). Instead of trying to create heading with nested elements (for example <P><BIG><BIG>...) it is much more reasonable to use special heading elements. I have used them systematic in five levels (the lowest level is H6, which I don't have used).
• DL (definition list > dl). DL and and its child-elements (DT and DD) have strong semantic usage and at that mean they resemble phrasal block elements BLOCKQUOTE and ADDRESS. I use them in some quotations. I use commonly also other list elements in semantic purposes.
• P (paragraph > p). Even if the element P is classified in the Modularization of XHTML as Block structural, I use it only as phrasal purposes to express text paragraphs. In my mind it can be compared to ADDRESS - both P and ADDRESS have strong semantic meaning and they are weak structural elements. Paragraphs are basic phrases, BLOCKQUOTE etc. are special phrases. I use in my CSS-site the element DIV as the basic structural element. I recommend in general this usage.

Other elements

In theory it is possible to use also following phrasal inline level elements, which I have not used:

• ABBR (abbreviation > abbr): in those official browsers, which I have used, it is supported only in Opera 4.x+ and Mozilla Gecko browsers (even MS IE 6.0 for Windows doesn't support it). The meaning of this element is quite the same as ACRONYM.
  A test - this text should be red and the browser should render the advisory attribute.
• KBD (keyboard data > kbd): this element represents keyboard data. Widely supported element, but It doesn't have for me any reasonable usage.

Indeed I would need at least one additional element (for example NAME or TERM) to represent official names and terms. I know that XML designed to give more semantics to the Internet, because HTML can never fully satisfy semantics needs and semantic HTML elements must use wider, which is the original purpose. I would like to write <term>Inline Phrasal</term>, but user agents should handle XHTML like XML in order to apply CSS to own elements - maybe this is possible in future.

In principle the semantics could be expressed with the class attribute, but it is intended primary as presentational usage. It is not good idea to express semantics with this attribute. HTML could work better at the following way:

• The structure of documents is expressed with certain block elements (DIV, TABLE and list elements, for example OL).
• Forms are relative simple.
• The presentation of all elements is expressed only with CSS.
• Semantics is expressed with standard inline and block level phrasal elements and own inline level elements (own block level elements cause structural problems to user agent, which don't support CSS).

Importance of semantics for aural style sheets

In order to get proper working aural and visual pages, it is important not to misuse elements and create artificial complex structures, which don't have reasonable semantics.

Some authors recommends to use the element P to add space. In my mind this cause bad semantics, because an empty paragraph is not semantic a real paragraph. Instead BR means always additional line break and I recommend to use it or CSS to add space. On the other hand if real paragraphs are needed, it is also bad habit to create paragraphs by using the double BR element!

When pure visual presentational elements (B, I etc.) are not used, the structure is clear and the content is accessible. I have tried to use elements so that they have reasonable semantics also to aural browsers. I have used also the title and summary attributes in order to give short explanations of some links, images and tables (the attribute summary concerns only aural browser, but the the attribute title works also in many visual browsers).

Such traditional HTML 3.2 elements, which are not recommended to use in HTML 4.0 documents are called as legacy elements (for example the element FONT and the attribute align). They have commonly only visual meaning and they should be used as seldom as possible (in the Modularization of XHTML, the Legacy Module concerns also some non-presentational attributes).