Skip to main content

Introduction to HTML: Structural
Tags

A bare bones introduction to HTML coding

Tags

HTML Tags

The most important characters in HTML are:

1 -- angle brackets (<    >), which enclose HTML codes, and

2 -- the forward slash (/), which is used to "close" HTML expressions

HTML tags enclose the elements or sections of the web page they're intended to affect. Tags are differentiated -- and hidden -- from the content of the web page by the presence of angle brackets, i.e., < >. If I wanted to bold the word HTML in code it would look like <b>HTML</b>, or <strong>HTML</strong>

Note that tags affecting a section of the text must be closed. This means adding a forward slash (/) before the tag is repeated at the end of the section, e.g., </p>

Document Structure Tags

Document Structure Tags

Web pages have two basic containers: the head and the body:

  • the <head> tag, which contains information, or metadata, about the web page, such as a title for the page, javascripts, styles (CSS), meta information, and more. Whatever is inside the <head> tag does not display on the web page itself.
  • the <body> tag, containing the content that actually displays in a browser

For example:

[COPY THE CODE BELOW AND PASTE IT INTO A PLAIN-TEXT EDITOR] <html>
<head>
<title> The title of your Web page goes here</title>
</head>

<body>

The text and images on your Web page go here

</body>
</html>

[END COPY]

Page Structure Tags

<p>...</p> paragraph: starts a new line with an empty line inserted

<br /> line break: starts a new line with no extra line inserted; a "self-closing" tag

Also (for use with CSS, or cascading stylesheets):

<div>...</div> division: enables you do designate sections of text for styling; will insert an extra line

<span>...</span> span: enables you to designate sections of text for styling without inserting any extra space.


Alignment

<center>...</center> centers text and images
<blockquote>...</blockquote> indents text from the left margin


Headings

If you want to divide your web page into clearly labeled sections, you might use a heading tag (e.g., <h1>, <h2>, etc.) By default, heading tags bold the text, begin on a new line and leave a space above and below. The headings on this page are <h3>.

For example: <h1>h1 size heading</h1> =

h1 size heading

h2 size heading

Headings 3 through 5 grow proportionally smaller, until:

h6, which is the smallest heading

Horizontal Rule

You can also separate sections with a horizontal line, as you see above, by using the <hr /> tag.
Because nothing is contained within it, <hr /> is a self-closing tag. Best practice is to include the forward slash after the "hr," but most web browsers will display normally if you forget.

Commenting

Sometimes you may need to add comments within the html -- notes to yourself or to another person who manages the web site -- that should not be publicly displayed. Comments can be inserted as shown here: <!-- Here is where the project description begins --> Begin with a left angle bracket, followed by an exclamation point and two dashes. Enter the note, then close with two dashes and a right angle bracket.

Preformatted Text

To insert preformatted text -- from, for example, a Word document -- into a web page, use the <pre>...</pre> tag.

This will preserve the spacing, tabbing, etc. of the text, BUT will by default display in the Courier font face:

KURT VONNEGUT
1922-2007

Prisoner of War near the end of World War Two in Dresden from December 1944 to May 1945, 
experiencing the saturation bombing of the city.

His first appearance in an sf magazine was "Unready to Wear" (April 1953 Galaxy) 
“Big Trip Up Yonder” (January 1954 Galaxy)
“2 B R O 2 B” (January 1962 If)

Work included in The World’s Best SF anthology (1969); Again, Dangerous Visions anthology (1972) 
Nominated for Hugo Award 3 times.
“Science Fiction” NYTBR 9/5/65
Player Piano originally published as Utopia 14. 
Slaughterhouse-Five (1969) contains time travel and aliens. The Sirens of Titan (1959) features a Martian 
invasion made up of humans, mind control, and a robot alien. Cat’s Cradle  (1963) depicts a fictional substance
 known as ice-9, which has incredibly destructive capabilities. 
Galapagos (1985) tells the story of how human beings eventually evolve into a furry kind of 
quasi-aquatic creature. Player Piano (1952) is about a dystopian society.