Topics
Common
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).
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.
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.
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]):
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.
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 someBR-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).
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.