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.
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
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).
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:
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
titleattribute 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 dottedif the element has the
titleattribute (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
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
VARrepresent the whole languages (for example getDocumentElement()).
CITE: I use it inside
BLOCKQUOTEas 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.
CITEis the closest semantic element and especially for example to the phrase Inline Phrasal written with capitalized letters is correct to use the
CITEelement 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.
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
ABOVEetc.), 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
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
PREdoesn'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).
DLand and its child-elements (
DD) have strong semantic usage and at that mean they resemble phrasal block elements
ADDRESS. I use them in some quotations. I use commonly also other list elements in semantic purposes.
P(paragraph > p). Even if the element
Pis 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
ADDRESShave strong semantic meaning and they are weak structural elements. Paragraphs are basic phrases,
BLOCKQUOTEetc. are special phrases. I use in my CSS-site the element
DIVas the basic structural element. I recommend in general this usage.
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
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
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>, 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
TABLEand list elements, for example
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
When pure visual presentational elements (
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
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).