Skip to content

Instantly share code, notes, and snippets.

@shawncamthom

shawncamthom/html.md

Last active March 14, 2023 16:50
Show Gist options
  • Save shawncamthom/7ba27d6d2f06e8171dac9305fc9c512a to your computer and use it in GitHub Desktop.
Save shawncamthom/7ba27d6d2f06e8171dac9305fc9c512a to your computer and use it in GitHub Desktop.
Download ZIP
Cheatsheets
Raw
html.md

This work is not my own nor has the information been modified from its original source(Link here). Markdown has been added to the content to make titles,subtitles, & text stand out from each other.

List of HTML Elements By Category

An HTML element (or tag) is an individual component of an HTML document. Here below is a full list of HTML elements listed by category.


* Basic HTML Elements * Formatting HTML Elements * Forms and Input HTML Elements  * Images and Multimedia HTML Elements * Link HTML Elements * Lists HTML Elements * Metadata HTML Elements * Programming HTML Elements * Styling HTML Elements * Text Level Semantic HTML Elements * Table HTML Elements

Basic HTML Elements

BODY Tag <body>

Main content of the document.

The HTML <body> element represents the content of an HTML document. There can be only one <body> element in a document.

Attributes (modifiers)

onafterprint | onbeforeprint | onbeforeunload | onblur | onerror | onfocus | onhashchange | onlanguagechange | onload | onmessage | onoffline | ononline | onpopstate | onredo | onresize | onstorage | onundo | onunload

Code example

<head>
  <title>Here goes the title of the document</title>
</head>
<body>
  Here goes the content of the document......
</body>
</html>

BR Tag <br>

Line break. The HTML element line break <br> produces a line break in text (carriage return). It is useful for writing a poem or an address, where the division of lines is significant. Do not use <br> to increase the gap between lines of text; use the CSS margin property or the <p> element. Attributes (modifiers)

Code example

<p>Digital.com<br>xx <br>xx</p>

HR Tag <hr>

Paragraph-level thematic break. The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic rather than presentational terms. Code example

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>

HTML Tag <html>

Specifies an HTML document.

The HTML <html> element (or HTML root element) represents the root of an HTML document. All other elements must be descendants of this one. Since the <html> element is the first in a document other than comments, it is called the root element. Although this Tag can be implied, or not required, with HTML, it is required to be opened and closed in XHTML.
HTML Tage Code example
<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>

P Tag <p>

Paragraph content. The HTML <p> element (or HTML paragraph element) represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by vertical blank space and/or first-line indentation. The paragraphs are block-level elements.

Code example

<p>This is the first paragraph of text.</p><p>This is the second paragraph of text.</p>

TITLE Tag <title>

Document title or name. The HTML <title> element defines the title of the document, shown in a browser’s title bar or on the page’s tab. It can only contain text, and any contained Tags are ignored.

Code example

<title>This is the page title</title>

Back to categories Formatting HTML Elements

ABBR Tag <abbr>

Abbreviation or acronym. The <abbr> element (or HTML abbreviation element) represents an abbreviation and optionally provides a full description for it. If present, the title attribute must contain this full description and nothing else.

Code example

<p>This is  <abbr title="Hypertext Markup Language">HTML</abbr></p>

ADDRESS Tag <address>

The HTML <address> element supplies contact information for its nearest <article> or <body> ancestor; in the latter case, it applies to the whole document.

Code example

<address>Digital.com<br>xx<br> xx<br> xx </address>

B Tag <b>

Stylistically separated text of equal importance, such as a product name. The HTML <b> element represents a span of text stylistically different from normal text, without conveying any special importance or relevance. It is typically used for keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced. Another example of its use is to mark the lead sentence of each paragraph of an article.

Code example

<p>This article describes several <b>text-level</b> elements. It explains their usage in an <b>HTML</b> document. </p>

BDI Tag <bdi>

Defines directional formatting for content. The HTML <bdi> element (or Bi-directional isolation element) isolates a span of text that might be formatted in a different direction from other text outside it.

Attributes (modifiers)

dir +

Code example

<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>

BDO Tag <bdo>

Defines directional formatting for content. The HTML <bdo> element (or HTML bidirectional override element) is used to override the current directionality of text. It causes the directionality of the characters to be ignored in favor of the specified directionality.

Attributes (modifiers)

dir +

Code example

<p><bdo dir="rtl">This text will go right to left.</bdo></p>

BLOCKQUOTE Tag <blockquote>

Quote from another source. The HTML <blockquote> element (or HTML Block quotation element) 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 <cite> element.

Attributes (modifiers)

cite +

Code example

<blockquote cite="https://digital.com"><p>This is a quote taken from Digital.com.</p></blockquote>

CITE Tag <cite>

