Anyone with extensive HTML experience can easily skip this tutorial. However, novices, and even those who wish to brush up on their basic HTML knowledge, could stand to gain from this section. We will go over and define the various pieces that make up HTML code, including elements, tags, attributes and their uses.

Elements and Tags in HTML

HTML files only consist of text. There are certain characters, all from the regular character supply, for distinguishing parts of the text.

The content of HTML files is placed inside HTML elements.

Here is an Example:

<h1>HTML – the language of the web</h1>

This is how it actually looks:

HTML – the language of the web

Explanation:

The example shows a first order heading. The introducing <h1> tag signals that a first order heading is going to follow. The closing </h1> tag signals the end of the heading. A closing tag begins with a left arrow and a forward slash, like “</”.

Pay Attention to the Following:

With standard HTML, it doesn’t matter if tags are notated in lower- or uppercase. Therefore, <h1> and <H1> mean the same thing in standard HTML. However, in the new HTML variant, XHTML, element names must be written in lowercase. So it is recommendable to always write the element names in lower case, regardless if writing HTML or XHTML.

Another Example:

One line and a manual line break<br>
The next line

Here is what it looks like:

One line and a manual line break

The next line

Explanation:

The <br> at the end of the first line signifies that a manual line break will be entered at that point. (br=break).

Take Note:

If you want to write elements in XHTML correctly, then elements with standalone tags must be notated differently: instead of <br>, they must be notated as <br />. The element name must be written with a closing forward slash. Alternatively, you could also notate the element as <br><br/>, with an introducing and ending tag, but no content. We will go over this more in depth later on in some of our other chapters.

Interlocking Elements

Elements can be interlocked with one another. A hierarchical structure then results from this technique. Complex HTML files contain many interlockings. This is why many experienced HTML programmers talk of structured markup.

An Example:

<h1><i>HTML</i> - the language of the internet</h></p>

Explanation:

The i Element stands for italics. The text between <i> and </i> will be displayed in italics, depending on the font and size of the first order heading.

Attributes in Tags

Introducing and standalone tags can include additional information.

An Example:

<h1 align=“center”>HTML – the language of the web</h></p>

Explanation:

The align=“center” attribute makes it so that text is centred.

There are the following types of attributes present in HTML elements:

• Attributes with value allocation, where only certain values are allowed. Like with <h1 align=“center”>, for example. Here only the values, center, right, left and justify are allowed.
• Attributes with free value allocation, but where a certain type of value or convention is expected. Such as with <style type=“text/css”> (this defines the field for style sheets and MIME types are always constructed as type/type below). Or <table border=“1”> (This defines the pixel strength for a table border and a numerical input value is expected.)
• Attributes with free value allocation without any further conventions, like <p title= “Introduction to HTML”> - an entire text can be entered here if desired.
• Standalone attributes, such as <hr no shade> (a separator with no shade). Although standalone attributes only exist in standard HTML. If you wish to write in XHTML correctly, then you must notate the attribute as <hr noshade=“noshade”>. We will of course discuss more of the differences between XHTML and HTML later on.

Even though standard HTML allows certain attributes to be written without quotation marks, you should not use this option. It lowers the possibility of mistakes when you fundamentally and always place all values allocated to attributes in quotation marks. Either ‘ or “ can be used, it is only important not to use different types with the same value.

The same holds true for element names holds true for attribute: with HMTL it makes no difference whether you write in upper- or lowercase, but in XHTML all attribute names need to be written in lowercase. The difference in a lower or uppercase value can sometimes be important, depending on the type of value.

Next to attributes, that are only present in certain HTML elements, there are also so-called universal attributes that are allowed in nearly every HTML element.

An Example:

<p id=“Introduction”>Text</p></p>

Explanation:

The example defines a paragraph of text with <p> and </p> tags. A universal attribute is notated in the introducing tag, namely, the id attribute. This allows you to give distinct names for single HTML elements throughout the document. We will go over universal elements in more detail in a separate section.

HTML Parser

A HTML parser is understood as software that recognises HTML and transforms it into structured text. Every web browser possesses a HTML parser in order to even understand HTML to begin with. Unfortunately, such parsers are often confronted with HTML coding mistakes in most websites. Usually the mistakes are small and not too tragic, but some websites’ HTML source code so horribly disfigures the rules of HTML that insufficient is not strong enough of a word. Strong parsers, which check exactly how much a website adheres to the rules, should not display such insufficient websites and instead provide an error message. However, such a parser would hardly have any chance on the open market, because it would barely display a single prevalent website. As a result, today’s parsers are all fairly accepting and most simply digest everything. Internet Explorer has taken this loose parser type the furthest. This allows them to proclaim they “command” HTML the best, while many experts feel their practice is only furthering sloppy and mistake ridden HTML coding.

It has become more and more important to adhere to the rules of HTML in the face of increasing complexity resulting from numerous languages, such as HTML together with embedded CSS, Javascript, PHP, etc. We will describe these important rules in more detail in a separate section.

If you want to see for yourself if your HTML website conforms to all the rules, then a so-called validator is a very useful tool. A validator reads an entire site, determines which document type is given for the site, and then strongly checks how well the site adheres to the corresponding rules.

The oldest offered validator comes from WC3: validator.w3.org. There you have the possibility to either upload a file from your computer, or give the validator a web address to check.