B. Commonly used HTML
1. Text transformations
The following tag pairs can be used to mark any portion of the text (characters or words or phrases inside a paragraph, or a complete paragraph, or a whole section).
The em and strong tags are semantic while the i and b tags are visual only. Use the former (except in the very rare case that a theme doesn’t render them as italics and bold).
Superscripted and subscripted text:
Size and vertical displacement are fixed; for adjustable alternatives see my post Formatting text pt. 4: transformations.
Deleted (strike-through) text:
Simple text link:
<a href="URL HERE">CLICKABLE TEXT HERE</a>
Text link that opens in a new browser window or tab:
<a href="URL HERE" target="_blank">CLICKABLE TEXT HERE</a>
The visual differentiation of a text link varies from theme to theme; usually the clickable text is colored or underlined. The default styling can be changed if you add the style attribute with the desired properties and values.
For an image link you paste the code for the image in place of the clickable text.
For links to specific points down a page, or to specific points on a different page, see my post Links to specific points on a page.
You need it in Text widgets only. In the HTML post/page editor you simply press return (the actual result is a br tag, but the editor hides it from view).
This tag produces a thin, full-width, non-customizable horizontal line. For customizable alternatives see my post Divider lines.
Image (with required attributes only):
<img src="IMAGE URL HERE" alt="DESCRIPTION HERE" />
To get a URL for an image, you upload it from your computer to your blog via Media > Add New. You can also use the URL of an image stored to a different site, but using images uploaded to your blog means faster loading, plus no risks if the other site doesn’t work or if the original image gets relocated or removed.
The alt text should be a description of the image. It shows up in case the browser cannot load the image, it is read by programs for visually impaired users, and it’s important for search engines.
The code displayed above will display the image in its original pixel dimensions (except if the image is wider than the maximum allowed on the theme you’re using: in that case the theme will automatically downsize the image to that maximum). To display a scaled down version, you can add the width attribute with the desired value; for example:
<img src="IMAGE URL HERE" alt="TEXT HERE" width="123" />
But some browsers may not take heed of the width attribute, especially in Text widgets, and especially if the image isn’t uploaded to your blog. Better use the style attribute instead:
<img src="IMAGE URL HERE" alt="TEXT HERE" style="width:123px;" />
4. The p, div, and span tag pairs
The p tag pair marks a paragraph:
Default styling: block of regular text, with a bottom margin (blank space below the text block).
In a Text widget you need this tag pair to create a regular paragraph. Instead of that, you can check the option “Automatically add paragraphs” and press return twice, but only if the content of the widget doesn’t include code.
For a regular paragraph in the HTML post/page editor, you simply press return twice (the actual result is a p tag pair that encloses the paragraph, but the editor hides it from view). You enclose a paragraph in a p tag pair, with the style attribute added, when you wish to modify the default styling:
<p style="PROPERTIES AND VALUES HERE">TEXT HERE</p>
The div tag pair marks a section (content block). Used to style that section any way you like:
<div style="PROPERTIES AND VALUES HERE">CONTENT HERE</div>
A div tag pair can contain anything. So when you want to apply the same change to a series of paragraphs or a complete post, don’t use p tag pairs with the same style properties and values again and again: use one div tag pair.
A div tag pair can contain subordinate (“nested”) div tag pairs; for example:
<div style="PROPERTIES AND VALUES HERE">
CONTENT WITH SOME STYLING
<div style="DIFFERENT PROPERTIES AND VALUES HERE">
CONTENT WITH DIFFERENT OR ADDITIONAL STYLING
CONTENT WITH SOME STYLING CONTINUED
The span tag pair is used to style characters, words or phrases inside a paragraph:
<span style="PROPERTIES AND VALUES HERE">TEXT HERE</span>
Don’t use a span tag pair to style a complete paragraph or any other section: as already shown, for a paragraph you use a p tag pair, for a larger section you use a div tag pair.
5. Automatically styled text blocks
The visual differentiation varies from theme to theme – see my post on Blockquote style.
Again the visual differentiation varies from theme to theme, plus these tags have a meaning for search engines and screen reader programs. For both of these reasons, h tags should only be used for actual headings: don’t use these tags (or the corresponding buttons of the Visual editor) to change the size or the color of your main text.
The default styling of blockquotes and headings can be changed if you add the style attribute with the desired properties and values.
“Unordered” (usually bulleted) list:
“Ordered” (automatically numbered) list:
The default styling can be changed if you add the style attribute with the desired properties and values.
For an example of a list inside a list see here.
Table coding is used to display content as a group of cells arranged in rows and columns.
Required tag pairs:
<table></table> (for the whole table)
<tbody></tbody> (for the main body of the table)
<tr></tr> (for each row)
<td></td> (for each cell)
For example, a simple 3-row 2-column table would be like this:
<tr><td>R1C1 CONTENT HERE</td><td>R1C2 CONTENT HERE</td></tr>
<tr><td>R2C1 CONTENT HERE</td><td>R2C2 CONTENT HERE</td></tr>
<tr><td>R3C1 CONTENT HERE</td><td>R3C2 CONTENT HERE</td></tr>
For a detailed tutorial see my post Table coding for wordpress.com users.
8. Splitting content – two special wordpress.com tags
The read-more tag:
Truncates the content of a post on the main posts page (as well as on category/archive pages, if those pages normally display full posts), and places a link to the rest of the post.
The link text varies from theme to theme (“Read more”, “Continue reading”, or various other versions). You can replace that text with your own, this way:
<!--more YOUR CUSTOM TEXT HERE-->
See Support doc as well.
The next-page tag:
Splits a post or a static page into a series of subpages, with a series of numbers as links to these subpages (as in this post).
See Support doc as well.
Watch out: never paste either of these tags inside any other HTML tag pair. Doing so will separate the opening HTML tag from the closing one, with results as described in the “Important” boxed note on page 2 of this post.