Title of a referenced piece of work. The HTML citation element (<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 example

<blockquote cite="https://digital.com"><p>This is a quote taken from Digital.com</p></blockquote>

CODE Tag <code>

Fragment of computer code. The HTML code element (<code>) represents a fragment of computer code. By default, it is displayed in the browser’s default monospace font.

Code example

<p>Regular text. <code>This is code.</code> Regular text.</p>

DEL Tag <del>

Text that has been removed during document editing. The HTML deleted text element (<del>) represents a range of text that has been deleted from a document. This element is often (but need not be) rendered with strike-through text.

Attributes (modifiers)

cite | datetime +

Code example

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p><del ><p >This paragraph has been deleted.</p ></del >

DFN Tag <dfn>

Defining instance of a term. The HTML definition element (<dfn>) represents the defining instance of a term.

Code example

<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>

EM Tag <em>

Text that should be emphasized. The HTML element emphasis <em> marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

Code example

<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p>

I Tag <i>

Text in an alternate voice or mood, such as a technical term. The HTML <i> element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

Code example

<p>The Latin phrase <i>Veni, vidi, vici</i> is often mentioned in music, art, and literature.</p>

INS Tag <ins>

Text that has been inserted during document editing. The HTML <ins> element (or HTML Inserted Text) HTML represents a range of text that has been added to a document.

Attributes (modifiers)

cite | datetime +

Code example

<ins>This text has been inserted</ins>

KBD Tag <kbd>

Example input (usually keyboard) for a program. The HTML keyboard input element (<kbd>) represents user input and produces an in-line element displayed in the browser’s default monospace font.

Code example

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

MARK Tag Text highlighted for referencing elsewhere. The HTML mark element () represents highlighted text, i.e., a run of text marked for reference purposes, due to its relevance in a particular context. For example, it can be used on a page showing search results to highlight every instance of the searched-for word. Code example

The element is used to highlight text

METER Tag Control for entering a numeric value in a known range. The HTML element represents either a scalar value within a known range or a fractional value. Attributes (modifiers) high | low | max | min | optimum | value | form + Code example

Heat the oven to 350 degrees.

PROGRESS Tag Control for displaying progress of a task. The HTML element is used to view the completion progress of a task. While the specifics of how it’s displayed is left up to the browser developer, it’s typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar. Attributes (modifiers) max | value + Code example 70 % Q Tag Phrasing content quoted from another source. The HTML quote element () indicates that the enclosed text is a short in-line quotation. This element is intended for short quotations that don’t require paragraph breaks; for long quotations use
element. Attributes (modifiers) cite + Code example

Everytime Kenny is killed, Stan will announce           Oh my God, you/they killed Kenny!    .

RP Tag Contains semantically meaningless markup for browsers that don’t understand ruby annotations. The HTML element is used to provide fallback parentheses for browsers’ non-supporting ruby annotations. Ruby annotations are for showing the pronunciation of East Asian characters, like using Japanese furigana or Taiwanese bopomofo characters. The element is used in the case of lack of element support. Its content has what should be displayed to indicate the presence of a ruby annotation, usually parentheses. Code example   漢 (Kan)   字 (ji) RT Tag Annotation of preceding text. The HTML element embraces the pronunciation of characters presented in ruby annotations, which are used to describe the pronunciation of East Asian characters. This element is always used inside a element. Code example   漢 (Kan)   字 (ji) RUBY Tag Contains text with annotations, such as pronunciation hints. Commonly used in East Asian text. The HTML element represents a ruby annotation for showing the pronunciation of East Asian characters. Code example   漢 (Kan)   字 (ji) S Tag Strike-through text that is outdated or no longer accurate. The HTML strike-through element () renders text with a strike-through, or a line through it. Use the element to represent things that are no longer relevant or accurate. However, is not appropriate when indicating document edits; for that, use the and elements, as appropriate. Code example

Planet earth is flat round

SAMP Tag Sample output of a program. The HTML element is intended to identify sample output from a computer program. It is usually displayed in the browser’s default monotype font (such as Lucida Console). Code example

Regular text. This is sample text. Regular text.

SMALL Tag Small text, such as fine print. The HTML small element () makes the text font one size smaller (for example, from large to medium, or from small to x-small) down to the browser’s minimum font size. In HTML5, this element is repurposed to represent side comments and small print, including copyright and legal text, independent of its styled presentation. Code example

This is the first sentence.  This whole sentence is in small letters.

PRE Tag 
A block of preformatted text. The HTML 
 element (or HTML Preformatted Text) represents preformatted text. Text within this element is typically displayed in a non-proportional (“monospace”) font exactly as it is laid out in the file.
The white space inside this element is displayed as typed.
Code example

body {
  background-color:red;
}


STRONG Tag 
Text that is important. The HTML strong element () gives text strong importance, and is typically displayed in bold.
Code example

When doing x it is imperative to do y before proceeding.

SUB Tag 
Subscript text. The HTML subscript element () defines a span of text that should be displayed, for typographic reasons, lower, and often smaller than the main span of text.
Code example

The chemical formula of water is H2O

SUP Tag 
Superscript text. The HTML superscript element () defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.
Code example

This text is superscripted

TIME Tag 
Time defined in a machine-readable format. The HTML  element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and time zone information).
It is intended to be used presenting dates and times in a machine-readable format. This can be helpful for user agents to offer any event scheduling for the user’s calendar.
Attributes (modifiers)
datetime +
Code example

