Semantic HTML

Semantic HTML

Machines aren’t smart enough to understand the meaning of content.

A group of content with introductory content such as heading elements, navigation, or a logo.

A group of navigational elements.

main

The main content of a webpage. Should only be used once per page.

A group of content with footer content such as additional navigation and legal statements.

div

A semantically meaningless element used to group elements together for styling purposes.

aside

Information that is related to, but seperate from the other content on a page.

article

A standalone piece of content that is publishable on its own. For example, a blog article.

section

A section of related content that can logically be grouped together. Used for outline purpose and not styling purposes.

figure and figcaption

Content that is ususally related to the main content, but is positioned independently of the main flow like a chart, diagram, illustration or image. Usually has a caption.

h1 - h2

elements should not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new sectio or subsection.

Text-level semantics

Elements that are descriptive of inline-level, or intra-paragraph, content.

a em strong small cite dfn abbr time span b i

em

Places stress emphasis on content

small

Side comments like disclaimers, caveats, legal restrictions, copyrights, or attribution. Intended for short runs of text.

cite

Represents the title of a work, name of an author or URL reference.

abbr

Represents an abbreviation or acronym.

time

Represents a time or a precise date.

input type

checkbox color date datetime email file image month number password range tel url

fieldset

Used to group together related controls and labels on a form.

legend

A caption explaining the content of a fieldset element.