HTML Formatting Tags - 33 Tags and its Attributes (Reference)

Tech:
Html
Since:
1 year ago
Views:
7

A web page is constructed from a series of HTML tags. Here is the list of HTML tags which can be used for formatting.

<abbr>

Defines an abbreviation or an acronym.

<abbr title="Full form">Short_form</abbr>

<dfn>

Specifies a term that is going to be defined within the content.

<dfn title="Full form"> Short form </dfn>

<del>

Defines text that has been deleted from a document. It shows the text as strike-through.

<del> Some striked text </del>

<s>

Defines text that is no longer correct. It shows the text as strike-through.

<s> Some striked text </s>

<u>

Defines some text that is unarticulated and styled differently from normal text. It is an underlined text.

<u> Underlined text </u>

<ins>

Defines a text that has been inserted into a document. It is an underlined text.

<ins> Underlined text </ins>

<b>

Defines bold text.

<b> Bold text </b>

<strong>

Defines important text. It is usually displayed in a bold font.

<strong> Some bold text </strong>

<i>

Defines a part of text in an alternate voice or mood.

<i> Italic text </i>

<em>

Defines emphasized text. It is usually displayed in a italic font.

<em> Emphasized text </em>

<var>

Defines a variable. It is usually displayed in a italic font.

<var> Some variable name </var>

<address>

Defines contact information for the author/owner of a document/article. Italic font style will be applied.

<address>
  Text <br />
  Some text <br />
  Some long text <br />
  Some number
</address>

<progress>

Represents the progress of a task Progress name.

<progress value="32" max="100"> 32% </progress>

<meter>

Defines a scalar measurement within a known range (a gauge). Small progress like element

<label for="id_name"> Some text </label>
<meter
  id="id_name"
  min="0"
  low="40"
  high="90"
  max="100"
  value="35"
  optimum="0.5"
>
</meter>

<ruby>

Defines a ruby annotation (for East Asian typography). A ruby annotation is a small extra text, attached to the main text to indicate the meaning of the corresponding characters.

<ruby> A <rt> Some meanig </rt> </ruby>

<rt>

Defines an explanation/pronunciation of characters (for East Asiantypography).

<ruby> A <rt> Some meanig </rt> </ruby>

<rp>

Defines what to show in browsers that do not support ruby annotations. Basically to show brackets if ruby does not support.

<ruby>
  A <rt> <rp>(</rp> Some meanig <rp>)</rp> </rt>
 </ruby>

<code>

Defines a piece of computer code.

<code> background-color: green; </code>

<pre>

Defines preformatted text. Shows exactly as written in the HTML code.

<pre>
  // Some content
</pre>

<samp>

Defines sample output from a computer program.

<samp> Some output text </samp>

<template>

Defines a container for content that should be hidden when the page loads.

<template>
  // Some hidden html
</template>

<sub>

Defines subscripted text.

<sub> subscript </sub>

<sup>

Defines superscripted text.

<sup> superscript </sup>

<mark>

Defines marked/highlighted text.

<mark> Highlighted text </mark>

<small>

Defines smaller text.

<small> Some text in small size </small>

<q>

Defines a short quotation. Text will be inside double quotes.

<q> Some text </q>

<time>

Defines a specific time (or datetime).

<time datetime="2020-01-01 00:00"> Some text </time>

<wbr>

Defines a possible line-break. Tells browser to break the word at specific place.

<p>Some_long_text<wbr />is_here<wbr /></p>

<kbd>

Defines keyboard input.

<kbd> Keyboard key </kbd>

<bdo>

Overrides the current text direction.

<bdo dir="rtl"> Text right to left </bdo>
<bdo dir="ltr"> Text Left to left </bdo>

<bdi>

BDI stands for Bi-Directional Isolation. Isolates a part of text that might be formatted in a different direction.

<span> Some text <bdi> Direction changed text </bdi> Some text </span>

<blockquote>

Defines a section that is quoted from another source.

<blockquote cite="source_link">
  Some content from another source
</blockquote>

<cite>

Defines the title of a work.

<cite> Title of the work </cite>