The HTML Guidebook

Chapter 2: Syntax

< Chapter 1

Contents

HTML

Case-insensitive

HTML is case-insensitive; it does not matter how you type the elements, but as general rule of thumb, developers like to keep a common consistent style that you will see throughout this guidebook.

Normal Elements

Normal elements make up most of the HTML you'll write. Each is made up of a start tag and an end tag. A tag is simply the construct used to build elements.

<div>Text</div>

In this example, <div> and </div> are the tags that make up the div element.

<div> is the start tag and
</div> is the end tag.

Additionally, some elements have optional tags. For instance, the end tag of the p element is optional.

<p>a first paragraph
<p>a second paragraph

Void Elements

Other elements in HTML are called void elements, or in XML terminology, empty elements. They are sometimes eroneously refered to as self-closing elements.

The only difference between these and normal elements is that void elements do not have an end tag. They are therefore not used to markup text, but more often standalone objects, such as images.

<img src="image.jpg" alt="A JPEG Image">

Attributes

HTML elements can have attributes that further define what they do. Attributes are always defined in the start tag.

There are four types of attributes:

Empty

Indicates a boolean value attribute. If present, the attribute is evaluated as "true".
```
<input disabled>
```
Unquoted
```
<input value=yes>
```
Single-quoted

Useful when attributes contain spaces and/or double quotes.
```
<input value='Be "evil"'>
```
Double-quoted

Useful when attributes contain spaces and/or single quotes.
```
<input value="Don't be evil">
```

Character References

HTML has a number of named character references that you can use. They are useful for outputting special characters such as copyright symbols (©). They start by an ampersand, followed by a name, and end with a semi-colon.

&copy;

Outputs a © symbol.

In programming parlance, these are called escaped characters.
(To use a character reference is to escape a special character in your code)

Nesting Rules

Elements in HTML may be nested; i.e. contain each other.

<div>
    <div></div>
    <div></div>
</div>

Take care not to introduce improper nesting.

Valid:   <strong><em>Text</em></strong>
Invalid: <strong><em>Text</strong></em>

XHTML

Case-sensitive

Unlike HTML, XHTML is case-sensitive. Start tags and end tags must match, and they must respect their preset case. For XHTML, it's easy: all tags are lowercase.

Normal Elements

Normal elements in XHTML are only different from HTML in that they do not have optional tags. In XHTML, every tag is required.

Empty Elements

Called void elements in HTML, empty elements in XHTML are written slightly differently; there is an added space and slash before the end of the start tag.

<img src="image.jpg" alt="A JPEG Image" />

Attributes

There are three types of attributes in XHTML:

Empty

Indicates a boolean value attribute. If present, the attribute is evaluated as "true".
```
<input disabled="" />
```
Single-quoted

Useful when attributes contain spaces and/or double quotes.
```
<input value='Be "evil"' />
```
Double-quoted

Useful when attributes contain spaces and/or single quotes.
```
<input value="Don't be evil" />
```

Character References

HTML has a number of named character references, well over a hundred, most of which you will never use, but XHTML, which follows XML rules, has only five; namely < (<), &gt (>);, & (&), " (") and ' ('), used for various coding purposes.

Instead of all the named character references, XML languages are usually used in conjunction with UTF-8, a language encoding which already includes many of the characters typically referenced natively, so you can type © directly instead of typing © in your code.

Nesting Rules

XHTML has the same nesting rules as HTML.

< Chapter 1

Contents