you're reading:
Html & inline css codes

Introduction to HTML for wordpress.com users

A. Basics and terminology

1. HTML tags

HTML uses standardized words or abbreviations and other symbols inside angle brackets.
Examples:

IMPORTANT!

If the HTML of a post includes an opening strong tag without its corresponding closing one, you’ll see your whole main page from that point on turn bold; likewise with other tags that have a visual effect on the text.
If the HTML of a post includes an unpaired closing div tag (tag for sections), the structure of your main page is disrupted: you’ll probably see your sidebar drop to the bottom of the page or some other major layout issue (one of the most common complaints in the WP forums).

To prevent such accidents, one of your first steps when setting up a blog should be to go to Settings > Writing and enable the option “WordPress should correct invalidly nested XHTML automatically”.

For more on this see my post Sidebar at the bottom and related issues.

<blockquote>
<h3>

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:

<em>TEXT HERE</em>
<strong>TEXT HERE</strong>

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:

<br />

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:

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

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:

<img />

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;">
TEXT HERE
</div>

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:

&#9734; for ☆
&#9836; 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.

B. Commonly used HTML

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,456,125 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: