It is easy to make HTML-pages. There are many applications, which you can do pages even if you don't understand just nothing about the code structure of HTML, because those application show pages almost as you see them in a browser. These kinds of programs are called as WYSIWYG-applications (What Y ou 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 in code level, what is the structure of HTML- and XML-documents. 1a > 1c give common introduction to HTML and CSS. I handle in the pages 1a-1b primary HTML-encoding and in the page 1c XML-encoding. If you are familiar with HTML, you can skip the introduction to HTML 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.

To the topics

Elements and attributes in HTML and XML documents

Common about elements and 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 (instead of using technical terms, the existence of elements is normally expressed with words, which are taken from everyday language).

HTML base on SGML (Standard Generalized Markup Language; a Gentle Introduction to SGML). 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.

In the SGML documentation is written about tags following (I emphasized some parts of the text; you can look also an another cite):

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

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 M arkup L anguage - 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]).

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! The name of our cow is just Cow.html.

A cow, which have HTML element tags

Tags have open and close delimiters (< ,</ and >). Note that in the end-tag is the forward slash (/). 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 of XHTML documentations (I emphasized some parts of the text; look at also 4 CSS2 syntax and basic data types, 4.1.3 ([ Pw]):


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

Modularization of XHTML (Terms and Definitions)
Descriptive markup delimiting the start and end (including its generic identifier and any attributes) of an element.

In fact the name of the element together with delimiters works to the browser as an element identifier, but 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). Normal elements can be illustrated using a conceptual scheme ([S], [ Pw]). In the example I use the element HTML, which includes the whole contents of HTML-documents.

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

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 elements and so-called inline 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 terms are from the Modularization of XHTML documentation). These inline elements can be nested with each others without any limitations.

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