HTML Tags

The Language We Use to Communicate with a Browser

HTML Tags are instructions we provide to a web browser. These Tags define certain sections of a web page.

In other words, Designers (like yourself) use HTML Tags to create web pages. A Web Page is made up of HTML Tags, the building blocks of the page.

The Layout is made up of a bunch of div tags. Each div tag creates a box on the page. We use several div tags to create just one layout......unless you use HTML5.... in that case, you will use very few div tags. But the point remains the same..... the structures on a web page are created from HTML Tags.

We use CSS to position, format, and design the HTML Tags. Because of CSS, we have far fewer HTML Tags to learn!! wahoo!

HTML Tags occur in pairs: A start tag and an end tag. <div> and </div>

Only a few exceptions exist: <hr> is an empty tag because it does not have an end tag. The same is true for <br> and <img>.

NOTE: HTML Tags are also referred to as HTML Elements.

Below you will find the most common HTML Tags. (realize, this is not a complete list of all tags that exist. these are just the important ones!!)

body

<body></body> the background of the entire page.

Note: the <body> element is a part of the HTML Page that we set up in Step 3 of the Getting Started Checklist. Therefore, we do not have to add the <body> element to the web page. We simply need to just style the body.

div

<div></div>

The div tag is used to create Layouts. Literally means division. The div is used to divide a web page into sections, and thus create a Layout. You will use the div tag more than any other html tag.

Video: What is a div tag?

p

<p></p>

Text is placed in this tag to create a paragraph. The default appearance of paragraph text is nothing spectacular. Our main reason for using the paragraph tag is to make it easier to style our text as paragraphs using CSS.

Typically when styling paragraphs, we will control the width, line-height, font-size, font-family, color, and other properties of the paragraph. We only need to create one style for all paragraphs as long as you wrap your text with paragraph tags.

Heading Tags H1 thru H6

Heading Tags h1 thru h6: h1 is most important; necessary for Usability. Use Heading tags to draw the readers attention to some particular content, and to break up content into smaller bite size pieces.

See Style Heading Tags.

ol

Ordered List. A numbered List.
1.
2.

ul

Unordered List. A bulleted list.

list item
list item

Also used to make Navigation Menus.

li

List Item. List items are created in Unordered Lists and Order Lists

List items and Unordered lists are often used for navigation menus.

a

Anchor. An anchor is the text used to create a hyperlink.

img

Image. Defines an image in the HTML. (Is an empty tag because it does not have an end tag.)

Note: we can also insert images via CSS.

iframe

An iframe is an 'inline frame'. This can be used to embed a web page inside another web page.

NOTE: content in the iframe is generally not accessible to search engines nor alternative web browsers (such as a screen reader).

Typically best to use with content that you don't mind being inaccessible to search engines such as a google map. But use sparingly.

You will learn many more HTML tags beyond this list, however, this list represents the group of HTML Tags you will need to learn first.

Coming Soon.... a brand new class for Dreamweaver Beginners.

MORE INFO for those interested in learning DREAMWEAVER