HTML documents are text files made up of HTML elements.
HTML elements are defined using HTML tags.
HTML Tags
- HTML tags are used to mark-up HTML elements
- HTML tags are surrounded by the two characters <>
- The surrounding characters are called angle brackets
- HTML tags normally come in pairs like and
- The first tag in a pair is the start tag, the second tag is the end tag
- The text between the start and end tags is the element content
- HTML tags are not case sensitive, means the same as
Why do We Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: means
the same as . When you surf the Web, you will notice that most
tutorials use uppercase HTML tags in their examples. We always
use lowercase tags. Why?
If you want to prepare yourself for the next generations of HTML,
you should start using lowercase tags. The World Wide Web Consortium
(W3C) recommends lowercase tags in their HTML 4 recommendation,
and XHTML (the next generation HTML) demands lowercase tags.
Tag Attributes
Tags can have attributes. Attributes can provide additional information
about the HTML elements on your page. This tag defines the body element of your HTML page: . With an added
bgcolor attribute, you can tell the browser that the background color
of your page should be red, like this: .
This tag defines an HTML table:
. With an added border attribute, you can tell the browser that
the table
should have no borders:
Attributes always come in name/value pairs like this:
name="value".
Attributes are always added to the start tag of an HTML element.
Quote Styles, "red" or 'red'?
Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single
style quotes are also allowed.
In some rare situations, like when the attribute value
itself contains quotes, it is necessary to use single
quotes:
name='John "ShotGun" Nelson'
The most important tags in HTML are tags that define
headings, paragraphs and line breaks.
The best way to learn HTML is to work with examples.
We have created a very nice HTML editor for you. With
this editor, you can edit the HTML source code if you like,
and click on a test button to view the result.
Try it Yourself - Examples
A very simple HTML document
This example is a very simple HTML document, with only
a minimum of HTML tags. It demonstrates how the text
inside a body element is displayed in the browser.
Simple paragraphs
This example demonstrates how the text inside paragraph
elements is displayed in the browser.
(You can find more examples at the bottom of this page)
Basic Notes - Useful Tips
When you write HTML text, you can never be sure how
the text is displayed in another browser. Some people
have large computer displays, some have small. The text
will be reformatted every time the user resizes his window.
Never try to format the text in your editor by adding empty
lines and spaces to the text.
HTML will truncate the spaces in your text. Any number of
spaces count as one. Some extra information: In HTML a
new line counts as one space.
Using empty paragraphs
to insert blank lines is a bad habit. Use the
tag instead. (But don't use the
tag to create lists. Wait until you have learned about HTML
lists.)
You might have noticed that paragraphs can be written
without the closing tag
. Don't rely on it. The next version of HTML will not allow
you to skip ANY closing tags. HTML automatically adds an extra blank line before and
after some elements, like before and after a paragraph,
and before and after a heading.
We use a horizontal rule (the
tag), to separate the sections in our tutorials.More Examples
More paragraphs
This example demonstrates some of the default behaviors
of paragraph elements.
Line breaks
This example demonstrates the use of line breaks in an
HTML document.
Poem problems
This example demonstrates some problems with HTML
formatting.
Headings
This example demonstrates the tags that display headings
in an HTML document.
Center aligned heading
This example demonstrates a center aligned heading.
Horizontal rule
This example demonstrates how to insert a horizontal rule.
Hidden comments
This example demonstrates how to insert a hidden comment
in the HTML source code.
Background color
This example demonstrates adding a background-color to an
HTML page.
Dreamweaver Offers Macromedia Dreamweaver and Fireworks video tutorials on web developement.
affordable web designaffordable web design Company, offers complete range of website design and development solutions - from online brochure-ware to customized shopping carts and ecommerce website applications.
