The ‘head’ is where document information goes. This is information about the document itself. It’s for the browser software, not for the human reading the page. You’ll want to give the title of your document, the keywords that are important in your document, and the description that summarizes your document.
The title of the document is used to bookmark your web page if the reader wants to keep a bookmark of it. It is also the text that appears in the window bar of graphical web browsers. If a ‘web spider’ such as Alta Vista indexes your document, this is the title of your document in their index. You make some text your title by surrounding it with the <title> and </title> tag. You should keep it reasonably short and descriptive.
There are two ‘meta’ tags that set your document’s keywords and description. Meta tags stand on their own: you don’t specify an ending for a meta tag. The tag for your keywords is <meta name="keywords" value="keyword1, keyword2, keyword3, etc. "> and the tag for the description is <meta name="description" value="This is a summary of my document. It is cool.">
<head>
<title>A Web Writing Guide: Marking Text</title>
<meta name="keywords" value="Web, HTML" />
<meta name="description" value="A guide to creating web documents by hand, using basic HTML markup code." />
</head>
The body is where the meat of the document goes. All of the information that you’re giving to the reader goes in the body.
Paragraph tags affect entire paragraphs of text. Very much like in your word processor, some changes can be made to individual letters, but many changes always affect entire paragraphs.
HTML ignores whatever carriage returns you put into the document. If necessary, it replaces them with a space. It also ignores any multiple spaces or tabs: no matter how many spaces you put between two words or at the beginning of a line, good web browsers will only display one space.
Otherwise normal paragraphs need to be marked with the <p> tag. The HTML code:
<p>This is an HTML paragraph.
Please read carefully.</p>
Will end up looking like:
This is an HTML paragraph. Please read carefully.
You can modify your paragraph tag with the align attribute. Attributes are things that appear inside of tags. They modify how the text affected by that tag appear on the screen. Often, you will want to center your paragraphs or align them to the right:
<p align="right">This is a right-aligned paragraph.</p>
<p align="left">This is a left-aligned paragraph. (Most of them are, by default.)</p>
<p align="center">This is a centered paragraph. It usually looks ugly.</p>
You might notice that the “align” attribute does not specify meaning, it specifies layout. This is true, and for this reason you need to be careful using it. Since it describes physical layout it will be ignored where that layout makes no sense. If you mean for ‘layout’ changes such as ‘align’ to convey meaning, that meaning will be lost under certain circumstances. In general, you will want to avoid such attributes in favor of cascading style sheets. Usually, when you start using such attributes you are trying to set a style for your web pages. Style sheets let you do that much more easily. But that’s a topic for another tutorial.
You have a number of ‘headline levels’ to work with. The highest level headline--which produces the largest text--is level 1. You can currently use up to level 6.
The headline tag is <h#>, replacing the ‘#’ with the heading level you want. For example:
<h1>This is level 1</h1>
<h2>This is level 2</h2>
<h3>This is level 3</h3>
<h4>This is level 4</h4>
The above html code produces something like:
This is level 1
This is level 2
This is level 3
This is level 4
You should not use heading tags just to make large text. Heading tags mean that the marked text is the headline for the following text. Use the <font> tag to increase text size in non-headlines if you absolutely must.
You can align your headlines in the same way that you align your paragraphs: <h1 align="right">, for example.
When you make a quote, you’ll often want to set it off from the rest of the text. Use the <blockquote> tag. For example,
<blockquote>
“Hey, Scooob, let’s not risk our lives going upstairs to viddie ghosts doing the old in out in out. Let’s just hide from our droogies in this creepy old cellar.”--<cite>Doug Shaw</cite>
</blockquote>
will produce:
“Hey, Scooob, let’s not risk our lives going upstairs to viddie ghosts doing the old in out in out. Let’s just hide from our droogies in this creepy old cellar.”--Doug Shaw
We’ll be getting to that cite thing and what those ‘&’ things are, later on. But I think you can probably guess what they do by looking at the text they produce!
Web browsers ignore your carriage returns and format your text according to the size of the reader’s screen. Web browsers also ignore spaces and tabs at the beginnings of lines. You may well have a large number of documents formatted in a ‘text only’ format that requires multiple spaces, tabs, and multiple carriage returns to keep its formatting.
If you want to keep these spaces in, you’ll need to use the <pre> tag. This maintains the ends of lines, tabs, and spaces. Be careful doing this: it is usually better (if you have the time) to convert your text-only documents to web documents.
You can mark specific parts of your text as emphasized, strong, a citation, or a ‘keyboard’ entry.
Emphasis is usually shown to the reader as italicized. To emphasize a word or phrase, surround the word or phrase with <em> tag.
“But I don’t <em>want</em> a cookie,” she cried.
Becomes:
“But I don’t want a cookie,” she cried.
The strong tag is usually shown to the readers as bold. The tag is <strong>.
<strong>Algernon.</strong> Here it is. (<em>Hands cigarette case.</em>) Now produce your explanation, and pray make it improbable. (<em>Sits on sofa.</em>)
becomes:
Algernon. Here it is. (Hands cigarette case.) Now produce your explanation, and pray make it improbable. (Sits on sofa.)
Citations are also usually shown as italic. They refer to the source of something that you’re quoting or attributing.
I’d rather be in some dark hollow where the sun don’t ever shine<br>
Then to be in some big city, in a small room, with you upon my mind.<br>
--<cite>Dark Hollow</cite>
becomes:
I’d rather be in some dark hollow where the sun don’t ever shine
Then to be in some big city, in a small room, with you upon my mind.
--Dark Hollow
The keyboard tag is for those times when you’re talking about what the reader is doing on their keyboard. For example, you might write:
Type <kbd>666</kbd> and press <kbd>return</kbd>.
in order to say:
Type 666 and press return.
I use this a lot for tutorials--like this one, for example--but you may have less use for it.
You can make superscripts and subscripts with the <sup> and the <sub> tags, respectively:
Go to 5<sup>th</sup> Street and drop the CO<sub>2</sub> in the first Buick Regal.
to get
Go to 5th Street and drop the CO2 in the first Buick Regal.
Most of the HTML tags have some sort of semantic meaning. They tell the browser, whether that browser is a graphical web browser or an audio web reader or a cell phone, what kind of text is contained by the tag. Sometimes, however, you want to specify purely typographical changes with no meaning whatsoever.
For that, you can use styles. Styles are a topic all their own. Styles can be stored in a separate file so that all of your pages have a similar style, and you can change that style without having to edit every page. But for now, you can also use styles inside each page by adding a “style” attribute to any tag.
If you want your headlines to be really big, give them a font-size style:
<h1 style="font-size: 800%;">
You should not use styles tag to create headlines out of paragraphs of other non-headline tags! That's what the <h> tags (<h1> through <h6>) are for. If you create headlines with the style attribute, it might look the same as creating them with <h> tags, but as far as computers go, your fake headlines will blend in with the rest of your document. Search engines will not prioritize your page based on your headlines, because you don't really have any. Browsers that output to devices other than screen or printer won't see any difference between your fake headlines and your text.
You can also change the color of your text. You should be careful doing this: graphical browsers use colors to let the reader know what a link is, and whether that link has been visited recently. If you change the color, that can confuse the reader. The style for color is “color”.
<h1 style="color: green;">
You can specify the font itself if you want to use a specific font on your page. Because you can’t be guaranteed that the reader has the font you specify, you can specify several fonts, separated by commas. The first font that matches a font that the reader’s computer has will be used. If they don’t have any of them, their preferred font for that context is used instead.
Always remember that font requests are guidelines for the browser. There are no guarantees that the reader will see that font.
<h1 style="font-family: American Typewriter, Courier, monospace;">
Sometimes you’ll want to add a style where you have no tags. There are two “functionless” tags for this purpose. The paragraph-level functionless tag is <div>. The character-level functionless tag is <span>. The <div> and <span> tags do nothing on their own. They are designed specifically for adding styles.
You can also combine multiple style specifications by separating them with semicolons.
<div style="float: right; border: inset;"><p><span style="font-size: 200%;">H</span>ello. <span style="color: green;">Kermit</span> <span style="font-size: 150%; color: gold; font-family: koala,zapf chancery,apple chancery;">loves</span> Piggy.</p></div>
Will give you something like:
Hello. Kermit loves Piggy.
When you want to present the reader with a list of items, you can use HTML to handle the bullets or to automatically number the items, and to determine the correct indentation.
Unordered lists use bullets. In order to start a list, you use the <ul> tag, and you surround each item with <li>.
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Kumquat</li>
<li>Potato</li>
<ul>
<li>Russet</li>
<li>Yellow Fin</li>
<li>of the Earth</li>
</ul>
<li>Tomato</li>
</ul>
will become:
n Apple
n Orange
n Kumquat
n Potato
¦ Russet
¦ Yellow Fin
¦ of the Earth
n Tomato
Some browsers will use different bullets for each level of the list, if you ‘nest’ lists as I did above.
An ordered list is numbered. It looks just like an unordered list except that the list is marked by <ol>. Replace the ‘ul’ with ‘ol’ in the above list, and you get:
1. Apple
2. Orange
3. Kumquat
4. Potato
a. Russet
b. Yellow Fin
c. of the Earth
5. Tomato
A definition list is like a dictionary entry: each item has a term and a definition. Surround the definition list with the tag <dl>. Mark the terms with <dt> and the definitions with <dd>.
<dl>
<dt>Alice’s Adventures Underground</dt>
<dd>The first <em>Alice</em> book was written between 1862 and 1864 by Charles Lutwidge Dodgson as a tale for the three Liddell girls.</dd>
<dt>Alice’s Adventures in Wonderland</dt>
<dd><em>Wonderland</em> is a re-telling of <em>Underground</em>, and expands the story from 18,000 to 35,000 words. <em>Wonderland</em> was published in 1865 with illustrations by <em>Sir John Tenniel</em>.</dd>
<dt>Alice’s Adventures Through the Looking Glass</dt>
<dd>The final <em>Alice</em> book was written by Adam Weisshaupt under the auspices of the <em>Bavarian Illuminati</em> in 1893.</dd>
</dl>
will become something like:
Alice’s Adventures Underground
The first Alice book was written between 1862 and 1864 by Charles Lutwidge Dodgson as a tale for the three Liddell girls.
Alice’s Adventures in Wonderland
Wonderland is a re-telling of Underground, and expands the story from 18,000 to 35,000 words. Wonderland was published in 1865 with illustrations by Sir John Tenniel.
Alice’s Adventures Through the Looking Glass
The final Alice book was written by Adam Weisshaupt under the auspices of the Bavarian Illuminati in 1893.
You will often want to use the strong or emphasis tag along with the definition term (<dt>) to make it stand out.
Some text characters don’t use standard beginning and ending tags. Most of these look like “&word;” or “&#number;”. Because the “&” marks the beginning of a special character, if you really want an ampersand you’ll want to write it as “&”: John & Mary, for example.
Most computer geeks use “straight” quotes. They tend to look pretty stupid (the quotes, not the geeks): John said, "Hello, Mary. It's nice seeing you!"
That’s because, in the past, computers couldn’t display normal quotes, and the web took a long time to catch up. You would occasionally even see silliness such as, John said, ``Hello, Mary. It's nice seeing you!''
Fortunately, you don’t have to do that sort of thing any more. Use the following special codes for curly quotes:
|
Code |
Quote |
|
‘ |
‘ |
|
’ |
’ |
|
“ |
“ |
|
” |
” |
Thus, John said, “Hello, Mary. It’s nice seeing you!” will appear as it is supposed to: John said, “Hello, Mary. It’s nice seeing you!”
These are easy to remember as “left single quote”, “right single quote”, “left double quote”, and “right double quote”, respectively.
There is another way of showing quotes that is conceptually better, but it is still not well supported. This is the <q> tag. By surrounding a quote with the <q> tag, you are specifying some real meaning: that this is a quote, and it begins and ends here. The ampersand codes to not convey any meaning; they are simply methods of displaying specific characters.
If you need to force line breaks, you can use the <br /> tag. Even though this looks like a normal tag, there is no ‘end’ to this tag. More specifically, it is its own end. All HTML tags require an end, but for those that don’t need any text between the beginning and end you can imply an immediate ending with <TAG />. That final slash tells the browser that this tag is its own ending.
Use ‘©’ to place a copyright symbol: ©.