All You Want To Know About HTML Text Formatters.
Understand the theoretical aspect of text formatters along with the best use case and the syntax with expected output.
Webpages
are primarily designed to convey information in the most effective way possible. Text is one of the dominant and most used mediums for sharing information from the beginning. HTML allows its users to format text without using any CSS. In this blog, I will be discussing formatting text in HTML.
After referring to multiple articles and documentation I have gathered this information so that you could have this as a single reference than browsing multiple documentation to find the best possible ones.
The aim is to convey information in the best way possible to the users and the first thing that comes into mind is undoubtedly text.
-Mithun S
The structure of each HTML tag explanation will be as follows
TAG NAME :
- Definition.
- Best use case.
- Syntax.
- Output.
Let's Start
1. < strong >...</ strong >
Places strong emphasis [ special meaning ] on text. Browsers render/display them as bold text.
Use this to deliver content with more importance, seriousness, or urgency.
Syntax :
<strong>Welcome to the Blog!</strong>
2.< em>...</ em >
- Places text with an emphasis [ special meaning ] on text. Browsers render/display them as italics.
- Use this to deliver content with stressed emphasis compared to surrounding text.
- Syntax
<p>We <em>cannot</em> live like this.</p>
3.< cite>...</ cite >
Describes a reference to a cited creative work,
Use this to give credit to the author for their work.
Syntax
<p><cite>HTML and CSS: Design and Build Webs</cite> by Jon Duckett.</p>
4.< del>...</ del >
Used to label previously deleted text on the document.
Use this to show deleted text but retained to show the history of changes to a document.
Syntax
<p>The most important encyclopedia in the world is
<del>Encyclopedia Britannica</del>
Wikipedia.</p>
4.< small>...</ small >
Used to display text with small font size to specify side comments or any information..
Use this to display like copyright and other side-comments.
Syntax
<p>Copyright : <small>All rights reserved.</small></p>
5.< blockquote>...</ blockquote >
Used to extend quotations usually long paragraphs/texts which are cited as well. Displayed with indentation[ spaces at the beginning of a line ].
Use this to represent a section that is quoted from another source.
Syntax
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
6.< br />
Used to provide a line break where divisions of lines are significant.
Use this to distinguish between different sections or parts of any text on a webpage.
Syntax
<p>
Line Breaks, <br />
iNeuron, <br />
Bangalore.
</p>
7.< sub>...</ sub >
An inline element that displays the text which is smaller and placed a half line lower than the previous text.
Use this to denote some mathematical variables, denote the number of atoms of a chemical formula, and similar ones.
Syntax
<p>
This is a subscript example : The chemical fomula of Caffeine is
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>0<sub>2</sub>
</p>
8.< b>...</ b >
Used to display bold text.
Use this to denote text with bold font weight.
Syntax
<b>This is Bold</b>
9.< i>...</ i >
Used to display italic text.
Use this to denote text with bold font Italics.
Syntax
<i>This is Italics.</i>
10.< pre>...</ pre >
Used to write text with whitespaces and the default font will be monospace. Displays text with indentation.
Use this to display code, or a text (for example, a poem), where the author himself sets the location of the lines relative to each other.
Syntax
<pre>
Spaces
and line breaks
within this element
are shown as typed.
</pre>
11.< ins>...</ ins >
Used to show text that has been added to a document.
Use this to mark a range of text that has been added to the document.
Syntax
<ins>This text was inserted</ins>
12.< q>...</ q >
Used to show shorter quotations. Includes quotations on its own.
Use this to handle short, inline quotations that don't require paragraph breaks.
Syntax
<q>These are shorter quotes</q>
13.< sup>...</ sup >
Used to show an inline element that displays the text which is smaller and placed a half line higher than the previous text.
Use this to handle exponents, or powers of a number and as such.
Syntax
<p>
This is superscript : <br />
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</p>
14.< u>...</ u >
Used to underarticulated annotation: it represents a text with a simple solid underline but specifies non-textual annotations.
Use this which requires some comments or attention.
Syntax
<p>UNDERLINE : This is <u>mispelled</u></p>
15.< mark>...</ mark >
Used to represent a text with a highlight background color, the default color is yellow.
Use this to specify text with importance.
Syntax
<p>This text is <mark>Marked</mark></p>
16.< abbr>...</ abbr >
Used to wrap abbreviations or acronyms. It is displayed with a dotted underline and on hovering the full form will be displayed.
Use this to define the abbreviation or short form of an element.
Syntax
<p>This is a abbrevation <abbr title="World health Organisation">WHO</abbr></p>
17.< address>...</ address >
Used to display the contact details and will be displayed in italics.
Use this to display the contact details.
Syntax
<address>
ADDRESS : Written by <a href="mailto:mithun@ineuron.ai">Mithun</a>.<br />
Visit us at:<br />
iNeuron.ai,<br />
Bangalore.
</address>
18.< code>...</ code >
Used to define a piece of code and the default font style will be monospace.
Use this to display a piece of code.
Syntax
<p>CODE : <code>console.log("Hello World")</code></p>
19.< samp>...</ samp >
Used to define the output of a piece of code and the default font style will be monospace.
Use this to display the output of a piece of code.
Syntax
<p>OUTPUT : <samp>Hello World</samp></p>
20.< var>...</ var >
Used to define a variable for mathematical expressions. It will be displayed in italics.
Use this to display the variables.
Syntax
<p>Variable : <var>a</var> = 5</p>
21.< kbd>...</ kbd >
Used to define keyboard input. It will be displayed in monospace font.
Use this to display the keyboard input.
Syntax
<kbd>This is a keyboard Input</kbd>
