HTML Cheat Sheet List of HTML Elements by Category

Spread the love

Hypertext markup language (HTML), has come a long way since Tim Berners-Lee invented it in 1991. The rise of e-commerce websites in the previous years resulted in the continuous innovation of the programming language. HTML5 is the latest version supported by modern web browsers.HTML has elements that form the building blocks of all websites. HTML makes it easy to add images and objects and create call-to-action buttons. You can use HTML to produce structured web pages composed of various semantics such as headings, paragraphs, lists, links, and quotes.

If you’re looking to improve your development skills, HTML is a great place to start. Our HTML cheat sheet has a full list of all HTML elements, including descriptions, and code examples.

Scroll down to browse all HTML Tags alphabetically or by category.

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

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


<html>
<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.

HTML Cheat Sheet List of HTML Elements by Category

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top