The concert starts at 20:00.

VAR Tag 
Mathematical or programming variable. The HTML variable element () represents a variable in a mathematical expression or a programming context.
Code example

 A simple equation: x = y + 2 

WBR Tag 
Opportunity for a line break. The HTML element word break opportunity  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.
Code example

http://this.is.a.really.long.example.com/With/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages

Back to categories
Forms and Input HTML Elements 
BUTTON Tag 
A button. The HTML  element represents a clickable button.
Attributes (modifiers)
autofocus | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget (_self | _blank | _parent | _top) | name | type | value +
Code example
I am a button. Click me!
DATALIST Tag 
Define sets of options. The HTML datalist element () contains a set of  elements that represent the values available for other controls.
Code example
Choose a browser from this list:


  
  
  
  
  
  

FIELDSET Tag 
Set of form controls grouped by theme. The HTML  element is used to group several controls as well as labels () within a web form.
Attributes (modifiers)
disabled | form | name +
Code example

  
    Title
     Click me
  

FORM Tag 
Used to create an HTML form for user input. The HTML  element represents a document section that contains interactive controls to submit information to a web server. It is possible to use the :valid and :invalid CSS pseudo-classes to style a  element.
Attributes (modifiers)
action | autocomplete | name | novalidate | accept-charset | enctype | method | target (_self | _blank | _parent | _top) +
Code example

  
    Title
     Click me
  

INPUT Tag 
Generic form input. The HTML element  is used to create interactive controls for web-based forms in order to accept data from the user. How an  works varies considerably depending on the value of its type attribute.
Attributes (modifiers)
accept | alt | auto-complete | autofocus | checked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern | placeholder | readonly | required | size | src | step | type | value | width | webkitdirectory | global | spellcheck | selectionDirection +
Code example

LABEL Tag 
Caption for a form control. The HTML label element () represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the  element or by using the for attribute.
Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
Attributes (modifiers)
for +
Code example
Click me 
LEGEND Tag 
Define a name for a fieldset. The HTML  element (or HTML legend field element) represents a caption for the content of its parent .
Code example

  
    Title
     Click me
  

OPTGROUP Tag 
Group of options. In a Web form, the HTML  element creates a grouping of options within a  element.
Attributes (modifiers)
disabled | label +
Code example

  
    Option 1.1
   
  
    Option 2.1
    Option 2.2
  
  
    Option 3.1
    Option 3.2
    Option 3.3
  

OPTION Tag 
Single option within a select control. In a Web form, the HTML  element is used to create a control representing an item within a , an , or a  HTML5 element.
Attributes (modifiers)
disabled | label | selected | value +
Code example

  Value 1 
  Value 2
  Value 3

OUTPUT Tag 
Contains the results of a calculation. The HTML  element represents the result of a calculation or user action.
Attributes (modifiers)
form | for | name +
Code example

     +
     =
    60

SELECT Tag 
Control for selecting from multiple options. The HTML select () element represents a control that presents a menu of options. These options are represented by  elements, which can be grouped by  elements. Options can be pre-selected for the user.
Attributes (modifiers)
autofocus | size | disabled | form | multiple | name | required +
Code example

  Value 1 
  Value 2
  Value 3

TEXTAREA Tag <textarea>
Multiline free-form text input. The HTML <textarea> element represents a multiline plain-text editing control.
Attributes (modifiers)
autocomplete | autofocus | cols | disabled | dirname | form | name | readonly | required | rows | maxlength | minlength | placeholder | wrap | selectionDirection | selectionEnd | selectionStart | spellcheck +
Code example
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
Back to categories
Images and Multimedia HTML Elements
AREA Tag 
Hyperlink with some text and a corresponding area on an image map, or a dead area on an image map. The HTML  element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a  element.
Attributes (modifiers)
alt | coords | download | href | hreflang | media | rel | referrerpolicy | shape | target | type +
Code example

   
  

AUDIO Tag 
Sound or audio stream. The HTML  element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the  element; the browser will choose the most suitable one.
Attributes (modifiers)
autoplay | buffered | preload | loop | controls | src | muted | played | volume +
Code example

  Your browser does not support the audio element.

CANVAS Tag 
Bitmap which is editable by client-side scripts. The HTML  element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations.
It is a good idea to provide alternate content inside the  block. That content will be rendered both on older browsers that don’t support canvas and in browsers with JavaScript disabled.
Attributes (modifiers)
height | width +
Code example
An alternative text describing what your canvas displays.
IMG Tag 
An image. The HTML  element represents an image in the document.
Attributes (modifiers)
alt | src | height | ismap | usemap | width | crossorigin | longdesc | referrerpolicy | sizes | srcset +
Code example
MDN
MAP Tag 
Image map for adding hyperlinks to parts of an image. The HTML  element is used with  elements to define an image map (a clickable link area).
Attributes (modifiers)
name +
Code example

  
  

TRACK Tag 
Specifies external timing track for media element. The HTML  element is used as a child of the media elements —  and
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment