About Tags

Most tags come in pairs: an opening tag, and a closing tag. The pair forms a container: any text (including tags) between the opening tag and closing tag is inside the container. An example is the div tag.

Some tags stand alone. Such tags are also known as empty elements. Example: img tag.

Tags and Elements

“Element” is another word for “tag”, in some situations. Usage varies, ambiguity is common.

Essential Tags

A quick introduction to the most important tags:

html, head, body tags

These are all required for valid html.

title tag

title is always a good idea. Use it.

div tag

Generic block tag, the all-purpose container. Div provides a framework for both layout and content.

span tag

Generic inline tag. Example, use span when you have block of text, and you want to highlight several words from the larger block, without interrupting the flow of the text. Use a span tag around the content you want to highlight, and create a CSS rule (or rules) to make the tag highlight its contents.

h1, h2, h3, h4,h5, h6 tags

Header tags. Use them for semantics (meaning of content), not presentation (size of text). The h1 tag should contain the most important topic on the page, and the content below the h1 (if any) should be highest level of information on a page. There should only be one h1 tag on a page. The h2 tag(s) contain the second-order information, and are associated with content at that level. The h3 tag represents another level of information.
Example, a newspaper article: h1 is the title of the book, h2 appears at the top of each chapter, h3 indicates scene breaks, etc.

Headers tags have great significance for web accessibility, and for search engine optimization.

p tag

Paragraph tags are similar to header tags: a paragraph represents a unit of information.

Keep in mind that p tags, like the header tags, are not allowed to contain other tags.

img tag

The ever-popular image tag.