A. Basics and terminology
1. HTML tags
HTML uses standardized words or abbreviations and other symbols inside angle brackets.
Each one of these is an HTML tag.
2. Start & end tag pairs
Most tags must come in pairs that enclose some content: an opening or start tag that means “mark as such from this point”, and a corresponding closing or end tag (same word or abbreviation preceded by a slash) that means “mark as such up to this point”. Examples:
Meaning: the enclosed text must be emphasized or strongly emphasized.
Visible result: as a rule, italics or bold respectively.
3. Self-contained tags
A few tags mean just “insert this here”, so they are by nature self-contained (no start & end pair) – for instance the tag for a line break:
In XHTML (the rigorous version of HTML that WordPress uses), self-contained tags must also have their proper closure: as the example shows, they need a space and a slash before the closing angle bracket.
4. Tag pairs inside other tag pairs act cumulatively
A tag pair inside another tag pair won’t cancel the effect of the outside one, it will add its own effect (except if they’re mutually contradictory). Examples:
<em><strong>BOLD ITALICS HERE</strong></em>
<em>ITALICS HERE <strong>BOLD ITALICS HERE</strong> ITALICS CONTINUED</em>
5. Some tag pairs are part of tag complexes
Some tag pairs are only used in combination with other related tag pairs. For example, to create an automatically numbered list you enclose each list item in a li pair, and you enclose the whole list in an ol pair:
6. Attributes and values
Opening and self-contained tags can or must contain additional functioning elements after the main word or abbreviation. These elements are called attributes, and each attribute accepts a variable value.
For example, the (self-contained) tag for an image is this:
Meaning: insert image here. Naturally, this won’t have any effect unless you say which image must be inserted:
<img src="IMAGE URL HERE" />
In this case, src (source) is the attribute and the URL is its value.
Attributes are again standardized words or abbreviations, and the form of each attribute with its value is also standardized: space, then attribute, then equals sign, then value inside straight quotation marks.
Some attributes, such as the src of the above example, are mandatory; some other attributes are optional: they may be needed or not. For example, you can specify the image alignment (if you don’t want the default one), and you can specify a certain pixel width (if you don’t want to display the image in its original dimensions):
<img src="IMAGE URL HERE" class="alignright" width="180" />
When a tag contains more than one attribute, as in this example, the order of the attributes doesn’t matter.
7. The style attribute
A very special case is the style attribute. Instead of a single value, it accepts multiple properties and values. As an example, here’s the code of the “Important” boxed note I placed near the beginning of this post:
<div style="float:right;width:30%;font-size:75%;border:1px solid #db2645;margin:12px 0 0 24px;padding:12px 12px 0 12px;">
The style attribute, and the properties and values you can use with it, are inline CSS. Details in a companion introductory post (forthcoming).
8. HTML entities
HTML entities are used to display various symbols (including accented characters you don’t have on your keyboard). They are standardized combinations of characters or numbers preceded by an ambersand and followed by a semicolon. Examples:
☆ for ☆
♬ for ♬
See here for lists of symbols and corresponding HTML entities. The decimal versions should be preferred (more symbols available, more browser-safe).
See here how you can modify their appearance.