I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.

D What are semantics of (X)HTML elements

Topics

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 codesA 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.

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).

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).

Not into the public use without my permission. If you want to use my pages at some way read the copyrights.

An editor for creating standard-compliant HTML and XML documents.
Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!