There are many elements available in the HTML specification and it is a good idea to become familiar with as many of them as you can. However, there are a core set of elements that we will see used more often. We have gathered the list of these elements here with a description of where and how to use them.
To see more detail on any of these elements, visit the MDN Element Reference Guide
You can also click on any specific element to see a demonstration of the element as well as documentation on it's usage.
These elements convey a semantic meaning. These semantic elements allow us to convey meaning to search engines, screen readers, and to our fellow developers. When possible use the best semantic element to represent the idea of the enclosed content.
Represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
Represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document.
Represents the dominant content of the
<body>of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.
Represents a portion of a document whose content is only indirectly related to the document's main content.
Represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
Represents self-contained content, frequently with a caption (
<figcaption>), and is typically referenced as a single unit.
Represents a caption or legend for the rest of the contents its parent
<figure>element, if any.
Indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the
h1, through h6
Represent six levels of section headings.
<h1>is the highest section level and
<h6>is the lowest.
Represents a paragraph.
Represents an unordered list of items, typically rendered as a bulleted list.
Represents an ordered list of items, typically rendered as a numbered list.
Embeds an image into the document
Referred to as the anchor element, creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
Marks text that has stress emphasis. The
<em>element can be nested, with each level of nesting indicating a greater degree of emphasis.
Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks.
Represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. See
These elements don't convey any specific semantic meaning and can be used for
multiple meanings. When there is not a more meaningful semantic element to
choose, use these. For instance, a
<div> can be used if an element such as
<footer>, or other element would be
Is the generic container for flow content. It has no effect on the content or layout until styled using CSS.
Is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes)