Jan's HTML Basics: HTML Code

The HTML code, called the source code, that is behind a web page is a way to mark up a document by labeling its logical parts. Programmers get annoyed with this use of the word code. HTML is not anywhere near being a programming language!

You use tags to label the headings, normal paragraphs, lists, and special sections, like quotes, addresses, tables, hyperlinks, forms, and frames.

A tag is made by writing the name of the tag between the angled brackets < and >, like <html> and <p>. Most tags come in pairs, an opening tag and a closing tag. The closing tag has a forward slash, like </html> and </p>.

Let's look at the basic tags now. In the next lesson you will see what it looks like when the tags are put together with text to make a web page.

Tags can be written with upper case, lower case, or even mixed case. In these lessons, examples of HTML code will use lower case, like <body>. In a sentence, however, tags will be referred to with uppercase, like "The BODY tag is required."

It is smarter to stick to lower case when writing HTML code for three reasons.

Upper case is harder to read. It will easier to find your typing errors if the tags are in lower case.
Upper case is harder to type.
The next version of HTML is XHTML, which requires all text in a tag to be lower case and that tags must have a closing tag. It would be smart to develop good habits now.

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser Basics

Project 2: HTML Basics
    HTML Code
    Code Example
    About HTML
    What You Need
    Code by Hand
    WYSIWYG
    FrontPage/FPX
    Images in HTML
    Formatting
    Tables
    Print
    Convert
    Summary
    Quiz
    Exercises

Search
Glossary
Appendix

Paired Tags

Most HTML tags come in pairs, an opening tag and a closing tag. They surround and contain the part that they are labeling, like:
<p>Here is a paragraph.</p>.
The purpose is to tell what the logical function of that part is.

Document structure tags:

Headings

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

Marks the headings and sub-headings of your document.

H1 is the top-level heading.

Browsers will usually make headings look different from regular paragraphs and from each other by changing the size, boldness, or font for the text. Headings usually have extra blank areas, called white space, above or below the text. Some programs can use the heading tags to make an outline or table of contents.

Paragraph

<p> </p>

Marks a normal paragraph of text.

There is extra white space between paragraphs compared with lines that just wrap in the window.

There are many other structural parts, like numbered lists, bulleted lists, addresses, quoted material, tables, etc. Some of these will be discussed later.

When discussing a paired tag, it is usual to just use the opening tag in the sentence and to drop the < and > symbols, like "The BLOCKQUOTE tag is often mis-used to create an indention."

Logical formatting

`<em> </em>`	Emphasis Most browsers show EM text as italic.
`<strong> </strong>`	A stronger emphasis than EM. Most browsers show STRONG text as bold.

The tags <em> and <strong> are used to mark words or phrases that should look different from regular text for a logical reason. For example, a new term might be marked this way. The browser will control exactly how these tags change the look of the text. Software that reads text aloud knows to give vocal emphasis to words with these tags.

Character formatting

These tags let you change the look of your text. They are being replaced with Cascading Style Sheets (CSS), which is an advanced topic.

`<b> </b>`	Bold
`<i> </i>`	Italic
`<u> </u>`	Underline
`<font> </font>`	Must include attribute(s) that set typeface, size, and/or color. Example:`<font size="3" face="Georgia" color="blue">` The FONT tag has been deprecated. This means it is considered obsolete. At some point in the future browsers may not even recognize the FONT tag.

Unpaired Tags

A few tags do not have a closing tag in HTML. They stand alone.

`<BR>`	Inserts a line break in your text.
`<HR>`	Inserts a dividing line with blank space above and below the line.
`<!-- -->`	A comment: Anything written between the tags is ignored by the browser. Authors often write notes to themselves inside these tags. They can help the author pick out the parts of the page later when it must be edited.
`<img>`	Contains information about where to find an image file and how to display it. Example: `<img alt="My dog" src="rover.gif" border="0" width="95" height="80">`

Hidden Tags

Some tags do not label parts of the document itself. They give important information to the browser. They do not do anything to the page that you see in your browser.

`<!doctype...>`	Tells the browser or code-checking program what version of HTML was used to write the source code. Many HTML editing programs add one of these automatically. A browser will display the page without this tag, but the results may not be what you intended. Most current browsers change the page display based on which DOCTYPE you use. Programs that check the code for accuracy need this information to work properly. Must come before the `<html>` tag. Example: `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">`
`<html> </html>`	Required. Marks the start and end of the HTML document. All other tags must be between these two except the DOCTYPE.
`<head> </head>`	Marks the start and end of directions to the browser. Nothing in this section will display on the screen. Must come before the BODY tag.
`<title> </title>`	Surrounds text that will display in the browser's title bar. Must be contained between the HEAD tags.
`<body> </body>`	Required. Surrounds the material that will display on the screen - text and images. Must be between the HTML tags.

What Can Contain What?

Block elements are the tags that define sections of the document and, generally, start a new line. This includes all the headings, the paragraph tag, lists, and tables.

Tags that are not block elements, are called inline elements. These include the logical and character formatting tags.

When a tag contains other tags, we say that the tags are nested.

Rules on Containment:
Block-level elements may contain both other block elements and also inline elements.
Inline elements can only contain data and other inline elements.

In some browsers, breaking these rules can make parts vanish from your page!

Example: To display the sentence - This is hard!

Right:   <p><b><i>This is hard!</i></b></p>
              Block element P contains the inline elements B and I. Since the opening order was P and then B and then I, the closing order is the reverse, I and then B and then P.

Wrong: <b><i><p>This is hard!</p></i></b>
               Containment error: Inline elements B and I contain block element P.