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!!)
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: 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.
Ordered List. A numbered List.
Unordered List. A bulleted list.
Also used to make Navigation Menus.
List Item. List items are created in Unordered Lists and Order Lists
List items and Unordered lists are often used for navigation menus.
Anchor. An anchor is the text used to create a hyperlink.
Image. Defines an image in the HTML. (Is an empty tag because it does not have an end tag.)
<img alt="describe the image here" src="link-to-img.jpg">
Note: we can also insert images via CSS.
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.