[Top]
More advice for the full screen mode.
   
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.
 
 
Search:
[Help]
To the normal page

1. What are basic structures of HTML and XML documents

Topics

Common

It is easy to make HTML-pages. There are many applications, with which you can do pages even if you don't understand just nothing about the code structure of HTML. Those application view pages almost as you see them in a browser window. These kinds of programs are called as WYSIWYG-applications (What You See Is What You Get).

A Web-document

This level of making pages is not enough, if you want effectively use CSS. It is at least at some level necessary to understand the structure of HTML- and XML-documents in code level. Section 1-4 give common introduction to HTML and CSS. I handle in these sections primary HTML-encoding and in the last section XML-encoding. If you are familiar with HTML, you can skip some sections and continue directly from HTML 4.0 + CSS and the aims of CSS. I recommend however, that you read some behavioral notes from the page Help for TM CSS menu.

[Top]

Generic about elements and the basic idea of HTML

The basic structural parts of all HTML and XML documents (I explain later, what XML means) are elements. The main task of elements is to create clear structure, but they have also other tasks. The meaning of the structure you can understand by comparing following two pages:
Text without any structure:[M][S][Pw].
Text with a simple structure:[M][S][Pw].

In order to separate elements from the content of the document, they need some special encoding, which are called as tags. Tags mark the beginning and (in most cases also) the end of elements (I write about start-tags and end-tags or I use other corresponding words like starting tag, closing tag and termination tag). Because they mark elements, they are exactly written element tags.

HTML base on SGML (Standard Generalized Markup Language). SGML is a generic language to describe the structures of used document languages. It have tools to define individual document types (I handle later closer different document types). SGML is not as such a markup language but a meta language to define markup languages, which are both machine and human readable.

Gentle Introduction to SGML.

In the SGML documentation is written about tags following (I emphasized some parts of the text):

Markup that describes the structure and other attributes of a document in a non-system specific manner, independently of any processing that may be performed to it. In particular, SGML descriptive markup uses tags to express the element structure.

They are called as descriptive markup because they describe, where documents have elements. Tags are the most important markup codes in HTML documents (HTML and XML has also some other markup codes and tags, which I list in the Footnote 1[S][Pw]).

The name of the element is called as the generic identifier of the element and it means different matter as tag as you can see from the following cites of SGML and modularization documentations (I emphasized some parts of the text):

SGML:

Generic identifier (GI) = A name that identifies the element type of an element

Modularization of XHTML (Terms and Definitions)
:
Tag
Descriptive markup delimiting the start and end (including its generic identifier and any attributes) of an element.
W3C: CSS2: 4 CSS2 syntax and basic data types, 4.1.3[Pw].
Modularization of XHTML.

Indeed the name of the element together with delimiters works to the browser as an element identifier (what are delimiters can be seen from a conceptual scheme[S][Pw]), where I use in the example the element HTML). It is however incorrect to say, that the whole tag is an identifier, because the start-tag may have several identifiers (I handle this matter later)

In SGML elements don't have any specific tasks, but in HTML they have defined tasks. The main task is however the same as in SGML to express the structure of documents. The name HTML comes partly from the idea, that starting and termination tags mark areas - that's we speak and write about a markup language.

In fact tags are like stamps, which are hit among the content to the start and possible also to the end of elements in order to certainly separate elements from other code. I hope, that you could understand this matter also from the animal metaphor. This animal has normally some tags. Not however just these tags, which I have drawn to this picture! Let's think that the name of our document is Cow.html.

A cow, which have HTML element tags

The another main task of elements in HTML is to create links. HTML was original designed to be extremely simple language to create documents, which have hyper links (they are either links inside the document or links between documents). That's why we talk also about hyper text and HTML (Hyper Text Markup Language - originally HTML included only text links). In the early HTML-documents other than linking elements were primary as assistance codes, which made the text more readable and clear organized ([M][S][Pw]).

