What is HTML?

Before we start

I'm assuming you have installed the necessary software to write HTML code. If not I strongly recommend that you read through the web design software tutorial before moving on.

HTML

HTML (hyper text markup language) is a markup language in text form which describes web pages and tells web browsers how to display them. In the old days HTML was used for nearly all aspects of web design. Since the introduction of CSS however (will be discussed in a later tutorial), modern web design uses HTML for structure and CSS for appearance of a web document.

Those structuring HTML elements are for example headings, paragraphs, lists, titles and so on. It is important to remember that structure always comes before appearance. For instance imagine a blind person surfing a website with the help of a screen reader (a program which audibly reads the HTML structure of a page). All the pretty colors and designs wouldn't be of much use to that person. A well structured document, however, would.

Elements, tags and attributes

HTML elements, tags and attributes

The basic HTML syntax is very straight-forward. All markup is made up of elements and tags. Consider this example: <em>emphasized text</em>

The <em>...</em> are the tags enclosing the element content. The whole thing is the element.

Extra information can be passed to tags using attributes. They appear in the opening tags as name/value pairs:
<tag name="value">...</tag>

HTML vs. XHTML

In the early days of the internet (and still today) people used to write very sloppy and bad HTML because web browsers would try to automatically correct any errors in the code. People didn't really care whether their code was valid or not as long as it seemed to display correctly.

As more and more internet-capable devices other than computers started to appear on the market (mobile phones, organizers, iPod, ...), W3C realized the need for a thorough standardization of HTML. The idea was that if a website is written in standards-compliant HTML it should display correctly anywhere, no matter what device or browser. Another reason was that small devices such as mobile phones don't necessarily have the extra power to correct HTML code errors.

Thus, the stricter XHTML was born in the year 2000, forcing people to stick to the rules and write well-formed documents. It's based on XML and HTML 4.01. The most recent version being XHTML 1.1 as of this writing.

Everything you learn in the TagByTag tutorials will be based off XHTML 1.0 strict even if sometimes things are referred to as HTML. The reason we're not using the latest XHTML 1.1 is because it is not as backwards compatible and even causes problems or is not supported at all in certain browsers (Internet Explorer *cough cough*)!

You don't have to worry about the differences between HTML and XHTML because HTML is outdated and you won't miss anything by not learning it. In fact, not knowing the old way of HTML coding is great as you won't have any bad habits and can learn from the ground up how to do it properly.

XHTML formatting rules

Below are 5 important rules you should stick to in order to write valid XHTML 1.0 strict:

1. Always enclose tags in angle brackets

<...>

2. Don't leave any open tags

They either have an opening and closing tag wrapping around content <em>...</em> or a single self-closing tag <br /> (note the space separating the slash).

3. Write all tags in lowercase

<br /> and <p name="value"> are ok but not <BR /> or <p NAME="value">.

4. Create well-formed documents

Nested tags can be tricky at first. Just remember that the first tag you open is also the last one to close: blah<em>blah</em> is ok but not blah<em>blah</em>.

5. Always quote attribute values

<p name="value"> is ok but not <p name=value>.

There exist some more XHTML rules you'll encounter later in the tutorials but these 5 are really the core rules necessary to write clean code.