you're reading:
Html & inline css codes

Introduction to HTML for wordpress.com users

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).

Italics:

<em>TEXT HERE</em>
<i>TEXT HERE</i>

Bold:

<strong>TEXT HERE</strong>
<b>TEXT HERE</b>

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:

<sup>TEXT HERE</sup>
<sub>TEXT HERE</sub>

Size and vertical displacement are fixed; for adjustable alternatives see my post Formatting text pt. 4: transformations.

Deleted (strike-through) text:

<del>TEXT HERE</del>

2. Links

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.

3. Inserts

Line break:

<br />

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).

Divider line:

<hr />

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:

<p>TEXT HERE</p>

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
</div>
CONTENT WITH SOME STYLING CONTINUED
</div>

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

Quotation:

<blockquote>TEXT HERE</blockquote>

The visual differentiation varies from theme to theme – see my post on Blockquote style.

Headings:

<h1>TEXT HERE</h1>
<h2>TEXT HERE</h2>
<h3>TEXT HERE</h3>
<h4>TEXT HERE</h4>
<h5>TEXT HERE</h5>
<h6>TEXT HERE</h6>

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.

6. Lists

“Unordered” (usually bulleted) list:

<ul>
<li>ITEM ONE</li>
<li>ITEM TWO</li>
<li>ITEM THREE</li>
</ul>

“Ordered” (automatically numbered) list:

<ol>
<li>ITEM ONE</li>
<li>ITEM TWO</li>
<li>ITEM THREE</li>
</ol>

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.

7. Tables

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:

<table>
<tbody>
<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>
</tbody>
</table>

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:

<!--more-->

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:

<!--nextpage-->

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.

C. Useless HTML tags

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

5 thoughts on “Introduction to HTML for wordpress.com users

  1. That happened to me the same thing: I never thought at my age, could learn something about HTML.
    Thank you Panos.

    Posted by portaleazzurro | February 5, 2012, 12:54
  2. The trick with the tag div happend to me once, but I found the reason and tried to pay more attention… Btw there’s also something that cut a bit of the text you’ve written… probably something with the tag p opened between div and /div, but closed after the /div… probably, I’m not sure this is the real reason.
    Also, about the section on special character… I think it would be useful to point out how to type a combining macron so as to write correctly in roomaji (well, rōmaji) (and pinyin). Just saying though^^

    Finally thanks for this article, I’ve just told about it to a friend of mine who’s just starting with wp… I’m sure it will be pretty useful ^__^

    Posted by 風当たり | February 5, 2012, 14:11
  3. @PA:

    Yeah… In the wordpress.com forum I’m now considered an expert, but I started exactly as I’m saying in the post!

    @SG:

    a) The stray div therefore sidebar at the bottom etc is one of the most common complaints in the wordpress.com forum. Why WP insists on keeping the default for the auto-correct option to off instead of on remains a mystery to us.

    b) Yes, contradictory HTML tags can never be start A later start B later end A later end B.

    c) This post is an introduction, not a list of everything. In the entities section I’m linking to a webpage with lots of symbols etc. But thanks for the suggestion: I’ll add a sentence in the post to clarify that “symbols” includes accented characters you don’t have in your keyboard.

    d) I hope the article is useful. I’ll also do a companion one on inline CSS then one on table coding.

    Posted by Panos | February 5, 2012, 18:47
  4. Now I’m reading all of your posts, Panos, and they are really useful. I try not to ask questions before I search for stuff, or if I can google my question. I’m just wondering: howwwww did you add pagenumbers to this posts? *curious*

    Posted by Eszter | March 10, 2012, 22:16

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,519,525 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: