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.

Content always comes first. The structure of the HTML is most important. While not very pretty without the CSS, HTML pages should have a clear outline and be comprehendible without any visual styling. Well structured HTML leads to better accessibility, search-ability, and easier styling. Always do your best to use tags that make sense for the content.

When styling web pages, you should try to use existing tags as "hooks" for your CSS rather than adding new ones just for styling. (If we haven't gotten to CSS yet, this will make a lot more sense when we do!) Leveraging existing tags keeps the markup cleaner, simpler, and detached from the styling which tends to change more frequently.

That said, there are definitely situations where CSS requires the HTML to be structured in a particular way for the 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 inherent semantic meaning and are meant to be used just for CSS.

As with everything on the web, HTML is a living standard which means that old tags are occasionally removed and new ones added. HTML5 includes a handful of semantic tags that allow us to 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 semantic tags that were introduced with HTML5, we're only going to be concerned with a small handful. Below is a glossary of common HTML tags—both old and new—that we should be familiar with.

Block Level Content

Tag	Usage
`<p>`	A paragraph. Very common. Used for most kinds of narrative text, though not all text needs to be wrapped in this tag.
`<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.
`<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 container such as who wrote the content, 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 tag.
`<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. This tag 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.