Elements, which can get both start- and end-tags can work as element containers to other elements and contents. These elements can be as parent elements to child-elements (elements, which are inside the start and end tags of the parent element without any other element levels between them; I handle this point of view more thoroughly later in this site). Parent elements can have content models (corresponding an element, which is a child-element of some other element, can have parent models).

Some elements can't have closing tags, because they don't mark any areas. They are called as "empty elements".

An example of usage of elements P (paragraph) and BR (forced line break), which look out following, if you watch at it from the source code ([M][S][Pw]):

<P>This text is inside starting<BR>
and termination tags,<BR> but it does have some BR-elements,
<BR> which create forced line breaks.</P>
 

Footnote 1. An example of standard document definition file is http://www.w3.org/TR/REC-html40/loose.dtd. DTD-file includes following declarations (... = the content of the declaration):

W3C: loose.dtd (HTML 4.01).

Elements, <!ELEMENT ... >
Attribute lists, <!ATTLIST ... >
Parameter entities, <!ENTITY % ... "..." >. They are so-called DTD-macros, which collect in DTD-files used values, attribute or elements, for example <!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">. I explain the usage of them in two pages (Help for HTML All[S] and Help for TM wappush[S]).
Common entities/ general entities, for example <!ENTITY amp "&#38;">. In standard DTD-files they are either listed or referred with addresses. They are needed in order to display certain characters, which are used in the source code. For example displaying this sign < on the screen. The sign begins with &, in the middle is the text lt and ends with ;. Accented characters should mark as entities, for example ä = ä (used for example in Finnish and Swedish texts) and ç = ç (a Spanish/Portuguese character). Text, where entities are converted into certain characters is called as PCDATA (Parsed Character Data; look at also the reference #PCDATA[S]).
 

Common entities are one of the other markup codes, which I have referred.
Markup codes = element tags, comment tags, common entities. In addition XML use markup codes and ]]> to exchange the parsing mode. All, which is inside them are read as literal (CDATA = Character Data). In HTML 2.0 and HTML 3.2 this was accomplished with some obsolete elements[S].

[Top]

Block and inline level elements

Besides the classification elements to normal and empty elements, HTML-encoding has another main classification. The document body has two main element types, block-level elements and inline-level elements. The previous create surrounds as if an invisible rectangular box and line break before and after the element.

