Skip to content

Instantly share code, notes, and snippets.

@sourcec0de
Created December 7, 2015 15:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sourcec0de/010d4842e87482e061d6 to your computer and use it in GitHub Desktop.
Save sourcec0de/010d4842e87482e061d6 to your computer and use it in GitHub Desktop.
All core html elements. This is a shortened version of https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Content sectioning

Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.

Element Description
<address> supplies contact information
<article> represents a self-contained composition in a document
<footer> 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.
<header> represents a group of introductory or navigational aids
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Heading elements implement six levels of document headings
<hgroup> represents the heading of a section
<nav> represents a section of a page that links to other pages
<section> represents a generic section of a document

Text content

Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.

Element Description
<dd> the description of a term in a description list (
) element
<div> is the generic container for flow content, which does not inherently represent anything.
<dl> encloses a list of pairs of terms and descriptions
<dt> identifies a term in a definition list
<figcaption> represents a caption or a legend associated with a figure or an illustration
<figure> represents self-contained content, frequently with a caption
<hr> represents a thematic break between paragraph-level elements
<li> is used to represent an item in a list
<main> represents the main content of the of a document or application
<ol> represents an ordered list of items
<p> represents a paragraph of text
<pre> represents preformatted text
<ul> represents an unordered list of items

Inline text semantics

Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

Element Description
<abbr> represents an abbreviation and optionally provides a full description for it
<b> represents a span of text stylistically different from normal text, without conveying any special importance or relevance
<bdi> isolates a span of text that might be formatted in a different direction from other text outside it
<bdo> is used to override the current directionality of text
<br> produces a line break in text (carriage-return)
<cite> represents a reference to a creative work. It must include the title of a work or a URL reference, which may be in an abbreviated form according to the conventions used for the addition of citation metadata.
<code> represents a fragment of computer code
<data> links a given content with a machine-readable translation. If the content is time- or date-related, the must be used
<dfn> represents the defining instance of a term
<em> marks text that has stress emphasis
<i> represents a range of text that is set off from the normal text for some reason
<kbd> represents user input and produces an inline element displayed in the browser's default monospace font
<mark> represents highlighted text
<q> indicates that the enclosed text is a short inline quotation
<rp> is used to provide fall-back parenthesis for browsers non-supporting ruby annotations
<rt> embraces pronunciation of characters presented in a ruby annotations
<rtc> embraces semantic annotations of characters presented in a ruby of elements used inside of element
<ruby> represents a ruby annotation
<s> renders text with a strikethrough
<samp> is an element intended to identify sample output from a computer program
<small> makes the text font size one size smaller
<span> is a generic inline container for phrasing content, which does not inherently represent anything
<strong> gives text strong importance, and is typically displayed in bold
<sub> defines a span of text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text
<sup> defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text
<time> represents either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information)
<u> renders text with an underline, a line under the baseline of its content
<var> represents a variable in a mathematical expression or a programming context
<wbr> represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location

Image and multimedia

HTML supports various multimedia ressources such as images, audio, and video.

Element Description
<area> defines a hot-spot region on an image, and optionally associates it with a hypertext link
<audio> is used to embed sound content in documents
<map> is used with elements to define an image map (a clickable link area)
<track> is used as a child of the media elements— and
<video> embeds video content in a document

Embedded content

In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.

Element Description
<embed> represents an integration point for an external application or interactive content (in other words, a plug-in)
<object> represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin
<param> defines parameters for
<source> is used to specify multiple media resources for , and

Scripting

In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.

Element Description
<canvas> used to draw graphics via scripting (usually JavaScript)
<noscript> defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser
<script> is used to embed or reference an executable script within an HTML or XHTML document

Demarcating edits

These elements let you provide indications that specific parts of the text have been altered.

Element Description
<del> represents a range of text that has been deleted from a document
<ins> represents a range of text that has been added to a document

Table content

The elements here are used to create and handle tabular data.

Element Description
<caption> represents the title of a table
<col> defines a column within a table and is used for defining common semantics on all common cells
<colgroup> defines a group of columns within a table
<table> represents data in two dimensions or more
<tbody> defines one or more <tr> element data-rows to be the body of its parent <table> element
<td> defines a cell of a table that contains data. It participates in the table model
<tfoot> defines a set of rows summarizing the columns of the table
<th> defines a cell that is a header for a group of cells of a table
<thead> defines a set of rows defining the head of the columns of the table
<tr> defines a row of cells in a table

Forms

HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of added information about this available in the HTML forms guide.

Element Description
<button> represents a clickable button
<datalist> contains a set of <option> elements that represent the values available for other controls
<fieldset> is used to group several controls as well as labels (<label>) within a web form
<form> represents a document section that contains interactive controls to submit information to a web server
<input> is used to create interactive controls for web-based forms in order to accept data from the user
<keygen> exists to facilitate generation of key material, and submission of the public key as part of an HTML form
<label> represents a caption for an item in a user interface
<legend> represents a caption for the content of its parent <fieldset>
<meter> represents either a scalar value within a known range or a fractional value
<optgroup> creates a grouping of options within a <select> element
<option> is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> HTML5 element
<output> represents the result of a calculation or user action
<progress> is used to view the completion progress of a task
<select> represents a control that presents a menu of options
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment