Jan's Illustrated Computer Literacy 101 Logo:Jegsworks Jan's Illustrated Computer Literacy 101
Home > Jan's CompLit 101 > Working with the Web > HTML & CSS Basics > HTML Code
Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's Working with the Web

   HTML Code

The HTML code, called the source code, that creates a web page is a way to mark up a document by labeling its logical parts. But, HTML (HyperText Markup Language) is not anywhere near to being a programming language!

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

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>. Some tags stand alone, like <br> for a line break and <hr> for a horizontal rule (a line across the page).

An element is the opening tag with its closing tag and everything in between them.

Example: <h2>This is a subtitle</h2> is an H2 element.

Standards

There are several standards (rules) for writing HTML. In these lessons, we will try to stick to the basics of the basics for HTML5.

  • HTML 4.01 was finished in 1999. It comes in three flavors - Strict, Transitional, and Frameset.

  • XHTML is a combination of HTML and XML. It stands along side HTML 4.01 and HTML 5, not in between them.

    XML is a markup language similar to HTML but you define your own tags in XML. XML was designed to store and transport data. HTML was designed to display data.  XML is used widely to transport data between different programs.

    XHTML is very strict about its rules. Incorrect code will not be rendered at all. Everything is case-sensitive. All tags must be closed. XHTML keeps the white space instead of squishing it all together like HTML does.

    There are advantages to having strict rules, but many web authors prefer to use HTML so that browsers can 'fix' their code mistakes and show something, even if it is not quite what they meant. Some companies and government agencies require that their own publications meet the XHTML standard.

  • HTML5 was finalized in late 2014. All major browsers support most of HTML5 but none fully support all of the new tags yet.

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.

Writing Tags

TipUse lower case: Tags can be written in HTML with upper case, lower case, or even mixed case but lower case is preferred. XHTML requires that all tags be in lower case. In these lessons, examples of HTML code will use lower case, like <body>. In a sentence about HTML, however, tags will be referred to with uppercase. This makes it easier to tell that the word is a tag. Compare: "The body tag is required." to  "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 in quantity. It will be easier to find your typing errors if the tags are in lower case.
  • Upper case is harder to type.
  • XHTML requires all text in a tag to be lower case. It would be smart to develop good habits in case you find that your pages must comply with the rules for XHTML, as many company and government documents must.

TipWhen discussing a paired tag, it is usual to just use the opening tag in the sentence and to drop the < and > symbols, like "The P tag is used for text that is a paragraph."

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 the following element:

<p>Here is a paragraph.</p>

The purpose is to tell what the logical function of that part is.  A block element normally displays in the browser with a line break after the closing tag. An inline element does not.

Document structure tags:

Headings

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> 		Block-level tags that mark 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> 		Block-level tag that marks a normal paragraph of text.

Most browsers add extra white space between paragraphs compared with lines that just wrap in the window.

Division

<div> </div>
 Block-level tag that marks a section or division of the document.
The DIV tag is used to group elements together to format and position with CSS.
Span

<span> </span>		 An inline tag that surrounds text that you want to style with CSS.

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

Logical formatting

<em> </em>

Emphasis: Most browsers show EM text as italic.
<strong> </strong>

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 - OBSOLETE

These tags let you change the look of your text. They have been replaced with Cascading Style Sheets (CSS). CSS used to be consider an advanced topic but nowadays web authors must learn to use it from the beginning!

<b> </b>
(Obsolete)		 Bold
<i> </i>
(Obsolete)		 Italic
<u> </u>
(Obsolete)		 Underline
<font> </font>
(Obsolete)
   		Must include one or more attributes that set typeface, size, and/or color.

Example:
<font size="3" face="Georgia" color="blue">

The FONT tag is deprecated in HTML5. This means it is considered obsolete and is not included in HTML5 at all. At some point in the future browsers may not even recognize the tag. We are supposed to use CSS to handle this kind of formatting. Some HTML editing programs have not caught up to this!

Unpaired Tags

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

A final forward slash / is required by XHTML, like <br /> but this is not required by HTML 4.01 or HTML5.

<br> Inserts a line break in your text.
<hr> Inserts a dividing line with blank space above and below the line.
<img> Contains information about where to find an image file and how to display it.

Example:
<img alt="My dog" src="rover.gif" 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 directly 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. Some 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.

Examples:
<!DOCTYPE html> for HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<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 between the HTML tag and the BODY tag.

<title> </title>

Surrounds text that will display in the browser's title bar or page tab. 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.

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

What Can Contain What?

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

First some definitions:

  • Block elements: Elements that define sections of the document.
    These generally start a new line. This includes all the headings, the paragraph element, division element, lists and list items, and tables.

  • Inline elements: Elements that are not block elements.
    These include the logical formatting and character formatting tags and images.

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. 

Most browsers try to guess what bad code should have been when there are containment errors. But, sometimes breaking the rules for nesting makes parts vanish from your page!

Example: To display the sentence - This is hard!

Correct:   <p><b><i>This is hard!</i></b></p> 
              Block element P contains the inline elements B and I. Inline element B contains inline element 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.

Wrong:  <p><b><i>This is hard!</b></i></p> 
                Nesting order error: The opening tag for element B comes before the opening tag for element I. The closing tag for I should come before the closing tag for B.