What Are HTML Tags?

HTML - Index How The Web Works What are HTML Tags Basic HTML Tags CW1 - First HTML Page CW2 - Tutor Web Page CW# - Plant World Site Project 1 Project 2 Project 3

Dreamweaver - Index Dreamweaver - Intro Dreamweaver Basics Assignmnt 1 Images Links Tables Interactivity Site Publishing

FrontPage - Index FrontPage Basics Using a Template

Web Design with MS Publisher Using a Template Creating Forms Advanced Skills

Fireworks - Index Fireworks Basics Layers Effects

Flash - Index Flash Basics Tweening Components Events Adding Video Publishing

Alyve Web Site

What Are HTML Tags?

What is HTML?

HTML is a simple, universal mark-up language that allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used.

All you really need to create Web pages is a simple text editor and a basic understanding of HTML. To put your files on the Web, you will need an ftp client like WS_FTP LE for Windows, or Fetch for Mac. These are free downloads for students and will let you connect to a server, where you will store your files. Software like Dreamweaver or GoLive have FTP capabilities built in. (See How to FTP).

HTML is just a series of tags that are integrated into a text document. They're a lot like stage directions - silently telling the browser what to do, and what props to use.

What are HTML tags?

HTML tags tell a browser how to display information. Users of word processors were once required to type control-b to start bolding text and then control-b to stop bolding. Likewise, HTML tags usually (but not always) consist of a pair of tags that "turn on" and then "turn off" directions to affect text display.

HTML tags are usually English words (such as blockquote) or abbreviations (such as "p" for paragraph), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is , and the blockquote tag is <blockquote>. Some tags dictate how the page will be formatted (for instance, begins a new paragraph), and others dictate how the words appear ( makes text bold).

When you open a tag- say <blockquote> - you must also close it off with another tag - in this case, </blockquote>. Note the slash - / - before the word "blockquote"; that's what distinguishes a closing tag from an opening tag.

Example use of bold tag	How it will display
<b>I'm bold</b>	I'm bold
This will <b>bold</b> one word.	This will bold one word.

Note: Click here to see a list of Basic HTML tags

HTML Grammar

<HTML>	</HTML>
<HEAD>	</HEAD>
<TITLE>	</TITLE>
<BODY>	</BODY>

Every HTML page begins with the tag <HTML> which tells the browser to expect an HTML document, and ends with </HTML> to signify the end.

In between the HTML tags, there are two sections - the head and the body. The head tag contains the title of the page and the body contains the content of the page that will appear inside the browser. Every thing that appears on the page is contained within the body tags.

To save a file as an HTML file:

Go to File--> Save As and change the Save as type field from Text Documents to All Files. Then include the .htm extension at the end of your filename.

See How to Create an HTML page for step by step instructions and troubleshooting

If you save this file as an HTML page then you will be able to view it in a browser.

Remeber that a browser is only HTML reading software. You can view your HTML pages locally, on your computer to see how they display in browser. Again, just because your page is in a browser doesn't mean it's on the Web.

The screenshot below shows how this simple HTML page will display in a browser. Notice where the title is displayed.

Only what is inside the body tags will appear in the browser window.

Tags are basic building blocks. They can be used to format a text document in HTML, like your resume. But they are also used to build more complex designs.

Note: Click here to see a list of Basic HTML tags

Tag Attributes

Part of understanding HTML grammar is understanding attributes, which is a way to provide more information about a given tag, or the way it should display. For example, you could use the paragraph tag to drop text down a line. But by adding an attribute to the tag, you can assign more information: Skip a line and center.

<p>	<body>
<p align="center">	<body bgcolor="#009900" text="#000000">

Some tags, like the body tag can include many attributes. There is always one body tag, but within that tag you can specify the background color, the text color, the link color, the viewed link color and the active link color.

Here are some more examples of attributes:

<body bgcolor="#FFFFFF" text="#000000" link="#FF6600" vlink="#CC6600" alink="#FF6600">

<table width="200" bgcolor="#009900" border="0" cellspacing="2" cellpadding="2">

Making your first HTML page

Basic HTML tags