intro | tags | path | tables | attributes

QUICK TUTORIAL - HTML BASIC TAGS

Some commonly used tags are listed below. One could conceivably write useful web pages using only the tags shown on the previous page plus these tags.

Where tags are in pairs below, be sure to use both. Only two of the tags, <img /> and <br />, are self-closing (the slash which closes it comes at the end of a self-closing tag).

right-click, then choose Save Picture As Starting with the basic page you made, try adding each one of these tags in an appropriate place. If you need an image, right-click on this one and save it in the same directory with your page.

Or go to Google's image search and find something better.

One more note: the browser treats all white spaces in your HTML document as a single space, whether or not the space is created via Spacebar, Tab or Enter key. So you can make your code as tidy or as messy as you like and the browser won't usually care, though a future employer might.

Tags:

How They're Used:

<p> Tag

<p></p>

The <p></p> tag pair is a container for the information in a single paragraph.

In the early days of web development, people often put a single <p> tag as a line break - this is NOT recommended, since there may be styles applied to the <p> container. If there is no closing </p> tag, the style would then be applied to everything on the page that came after the first <p> tag.

<p>You should use the <p>...</p> tags in pairs to enclose paragraphs, like this paragraph, with one at the beginning and one at the end. The paragraphs will be separated by one single line break when you view them as a web page, even if there's no carriage return in your code, or even if there are five carriage returns in your code.</p>

If you really need that line break to show up in the web page, and you can't put the information inside a <p>...</p> pair, use 2 <br / ><br /> (break) tags instead.

h1 tag

This is a main header tag. <h1>Main Header</h1>

By default, it looks like this:

Main Header

h2 tag

This is a sub-header tag. <h2>Sub Header</h2>

By default, it looks like this:

Sub Header

h3 tag

This is a sub-sub-header tag. <h3>Sub-sub Header</h3>

By default, it looks like this:

Sub-sub Header

Bold

Looks like this:
This text will be bold.

It is now recommended that you use <strong></strong> instead of <b></b> in order to increase the universality of your web sites. For example, how do you "bold" text on a web page that is being read aloud by a text-to-voice translator?

Italic

<i>This text will be Italicized.</i>

Looks like this:
This text will be Italicized.

It is now recommended that you use the <em></em> pair instead of <i></i>, for the same reasons as mentioned above.

I have used the <b></b> and the <i></i> pairs merely for ease of learning and remembering, but if you find yourself making web pages in the future, please use the <strong></strong> and <em></em> pairs instead.

Break tag

<br />

Text after a break tag <br /> will display on the next line down.

Looks like this:
Text after a break tag
will display on the next line down.

Text with two break tags<br /><br /> will display two lines down, but will still be in the same paragraph.

Looks like this:
Text with two break tags

will display two lines down, but will still be in the same paragraph.

The break tag is one of only a few tags that do not have a corresponding closing tag. In order to write "fully-compliant XML", which requires that all tags be closed, write your break tags this way: <br />. Note that there is a space between the "br" and the "/". This is to keep the new <br /> tag from confusing older browsers.

Div tag

The <div>...</div> tag set is used to mark a section of the page. Think of it as a container which holds your content. You can then format the content in the container and place the container anywhere you want on the page.

For many years, the <div> tag was used to center text:

<div align="center">This text will be centered.</div>

Looks like this:

This text will be centered.

Image tag

skateboarding dog

If your image is in the same directory with your page, your image tag might look like this:

You could read this tag this way: <"Place here the image whose source is in the same directory as this page, called skateboardingdog.jpg.">

To refer to an image which you have uploaded into an images directory which is at a "peer" level with the directory where your html page is, type

You could read this tag this way: <"Place here the image whose source is up a directory level from this page (..) then down a level (/) to the directory named 'images', called mypicture.jpg.">

The image tag is another of the very few tags which do not have a corresponding closing tag. To write "fully-compliant XML" , which requires that all tags be closed, write your image tags this way: <img src="mypic.jpg" />. Again, note the space before the "/".

Anchor tag -
link tag

A linking tag (also known as an anchor tag or "an 'a href' tag") lets you link to other pages in your site, to other sites, or to images. It also lets you link to specific spots on web pages if those spots have been given names (see next section "Anchor tag - named anchor".

The "href" is the hypertext reference, or the page or spot on the page to which you are linking. You must put in the complete web address or URL. (Universal Resource Locator - can you tell that the web was run by Unix programmers in the early days?)

Add target="_blank" to have the page open in a separate browser window.

For example:

Check out the virtual model at <a href="http://www.landsend.com" target="_blank">Land's End</a>.

Looks like this:
Check out the virtual model at Land's End .

Anchor tag - named anchor

The <a name=""> tag differs in function from the <a href=""> tag in a fundamental way. The <a href=""> tag links to something, whereas the <a name=""> tag is linked to. It "drops an anchor" on a spot on a page.

For example:

There is an <a name="top"></a> tag at the top of this page. You can't see it, but it's in the code. View the Source of the page to see it.

In the body of the page, I might put this: <a href="#top">Return to the top of the page</a>. Note the hash mark (#) also called "number sign" or "pound" or "tictactoe". It signals that you are about to supply the name of a named anchor on a page. The hash mark (#) has to be in the <a href="">when you are linking to a spot on a page. It's not there in the <a name="">.

It would look like this:

Return to the top of the page. (Try it! Use your Back Button to return here.)

You can also link to a spot on another page. Let's say you have named a spot "healthinsurance" on a page called "benefits.htm." You would "name the anchor" by <a name="healthinsurance"></a> and you would link to it by using <a href="benefits.htm#healthinsurance">. Again, note the hash mark (#) .

Lists

"Unordered" List:
<ul>
<li></li>
<li></li>
</ul>

Here is an "Unordered" list (it has bullets):
<ul>
<li>One thing</li>
<li>And another</li>
</ul>

Looks like this:

Here is an "Unordered" list (it has bullets):

One thing
And another

"Ordered" List:
<ol>
<li></li>
<li></li>
</ol>

Here is an "Ordered" list (it has numbers):
<ol>
<li>One thing</li>
<li>And another</li>
</ol>

Looks like this:

Here is an "Ordered" list (it has numbers):

One thing
And another

Blockquote tag

The <blockquote> tag indents text from both sides.

<blockqote>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.</blockquote>

Looks like this:

Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.

Span tag

This tag is generally used with the "style" attribute, and is merely a container for the particular style. Click here for a discussion of styles.

<span style="font-family: Times;font-size: medium">This text will be Times.</span>

Looks like this:
This text will be Times.

Comment tag

This tag does not actually appear on the page, but it is an extremely useful tag, nonetheless. The comment tag begins with a bang (!) and two hyphens, and ends with just the two hyphens:

Use it to explain your markup or to mark a reference point in your code:

You can also use it to temporarily "comment out" sections, even large sections, of your page. This will stay in your HTML code but be "skipped" by the browser when it renders the code as a web page: