HTML Tag Reference

Tags for Document Setup

Tag	Usage
`<html>`	The root element. Everything in the HTML document except for the doctype goes in this tag.
`<head>`	Information about the web page is contained here. None of its contents are displayed on the page.
`<title>`	Defined once in the head. The page's title, to be displayed in the browser's window or tab.
`<meta>`	No closing tag. Information (metadata) about the content of the web page. Keywords, a short description, etc. Helps browsers and search engines to understand more about the page.
`<link>`	Specifies a link to a related external resource. Most commonly used for style sheets.
`<body>`	Contains all of the content that will be displayed in the browser.
`<!-- comment -->`	A comment. Used for making notes to yourself or other developers in the code itself. Can be used pretty much anywhere. Ignored by browsers and search engines.

Tags for Describing Content

The HTML on most web pages is constructed with two things in mind - the logical structure of the page's content, and any necessary grouping for CSS.

The logical structure of the HTML is most important. While not very pretty, HTML pages should be clearly outlined and comprehendible without any CSS.

When styling web pages, you should always try to use existing tags as "hooks" for your CSS. This keeps the markup clean and simple and detached from the styling, which changes more frequently. That said, CSS often requires HTML to be structured in a particular way for styling rules to work. If you need to add HTML elements purely to group things for CSS, use <div> for block elements and <span> for inline elements. These tags have no semantic meaning and are meant to be used just for CSS.

As with everything on the web, HTML is a living standard which means old tags are occasionally removed and new ones added. HTML5 includes a handful of newer semantic tags to help us structure pages much more descriptively. There are two main advantages to using descriptive semantic tags.

They make web content easier for applications and search engines to understand, outline, and catalog.
They make code easier to read for humans. Semantic tags prevent "divitis".

Of the roughly 30 new tags in HTML5, we're only going to be concerned with a small handful. The relevant and most important tags are mixed in below.

Block Level Content

Tag	Usage
`<p>`	A paragraph. Not all text needs to be wrapped in this tag, but it is very common. Used for most kinds of narrative text.
`<h1> <h2>` ... `<h6>`	Headings of diminishing importance. For example a page title might use an `<h1>` tag, with its subsections using `<h2>` tags.
`<ol> <ul>`	Defines a list. Ordered lists number themselves automatically, unordered lists have bullets. The only type of element directly inside these tags should be `<li>` (but the list items can contain lots of things).
`<li>`	Defines each list item. Use only within `<ol>` or `<ul>`.
`<hr>`	No closing tag. A horizontal rule. Creates a line spanning the full width of its container. Can be used as a visual separator, although CSS is much more commonly used for this purpose.
`<header>`	Specifies a header for the document or a section of the document. May include not only a heading (`<h1>`, `<h2>`, etc.), but also content like author and post date. There can be multiple header elements on one page.
`<main>`	Specifies the main content of a page - the "meat". Should not be used more than once on a given page. Note that the `<main>` tag was still unsupported in Internet Explorer version 11. When using this tag, use `<main role="main">` for compatibility.
`<article>`	Defines an article - a section of content that's thematically related, and makes sense on its own. In theory, an article could be used for syndicated content. For example, a blog post or news article that can be republished on another web site. There can be multiple articles on a page.
`<section>`	Defines a section in a document. This is a little confusing because it's similar to an article. Sections are similar to divs and articles, but unlike articles they do not have to make sense on their own. The main idea with the section element is that if it makes sense to have a heading, it's probably a section. An article may contain multiple sections, or a section of a site can contain articles.
`<footer>`	Defines a footer for a document or article or section. Typically contains information about its section such as who wrote it, links to related documents, copyright info, etc.
`<aside>`	Defines related but extraneous content. It may be thematically related to the main content, but it wouldn't be missed if it wasn't there. Think advertisements or pull quotes.
`<figure>` `<figcaption>`	Specifies self-contained content like illustrations, diagrams, photos, code snippets, etc. If it could be moved to a glossary or an appendix, it could be a figure. Not every image has to or should be wrapped in a figure.
`<nav>`	Defines a group of navigation links. Should be used for major navigation, not necessarily for every collection of links anywhere on a page.
`<div>`	An arbitrary grouping content for CSS. Has no semantic meaning. The name is misleading because it's used as a grouping mechanism, not as a division between things.

Inline Level Content

Tag	Usage
`<a>`	One of the most important tags, anchors are links connecting pages. Anchors can also link to different parts of the same page.
`<img>`	No closing tag. Defines an image. Inline by default, images are commonly switched to a block level element in CSS.
`<em>`	Represents text that should be emphasized when spoken. Italicized by default.
`<strong>`	More important than `<em>`, this tag is bold by default. Good for keywords to make passages easier to skim.
`<br>`	No closing tag. Forces a line break (carriage return). Different from a paragraph; use sparingly.
`<span>`	Serves the same purpose as a `<div>`, but for inline elements. Used to tag arbitrary text for styling. Has no semantic meaning.

Supporting Old Browsers

A polyfill is a piece of code (usually javascript or CSS) that enables support for newer features in older browsers that don't natively support them.

Most browsers have a policy of ignoring HTML tags or other code that they don't understand. While older browsers don't understand all of these tags, HTML5 was designed so that they would at least respect that the tags exist. However, not all older browsers treat unrecognized tags the same, so they need to be explicitly told how to display them. They need to know that the tags should be treated as block elements, like a <div> and not inline elements like <strong>, <em>, or <img>.

If maximum compatibility is a concern, you can include this rule in the "resets" section or somewhere near the top of your style sheet:


article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

This will enable support for <main> in the last versions of Internet Explorer as well.

A note about the <hgroup> tag: this tag has actually been removed from the HTML5 spec so it's use is not recommended. However, since it's already implemented in most browsers, it's unlikely to go away soon and should be included for compatibility.