• Home
• About
• FAQ
• Contact
• Link
• Sitemap

1. HTML intro
2. Web pages and you

1. HTML getting started
2. HTML basics
3. HTML document

1. HTML text formatting 1
2. HTML text formatting 2
3. HTML text formatting 3
4. HTML fonts
5. HTML entities

1. HTML links
2. HTML email links

1. HTML images
2. HTML image maps

1. HTML forms
2. HTML form labels
3. HTML fieldset/legend

1. HTML tables
2. HTML tables concepts

1. HTML frames

1. HTML backgrounds
2. HTML colors
3. HTML color shades
4. HTML color usage

1. HTML stylesheets
2. HTML div/span

1. HTML audio
2. HTML video
3. HTML objects
4. HTML download media

1. HTML head section
2. HTML meta tags
3. HTML scripts
4. HTML declarations
5. HTML document types

1. HTML tag rules
2. HTML things to avoid
3. URL formatting
4. URL encoding/decoding
5. HTML use/access
6. HTML publish work

1. HTML marquees

1. HTML history
2. HTML summary

HTML basics

An HTML document, no matter how simple or complex, will contain certain fundamental things. These things are what make HTML work the way it does and they are present in the HTML code of EVERY page on the web!

This tutorial focuses on:

• Tags
• Attributes
• Elements
• Comments

Tags

Using tags, the browser knows which content to display and when.

• Tags are sorrounded by < and > symbols (called angle brackets)
• Most tags in HTML have an end tag, some do not

There are tags for many different things including text, links, images, tables, form elements, and much more. When your situation requires it, use the tag(s) you need. For example, to display italic text you would use the <i> tag.

In the above example, once we no longer need to display italic text, we used the complementary end tag for the <i> tag which is </i>. The end tag is the same as the opening tag but with a / character after the first angle bracket.

Some tags (very few) do not have a closing tag. With such tags, you would use the / symbol at the end of the tag (right before the > symbol) instead of using a closing tag.

NOTE: ALL Tags should be kept lowercase! This is the modern HTML standard.

Remember that HTML has lots of tags for many different things! You will be learning all about the various HTML tags throughout our HTML tutorials. It's going to get exciting :)

Attributes

Tags are used to display content but what about the specifics of that content like if a link should open in a new window or the location of an image? Attributes are used to specify things like this regarding the content on your webpages. Attributes are located within tags.

NOTE: Attributes are located in start tags only, not in end tags.

The tag from the above example (<a>) is used for displaying links. The href attribute sets the link to point to http://www.yahoo.com and the target attribute sets where the link will open (in this case, a new window).

Attributes are specified with special keywords relative to the tags they're placed in and take the value that you set. Do not worry right now about specific uses of attributes for different tags like in the above example, various attributes as well as the tags they are used in will be discussed in detail in further tutorials in this section. The important thing for now is that you understand the concept of attributes.

Attribute rules:

1. Always quote attribute values
2. Use lowercase letters for attributes and attribute values

Elements

An element is anything that appears on a webpage. An element could be a table, a link, a textbox, a heading, etc. The paragraph you're reading right now is an element and so is the heading right above it.

An element consists of the grouping of a start tag, the element content, and an end tag.

What about tags that don't have an end tag? How do they fit into the whole element scheme?

Tags that don't have an end tag are the element. For example, the <img> tag which is used to display an image doesn't have an end tag but the image it displays is the element.

Output:

As you can see in the above example, the <img> tag is the element. It just needs the right value to be set for it's src attribute to display the image.

Elements within elements

Elements can also have other elements within them.

In the above example, we have a link element (<a>) nested inside of a paragraph element (<p>)

Comments

Comments don't affect the code and will not be displayed on a page but serve an important purpose - they are declared so that code would be easier to understand and navigate.

Comments are used to explain what is happening in the code and this is very useful in many situations like if you come back to your code after not working on it for a while or if you start working with someone else's code. Comments simplify things and create better organization allowing you to work faster and more efficiently.

Comments can be placed anywhere within the code, can span as many lines as you want, and are declared with a starting <!-- and an ending -->

Notice how in the above example only the textbox appears, not the comment, but the comment makes it clear what the purpose of the textbox is.

NOTE: Using too many comments could slow your pages down!