Block elements can be classified into some sub-classes. Common block elements are H1-H6, P, BLOCKQUOTE, OL, UL and TABLE. Block elements can usually include other block elements (there is however some exceptions, which I don't handle) and inline elements. For example this text is inside a block element! The primary task of block level elements is to work as structural, grouping and organizing elements of the content of the document.

There is two kinds of inline elements. First those kinds of inline level elements, which affect some way to the text. For example B and I belong to them and they are called as inline presentational elements. Most of these kinds of elements have certain semantic meaning. Previous elements can be expressed also with semantic elements EM (emphasized) and STRONG - this kind of elements are called as inline phrasal elements. These inline elements can be nested with each others without any limitations.

W3C: Modularization of XHTML (used terms).

These kinds of inline level elements don't create round them rectangular boxes like block-level elements. They look like a phrase in a line. The text can wrap from line to line and it might broke from different places. Inline elements, which affect to the text are commonly used to highlight some parts of the contents.

When I was in the university, some students used a thick yellow felt-tip pen in order to mark their books. I use at the same way the element CODE, which I mark as blue only those markup codes, which can be seen only from the source code - note, that the highlighted texts in this sentence have been marked with inline-level elements (CODE and STRONG).

An image of an element markup

Also the special linking element A (from the word Anchor) belongs to inline elements. It behaves like elements, which affect to the text, but is has the limitation, that links should not be nested.

Other kind of inline elements are those, which create rectangular boxes round them but however behave (unlike block elements) like a phrase in a line. These kind of elements could call according to the behavior as inline block elements. Some empty elements are as their characteristic inline elements and they behave at this way (for example IMG).

In general inline level elements should be used inside block-level elements. Some HTML versions allow to use them also stand alone, but it is not recommended to use them at that way.

It is important to set block and inline level elements correctly. The misuse is common and browsers tolerate it at some level. But it can also cause unexpected error behavior and crash the user agent. You can learn to use correct block and inline elements by reading notes to different specifications[S] and How to set CSS for table elements[S]. I defined to this site a special semantics[S] and you can learn also from that page something, how to use use elements correctly.

[Top]

The document tree

Elements create to the document the document tree. The document has one root element, which in HTML-documents is just HTML (in XML document the root element can be different). Inside the root element is the invisible part of the document, which have as the main element the element HEAD.

In this case the metaphor is the human (or Animal) body. All of us have a head. Some elements has also a foot-part (like TFOOT = the (optional) foot-part (footer) of the table). Note that in metaphors the document is looked from bottom to top or direct from the front.

Elements inside the element HEAD contain for example some hidden information and possible parts of programming code, which affects some way in the document body. The element TITLE is the only visible element inside the element HEAD. The title of the document can be seen in the document window.

The main part of the document is inside of the element BODY. Elements in the document body, which have both start- and end-tags can create complex nested structures. They are like "branches" of the document tree (now you must think about the body as the stem of the tree). At this way the tree symbolizes the essence of documents.

A tree

I give next an example of a document tree, which document body has some basic block elements. I have presented the tree also with indented codes, which you can see how elements are nested with each others:

 
HTML  - HEAD 

- META  (non-necessary (implied) element, which contain hidden information primary for search engines)
-TITLE (required element)

- BODY  - H1 (main header, which might have some inline-level font styles)
- P (first paragraph, which can include inline-level elements)
- P (second paragraph)
- BLOCKQUOTE (indented block level quotation, which can include other block-level or inline-level elements (B etc.)
- OL (an ordered list, which is a special sub-class of block elements)
- LI (an individual list element)
- LI (an another list-element; list elements can have many level of sub-lists)
 
<HTML>
   <HEAD>
      <META>
      <TITLE></TITLE>
   </HEAD>

   <BODY> 
         <H1></H1>
         <P></P>
         <P></P>
         <BLOCKQUOTE></BLOCKQUOTE>
         <OL>
            <LI></LI>
            <LI></LI>
         </OL>
   </BODY>
</HTML>

There is also a model page of this document tree:[M][S][Pw].

W3C: CSS2: 3 Conformance: Requirements and Recommendations[Pw].

[Top]

Total structure of documents

Topics

Attributes, declarations and comments

Elements can commonly have attributes, which are inside the start-tag of elements. Attributes have many tasks. For example they define the presentation of elements. Hyperlinks are primary done with the element A with some special attributes (href, id and name).

Because empty elements don't work as element containers, they can have some kind of content only by defining attributes. In some cases the element itself is replaced with the referred content. For example IMG elements are replaced with the images, which the attribute src refer (these kinds of elements are called as replaced inline (level) elements and other are of course non-replaced inline level elements).

Individual attributes have values. In a HTML 3.2 document the element P can have for example the attribute align="center", which means center this paragraph ([M][S][Pw]):

<P align="center">Here is an example of a paragraph, which have the attribute align="center".</P>

In order to better separate elements and attributes I write elements in upper case (like BLOCKQUOTE) and attributes (like style=" ... ") in lower case characters.

There is however two exception. The document type declaration is in upper case letters because of the common style. That doesn't belong actually to the structure of documents. It is not necessary to the browser. If the declaration has file name, it gives however to the browser the possibility to download the file into the memory of the computer. This information is however necessary for validator services and applications.

The declaration have the exclamation mark in the open delimiter (<!DOCTYPE ... >). W3C has created to standard document types DTD-files (Document Type Definition), where are declared all used attributes and elements, and where are also defined allowed element structures (as I have earlier explained, the definition language in HTML-documents is SGML).

It is like the ear-tag of a cow. The cow doesn't need an eartag, but the owner (and the authorities) needs it. Browsers know them without the declaration, but in principle just the document type declares the language, which the documents has been written.

A cow, which have eatags

XML documents might need document type declarations, because the author might made his own declarations. In XML-document is used another declaration (<?xml version="1.0"?>), which correspond the eartags of cows. When I refer to XML-elements I use always lower case characters.

Comments use following syntax, which I have also used in my examples (look at the conceptual scheme[S][Pw]):

/* this is a CSS-comment, which should be green with browsers, which can understand CSS-definitions */

Meaning of particles of documents

A simple HTML document consists of only elements, attributes and contents. I mean it primary ordinary text, which have own markup codes for certain characters (read the Footnote 1[S][Pw], if you want to know more about this matter).

Particles give to the document following basic meanings (I handle them in the priority order, which in my mind they had in the first HTML documents):

  • Content
  • Structure
  • Linking
  • Semantics
  • Presentation

The original idea of HTML is that it is primary semantics and structural language, not a presentation language even if some elements can be understood as presentational. The next section handles a little bit history of HTML.

[Top]

From pre-HTML until HTML 3.2

First Internet documents were quite simple without just at all presentational features. Those kinds of document can be called as "pre-HTML" documents because they don't have any official specification.

First Web-documents

Look at first Internet documents from the introduction (Document types) of the page Help for HTML All[S].

W3C: HTML Home page[Pw].
Other sites: Dmitry Kirsanov.

Gradually people wanted more and more features, similar to what was available in word processors like Word and WordPerfect. This required additional elements and attributes, which can be seen in HTML 3.2.

In HTML 3.2 all attributes were inside elements and inside of the document BODY, as in previous versions of HTML. Content, structure, and presentations were combined in the same document except for linked images and embedded elements (for example, so-called Java-applets). It was quite easy to build these sorts of documents. The problems lay with static structure and presentation - once such a site has been built, changes made to the site's formatting are difficult to make, especially if there are much elements and attributes, which describe the presentation of documents.

HTML 3.2 lead the usage of HTML into a wrong track. Web authors tried to use HTML as a some kind of layout language, which it is not original designed and which it fits bad. HTML 3.2 was an intermediate solution, which was not intended to be so popular as it became.

Indeed if the site is automatic generated (for example with Java-servlets or Perl) and the content comes from a database, HTML 3.2 works quite well, because a link list needs only one template. It is not however possible to create with HTML 3.2 everything, which can be done with CSS. In most cases it is possible to create less code by using CSS, when pages are rendered faster.

The biggest advance with CSS is handwritten large teaching sites like this site. The second biggest advance is sites, which are partially handwritten and partially automatic generated. Someone can program the automatic generated part, some other person can create the handwritten part and third person can create with CSS the common presentation.

[Top]

HTML 4.0 + CSS and the aims of CSS

With HTML 4.0 and CSS, the basic idea is to separate presentation from content. CSS works to assist the display of HTML. CSS means the following (I handle terms in logical order):

  1. Style = special style declarations and rules used to specify the presentation of elements (I handle them later thoroughly).
  2. Style Sheets = style declarations and rules are collected into sheets. A single style sheet is the location of one or more real or logical rules. These rules specify the presentation of a document (the specifications have some inaccurate definitions, which I handle in the Footnote 1[S][Pw]).
  3. Cascading = style sheets can be connected and cascaded - thus the reference to Cascading Style Sheets. Look at the logo of CSS - it shows the basic idea of CSS!
    CSS-logo - get it!
Cascading Style Sheets

CSS combines style declarations and rules from different sources. That's why the term is constructed as a plural (sheets). Styles have different weights compared to each others.

CSS is not however an independent language, because it can only be used to assist other languages (primarily HTML, XML and XSL). The term "formatting" refers primarily to visual formatting, but CSS can be used to format documents in other ways as well. CSS exists solely for the formatting of documents.

CSS is similar to scripting languages like JavaScript and ECMAScript, in that it can be used as small fragments inside the main document. Also, CSS syntax has some similarities to these scripting languages even if CSS is not a programming language.

CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. It is not an actual layout language but rather very limited formatting language.

Instead CSS2 can be call as an almost fully featured layout language, because it can create most layout features, which are needed in web documents. Indeed CSS2 has some missing features. These are added into CSS3[S]).

If a browser were to have full implementation of CSS2, it would at change the character of HTML documents at a fundamental level because the formatting features of most HTML elements could be redefined. Then HTML itself would not be used just at all as a formatting language. CSS cannot, however, exchange the real order of elements (it can hide elements from the screen or reposition them - how it happens, I will explain later).

With it's methods of formatting and layout, CSS aims to:

  1. separate presentation from content.

  2. partially separate structure from content. CSS doesn't separate these two completely, because CSS can't exchange the real order of elements.

  3. give a more exact and much richer presentation to elements as was done in HTML 3.2.

  4. assist in making files more degradable.

  5. give basic documents simple structure.

  6. allow one document to have a different presentation in different devices. It is even possible to make aural style sheets for speech synthesizer and raised letter versions to braille and emboss device and create tactile media.

  7. be used in a variety of documents, including XML documents.

HTML 4.0 with CSS offers the possibility to return to the original idea of HTML - to go back to the roots! Extreme HTML 4.0 documents don't have any presentational attributes. All elements and attributes concern structure and linking and possibly embedded elements. Elements and attributes, which only describe presentation are not used (for example, elements FONT, B, I, U and attributes align, bgcolor). Some of them (for example B) are allowed, but not recommended, because the meaning of elements is primary to describe the structure and semantics, not the presentation.

All possible definitions that affect document presentation are commonly linked into separate files using format <LINK rel="stylesheet" type="text/css" href="stylesheet.css"> as in this example document ([M][S][Pw]):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="stylesheet.css">
<TITLE>
Title text</TITLE>
</HEAD>
<BODY>
<H2>
The header</H2>
<P>
The first paragraph</P>
<P>
Second paragraph. <A href="html_document.html">Link</A >. The only necessary attributes are href and possible linked objects like images.</P>
</BODY>
</HTML>

In the style sheet stylesheet.css is a description of how the element H2 should display. This document (the one you are reading) also uses a style sheet.

CSS is a powerful way to replace HTML 3.2 presentational attributes while offering a richer presentation than HTML 3.2 could ever create. This is achieved simply, with a little code included in the document. CSS documents load quickly, but can be made very attractive when displayed on CSS-compliant browsers. The display is poor, however, on browsers which don't understand CSS. Old browsers, for example Netscape 3.x see pages almost like the first Internet browsers. That means HTML 4.0 strict!

Even if structure is described primarily in the document, it can be affected with CSS. Because declarations of element presentation are kept primarily in external files, the presentation of the whole site is easy to change!

It is however possible to make loose, HTML 4.0 transitional documents. They can have HTML 3.2 level elements and attributes, which are not used in HTML 4.0 strict. In fact some HTML 3.2 attributes are easier to use as to define corresponding CSS. Normal documents, which I write are always transitional documents.

This document almost strict, because I have used in the actual content of this page primary those elements and attributes, which are mentioned in HTML 4.0 strict.dtd (instead in individual links and links sets I have used such elements and attributes, which don't belong to the strict document types including the attribute target to the link element A; you read about the last mentioned attribute from the Footnote 2[S][Pw]). How old browsers can display this document depends on the default settings of the browser and exchanges, which the user has made to them. Test the difference! Compare a file with style sheets ([S][Pw]) and without it ([S][Pw]). The latter is like a HTML 2.0 document.

Note. HTML 4.01 (the fixed version of HTML 4.0) and CSS2 specifications are designed as implementable. Browsers should work as far as possible so, that specification, which they support can be implemented. We must however remember that specifications are under development and between them must be some kind of priority order.

If there are some conflicts between specifications, browsers should work according the newest specification, which they support. Older specification are supported as far as they can be implemented without causing conflicts with newer ones.

Because the basic idea of CSS is the possibility to define presentation elsewhere (for example from separate files), CSS must have priority to the relation with HTML, if both HTML and corresponding CSS has been given or if some HTML-element or HTML-attribute overall handle with some way the same presentational features as CSS.

In this site, I try to explain the following matters:

  1. What style sheets are (this page).

  2. Where style sheets can be defined (page 2). I give some practical examples how to create simple style sheets.

  3. Possible units and color values (page 3).

  4. When user agents (commonly Web browsers) handle style sheets in the rendering process (pages 4-5).

  5. Page layout details (fonts, anchors, links, backgrounds, borders and lists; pages 6-9).

  6. How to control document structures (pages 10-11).

  7. A glimpse to the future (page 12).

The last section handles after HTML 4.01 published XHTML-specifications and and XML. If you don't write XHTML or XML-documents you can skip the page and go directly to the page 2.

John Allsop: The key ideas of CSS[Pw].

 

Footnote 1. These definitions in CSS1 and CSS2 specifications are inaccurate:

CSS1:
a collection of rules
CSS2:
A set of statements that specify presentation of a document.

A single style sheet doesn't need to have many rules (a collection of rules (the same as a rule set) or a set of statements). It can have only one rule or not at all an actual rule like style="color:blue". But also those kind definitions create logical rules. The definition in CSS2-specification is true, when we interpret words a set of statements at the following way:
A set of statements = one or more actual or logical rules.

Footnote 2. Strict doesn't allow to use refers into frames. A member of W3C said, that frames are not well defined enough in order to belong into the strict definition. I removed one link in order to get this document accepted as HTML 4.0 strict. This document was for a while HTML 4.0 strict. Because I need necessary target-attributes in linking to other pages, I just can't create HTML 4.0 strict documents. I don't even regard as reasonable, that the strict definition doesn't allow the attribute target. Just target-attributes are used in opening new windows (people use normally target="_blank" and I use in this site target="new").

[Top]

XML and XHTML

Topics

XML

XML has been born from the special needs of commercial companies. HTML-elements are limited and they don't often describe the matter itself. In XML documents can use HTML-elements or create own elements, which are self-describing like <BOOK-CONTENTS>.

Would you like to create XML-documents?

Especially the purpose of Microsoft is to create large world-wide databases, which have the possibility to use elements and element patterns as searching criterion. Also mathematical science, chemistry could use own elements. Because there is no limits of possible elements, XML is extensible (eXtensible M arkup Language).

HTML documents have predefined presentations to elements. XML elements don't have any default presentation. Undefined XML element is just nothing! A way to give presentation to XML elements is CSS. If XML-documents use same elements as HTML-documents, the same CSS-file can be used in HTML and XML-documents (I made extra page about this matter[S]).

Another way is XSL (eXtensible Stylesheet Language), which have more possibilities to affect to the structure of XML-document. Microsoft favors it. It gives the possibility to set elements in another order with more powerful way than CSS. It is however remarkable, that favoring XSL is partially derived from the truth that the CSS implementation in Microsoft Internet Explorer is not ready. CSS can't give proper presentation to XML document using MS IE browsers.

If the implementation would be better, the case would be different. Shortly - the CSS-implementation of MS IE doesn't fulfil XML-requirements. It is possible to create good presentation to XML documents for example for Netscape 6.x+ and Opera 4.x+ browsers. I handle MS IE 5.5+ in extra page[S]).

The compatibility of XML-documents towards HTML 3.2 capable browsers is depending of the author of the XML document. In the worst case XML-document is to old browsers stick text with some special encoding (read the footnote 1[S][Pw], if you want to know, what I mean with special encoding) - in practice impossible or extremely difficult to read. In fact the author can create his own HTML resemblance language - XML is ideal language to "do-it-yourself " people! XML-document can however be quite readable to old browsers, when all or most elements are same as in the HTML-documents (they don't need however to behave at the same way in XML-capable browsers).

XHTML

An XHTML (eXtensible Hyper Text M arkup Language) document is a special XML-document, which use primary the same elements as HTML-documents. It can be declared either as a HTML or XML document. But XHTML-document must always made according to XML rules, which are in some matters more strict than in HTML documents. First of all documents must be well-formed - it is not allowed to make as much encoding errors as before! Between ordinary HTML-documents and XHTML-documents are for example following differences:

 
  1. Documents might have the XML-declaration (<?xml ...?>), but it is not required. HTML-documents don't have at all corresponding declaration. Like HTML-documents XHTML-documents must declare as XHTML-document with standard DTD-information, for example <!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/"/dtd/transitional.dtd"> (in the strict DTD-document type is a tiny error - read the footnote 2[S][Pw]).

  2. The root element is always html and there is XML namespace declaration: <html xmlns="http://www.w3.org/TR/xhtml1/">.

  3. All HTML-elements and attributes are written in lower case characters. All elements are in XML-documents case sensitive. This kind of combination is illegal in XML-documents even it is valid in HTML-documents: <BODY>... </body>. If attributes have standard values, they must write with lowercase characters (for example align="center").

  4. All attribute values including those, which have only numeric values must be inside quotations. The attribute width=3 is not valid in XHTML-document. It must be width="3".

  5. Values for id-attributes are case sensitive (in addition it is worth to know that if for example for an A element have been set an identifier it is not enough to set just a name-attribute but instead or in addition of a name-attribute must use also an id-attribute, which has exactly the same value as the name-attribute).

  6. Elements are divided more strictly into normal and empty elements. Empty elements don't need in ordinary HTML-documents any kind of closing tags. This is not however valid procedure in XML-documents. Also empty elements needs some kind of clear termination. The termination is marked before the > -sign, for example <br /><img scr="image.gif" /> (when before the forward slash (/) is left a single space, all browsers can read the tag correctly). Then the opening tag is at the same time the termination tag. In HTML-document elements P and LI don't need necessary termination tags even if they are allowed (it is even recommended to give the termination tag for the element P - I use always termination tags to this element). This is illegal in XHTML-documents. It is also illegal to use in XML-documents <p />      or <li />, because those elements are not as their nature empty elements.

Below is an example of very simple XHTML-document ([M][S][Pw]):

<!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en"
http://www.w3.org/TR/xhtml1/"/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/">
   <head> 
      <meta name="keywords"
      content="Opera,Mozilla,Netscape,Internet Explorer,CSS" />
      <title>An example XHTML document</title>
   </head>

   <body>
      <h1>The main header</h1>
      <br />
      <p>Text.</p>
      <p>Text.</p>
      <blockquote>Text inside a block quote</blockquote>
      <ol>
         <li>Text in a list.</li>
         <li>Text in a list.</li>
      </ol>
</body>
</html>

Pages of this CSS-guide are today XHTML 1.0 documents except model pages. It is easy to convert HTML-files into XHTML-files using the HTML Tidy utility, which is HTML-Kit (freeware). If you want to use same CSS-files in HTML, XHTML and XML-document, it is sensible to write names of elements always with lower case characters. I have tried to create my examples so, that they could be used also in XHTML-documents. To use scripts is however problematic, but I have used them like in normal HTML-pages.

W3C: XHTML 1.0 (4.8 Script and Style elements and C.4 Embedded Style Sheets and Scripts), Namespaces in XML[Pw].
Other sites: HTML-Kit Home Page[Pw]
.

The next page handle basic methods, how to use style sheets.

[Top]
 

Footnote 1. DTD-files, which are used with XML-files are primary created according to the same principles as in HTML-files. Own common entities[S] (commonly abbreviations) must be declared. It is recommended to use CDATA sections[S] instead of common entities to express special encoding on the screen. If the author creates his own entities, the document is at some parts an-readable to old browsers. Old browsers can't know what own entities mean.

Footnote 2. In the XHTML 1.0 Strict DTD-file is an erroneous parameter entity declaration ( ), because it doesn't match to the attribute list of element A like it does in the DTD-file for HTML 4.0 loose (target %FrameTarget; #IMPLIED -- render in this frame --).

[Top]