Anyone who has gone into the Open Salon HTML editor will note that HTML text, sometimes called a markup language, is marked up by things called tags. There is a start tag marking the start of a piece of text and an end tag marking the end. For example, this paragraph contains <p> at the start of it and </p> at the end of it. The entire item, “<p>Anyone who has...</p>” is called an element, in this case a p element (or “paragraph element” because p tags are used to mark a paragraph).

Element Content

The stuff between the start tag and the end tag of an element is the content. In this expression:

<b>some text</b>

In this, the text “some text” is the content of the b element (or “bold element”).

Some popular markup

• Use <p>text of a paragraph</p> to mark a paragraph.

• Use <b>bold</b> for bold.

• Use <i>italic</i> for italic.

• Use <b><i>bold italic</i></b> for bold italic.

  That is, combine the bold and italic markup.

Examples of Marked Up Content

Here's an example:

This paragraph illustrates some markup. Two words are in bold. Another three words are in italic. And, finally, four words are in bold italic.

The previous paragraph was set by this markup:

<p>
This paragraph illustrates some markup.
<b>Two words</b> are in bold.
<i>Another three words</i> are in italic.
<b><i>And, finally, four words</i></b> are in bold italic.
</p>

Note that the paragraph is itself a p element. It contains two b elements (starting with the start tag <b> and continuing to the end tag </b>) and two i elements (<i>...</i>). The first b and i elements are by themselves, while the second b element contains an i element.

Element Attributes

Some elements allow attributes, which are special named values that are associated with the element. For example, an “a” attribute (“a” is short for “anchor”, by the way) takes an “href” (or “hypertext reference”) attribute to tell you what's anchored to the “a” element at the other end. This text is an example, and is created by this HTML markup:

<a href="http://www.nhplace.com/kent/">This text</a>

That creates an anchor that has a URL for my home page associated with it.

For example, a p element can have an attribute that says how to align the paragraph (left justified, center justified, or right justified). Consider this paragraph:

This paragraph is centered.

The previous paragraph uses this markup:

<p align="center">This paragraph is centered.</p>

The following is another way to do the same thing, but it requires knowledge of CSS (explained later in this article, and in another I wrote).

<p style="text-align: center;">This paragraph is centered.</p>

Special Cases

In HTML, there are a few special case bits of markup that need no content and that do not require an end tag (in fact some browsers don't like end tags for these). These are hr, br, and img.

• An “hr” element is used to introduce a horizontal rule (a “rule” is typesetting jargon for a straight line). One writes only “<hr>” and never “<hr></hr>” since there is never any content to a horizontal rule.

• A “br” element is used to break a line without starting a new paragraph. (This is sometimes called a “soft return” by typographers.) One writes only “<br>” and never “<br></br>” since there is never any content to a break.

• An “img” element is used to insert an image. One writes only “<img ...>” and never “<img ...></img>” since there is never any content to an image (in the formal sense that HTML means the word content—the picture part is all specified using attributes, which I've elided here by the “...” for brevity).

For various reasons of history and compatibility, though, it is preferable for each of these three cases to terminate the “br”, “hr,” or “img” element not with a greater-than sign (>) but rather with a three character sequence: a space, a slash (/), and greater-than sign (>). So it's preferable to write “<br />” or “<hr />” or “<img ... />” (Ending a start tag with “ />” is a promise that you will not be putting any content or end tag for the element. Never use “/>” if you are planning to put an end tag for that element.)

Images

To insert an image, such as:

one must use an img element, providing several attributes. Most editing programs will help you set this stuff up so you don't have to do it manually. But the above picture was comes from doing:

<img src="http://open.salon.com/files/pumpkin-face1221728008.gif" alt="pumpkin" width="54" height="52" />

• The src attribute specifies the source of the image data.

• The alt attribute specifies text to show if a user uses a text-only web-browser. (This is also used for people who are sight-impaired so that a program can read aloud a description of what sighted people are seeing. And it is used in some situations as the text that hovers over the top of the picture when you wave your mouse over the picture.

• It's useful to provide at least the width if not also the height. By default, if you give no units, the units are pixels (the size of a single little dot on your display screen or printer). You can make this explicit by saying 54px instead of just 54 if you like that kind of thing. In some cases, you may prefer to use other units like inches, as in 0.5in to mean a half inch.

Character Entities

The character ampersand (&) can be followed by certain magic names of characters, with the name terminated by a semicolon. (The semicolon won't appear in your final text but you have to put it in the HTML source.)

• Use &lt; to insert a “less than” sign: <
  Use &gt; to insert a “greater than” sign: >

• Use &amp; to insert an “ampersand”: &

• Use &mdash; to insert an “em dash”: —

• Use &ldquo; and &rdquo; to insert left and right doublequotes (the fancy kind): “foo” (not "foo")
  Use &lsquo; and &rsquo; to insert left and right single quotes: ‘foo’ (not `foo')
  Use &laquo; and &raquo; to insert left and right angle quotes: «foo» (not <<foo>>)
  Note that &rsquo; is also the pretty apostrophe character: can’t (not can't)

• Use &nbsp; to insert a “non-breaking space” character (a space that does not permit a line break). So if you want your name to always appear as Joe Plumber on one line, and never as Joe
  Plumber broken across lines, use Joe&nbsp;Plumber. This will assure that if the pair of words appears near the end of a line, it either all appears on one line or all on the next line. (In fact, &nbsp; represents a non-space, so HTML tries not to break there, but it's a non-space that looks just like a space.)

• Characters with accents are possible to write with this as well. They each have names, so you have to learn the names of things you care about. But, for example, &eacute; will get you é, a letter e with an acute accent over it. &ntilde; will get you ñ, a letter n with a tilde over it. It's case-sensitive (the difference between upper- and lowercase matters) so that &Eacute; will get you É and &Ntilde; will get you Ñ. There is an official full list of character entities but I find it hard to read. There are other lists that are not official but easier to read.

You can find a complete description of the entire HTML specification (version 4) at the w3.org web site. They maintain the standards for many of the protocols and markup languages that describe how the web operates.

Fancier stuff with CSS

There is a special additional stuff you can do using something called CSS (Cascading Style Sheets). CSS is a whole extra language for specifying layout and can be piggy-backed onto HTML text by using a style attribute on various elements. You don't have to understand all of CSS to know how to do some cool things. Just take a look at some examples:

Use <p style="text-indent: 36pt;">Your text here.</p> to create a paragraph that has 36 points of indentation in the first line only. That's half an inch—there are 72 points to an inch. You could say 0.5in if you prefer, but typographers prefer points so they can often specify amounts using simple integers (e.g., 36pt) rather than fractions (e.g., 0.5in).

Use <p style="color: blue;">Your text here.</p> to put the text of your paragraph in blue.

Or combine several effects:
<p style="background: silver; color: red; padding: 12pt;">
Your text here.</p>
will change the background to silver and the text color to red, and will also add 12 points (a sixth of an inch) of padding around the edge between the text and the border;

If you got value from this post, please "rate" it.