Comp25: HTML Basic Tags

The purpose of an HTML tag is to mark-up text with formatting and other instructions. There are almost one hundred tags defined in HTML, but we'll only be looking at a handful of the most common and useful ones.

Learn more about HTML

HTML Symbols and Signs

Tag Syntax

An HTML tag consists of the name of the tag name surrounded by < and >. Tags almost always come in pairs: a start tag and an end tag. An ending tag is the same tag with a / in front of it. For example:

This is my <b>first webpage</b>!

In the above example, the words "first webpage" are surrounded by <b> tags. <b> is the tag to make text appear bold. Note that the ending tag is </b>, specifying that we no longer want to bold any more text. A tag's effects will not stop until it is ended.

Consider the example we used for your first web page:

<html>
<body>
<h1> Hello World! </h1>
<p> This is my <b>first webpage</b>! Isn't it great? </p>
</body>
</html>

If you look carefully, you will see that every start tag has a matching end tag. Many of these tags are nested inside other tags to create a combination of effects.

Remember the term element? The example above has four elements:

The body element
The heading #1 element
The paragraph element, and
The bold element within the paragraph element

You will also notice that all tags are written in lowercase letters. While this is not a requirement today, it is a requirement in a special version of the HTML language called XHTML.

Required HTML Tags

There are two tags that you must include to confirm to universally accepted standards. Those tags are <html> and <body>.

<html> <body> ... ... ... </body> </html>

You'll see in the example above that all content appears inside the <html> and <body> tags, and that both of those tags end at the end of the file.

Standard Formatting Tags

It is recommended that you try out each of the following tags to see their effect on your web page. Remember as you test that every tag (unless otherwise specified) will have a matching ending tag.

Paragraphs

You must mark paragraphs in HTML. This is simple enough: you use the <p> tag in front of the paragraph and the </p> tag where the paragraph ends. This creates a paragraph element.

Your web browser will automatically insert an extra space between paragraph elements, much like you see in the paragraphs throughout this text.

Headings

To help organize your web page into distinct areas, you should use the available Heading tags. <h1> is the largest heading and is usually used for the title of the page. <h2> is next, used for subheadings on the page.

The web page you're reading now takes advantage of headings all over the place. Look up and down and you'll see the various sections that are marked by different sized headings.

There are six levels of headings available (h1 through h6). As you increase the number, the text becomes smaller. Most people only use the first two or three.

Here is an example of how you can use the heading tags:

<h1>Products and Services</h1>

<h2>Landscaping:</h2>

<p>Our company can do landscaping for a low cost. Just call our experts...</p>

<h2>Tree Trimming:</h2>

<p>We can trim trees up to 8 feet tall with our mobile tree-trimming...</p>

<h2>Weeding:</h2>

<p>Having problems with weeds? Call us for fast, friendly service...</p>

In addition to making the text larger, the web browser will automatically insert some space before and after the heading elements.

Line Breaks

If you want to start a new blank line, but don't want to use the <p> tag because it creates a wide space, you can use the <br> tag. It might look like this:

1234 Fifth Street<br>
Stockton, CA 95201

Note that there is no ending <br> tag.

There are ways, however, to use the <p> tag without adding space after it. We'll discuss this later in a section called Styles.

Horizontal Rule

If you wish to create a simple straight line across your page you can use the <HR> tag. It looks like this:

<p>This is a paragraph</p>

<hr>

<p>This is another paragraph, underneath a long line.</p>

Want to make your line look better? We'll learn that when we go into Styles.

Note that there is no ending <hr> tag.

Bold

Making text bold is easy. Just surround the text with opening and closing <b> tags:

This word has <b>emphasis</b>!

Italic

Using italics is just like bold: surround it with opening and closing <i> tags:

Remember to put new terms <i>in italics</i>.

Block Quote

If you want a section of text indented, perhaps for a quotation or other purpose, you can use the <blockquote> tag before and after the text:

<p>Shakespeare once wrote:</p>

<blockquote>To be or not to be, that is ... Be all my sins remembered.</blockquote>

<p>Now, what did he mean by this?</p>

The code above creates three elements: the first paragraph element, the blockquote element, and the final paragraph element.

Head and Title Tags

There are two special tags that we can't forget about: <head> and <title>.

Recall that the <body> tag defines the body of our HTML document. Everything inside the <body> tag is what appears in the web browser page.

The <head> tag contains special header information about the document such as its title, formatting notes, search engine information, who the author is, and more.

Remember our example from before? Let's enhance that a bit with the <head> and <title> tag:

<html>
<head>
    <title>This is a great page!</title>
</head>
<body>
    <h1> Hello World! </h1>
    <p> This is my <b>first webpage</b>! Isn't it great? </p>
</body>
</html>

The <title> tag tells the browser what text to display in the window's title bar. It's not actually displayed in the page itself. Make the change on your computer, and look carefully to see the difference.

If you add a page to your Favorites, the <title> tag also specifies what text appears as the favorite's name.

The <title> tag must go inside the <head> tag, and remember <title> and <head> both need matching end tags.

Creating Lists

HTML provides an easy way to create a list of items. The list can either be numbered or bulleted.

Try the following example in your HTML:

<h1>Shopping List</h1>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
<li>Mountain Dew</li>
</ul>
<h1>Today's Trips</h1>
<ol>
<li>Bank</li>
<li>Grocery Store</li>
<li>Video Rental Store</li>
<li>Gas Station</li>
</ol>

Our example contains two lists, each prefaced with a level one heading. The first list, our shopping list, is bulleted. The second list, the places we need to go, is numbered.

We used three tags to make this happen:

OL (Ordered List) marks a numbered list
UL (Unordered List) marks a bulleted list
LI (List Item) marks an item within that list

Notice that each of the three tags have an ending tag. It is very important that you do not forget the ending OL or UL tags, or you will have major formatting issues.

Special Symbols

♥ ♠ ♣ ♦ Entities for Symbols and Greek Letters

A Note About Privacy and Google

Google is programmed to "crawl" the internet on a regular basis and find new web pages, adding them to its massive search database. Often, Google will "cache" a page as well, making it accessible even if the original page has been removed.

For a variety of reasons, many students do not want their website to be found on Google through searching or caching. You can add the following HTML tags in the <head> section of your pages to signify that you do not want to be index or cached:

<meta name="googlebot" content="noarchive">

<meta name="googlebot" content="noindex">

Please keep in mind that not every search engine follows these guidelines. For more information, please visit Google's Help on Removing Your Page from its Index.

Next... Links

Additional Reading

For more in-dept reading on this content, try the following:

HTML and XHTML: Tutorial 1