Get Website Learn Coding Tech Story

HTML Examples

Html Formatting

Formatting is the process of stylizing text in a document. Formatting text are like bold, italic, underline etc. Html offers a handful of special tags that can be utilized to stylize text.

Html Text Formatting Elements

Tag Description
<b>Defines text as bold.
<i>Defines text as italic.
<u>Defines text with underline.
<em>Defines text as emphasized.
<small>Defines text as smaller than other.
<strong>Defines text as important with bold.
<sup>Defines text as superscripted.
<sub>Defines text as subscripted.
<ins>Defines text as inserted.
<del>Defines text as deleted.
<mark>Defines text as highlighted.

Text formatting example

<p> This is <b>paragraph</b> of text </p>

<p> This is <i>paragraph</i> of text </p>

<p> This is <u>paragraph</u> of text </p>

<p> This is <em>paragraph</em> of text </p>

<p> This is <small>paragraph</small> of text </p>

<p> This is <strong>paragraph</strong> of text </p>

<p> This is paragraph<sup>1</sup> of text </p>

<p> This is paragraph<sub>1</sub> of text </p>

<p> This is <ins>paragraph</ins> of text </p>

<p> This is <del>paragraph</del> of text </p>

<p> This is <mark>paragraph</mark> of text </p>

Html Computer Output Elements

Tag Description
<code>Defines text as computer code.
<kbd>Defines text as keyboard text.
<samp>Defines text as sample computer code.
<var>Defines text as variable.
<pre>Defines text as preformatted.

Html Citations, Quotations, and Definition Elements

Tag Description
<abbr>Defines text as abbreviation or acronym.
<address>Defines text as contact information for the author/owner of a document.
<bdo>Defines text direction.
<blockquote>Defines text section that is quoted from another source.
<q>Defines text as short quotation.
<cite>Defines text as title of a work.
<dfn>Defines text as definition term.

Html <font> Element

The <font> element provides no real functionality by itself, but with the help of a few attributes, this element is used to change the style, size, and color of Html text elements. The size, color, and face attributes can be used all at once or individually, providing users with the ability to create dynamic font styles for Html document. (Not supported in HTML 5.)

Html <font> Attributes

Attribute Description
faceSpecifies the font type of the text.
sizeSpecifies the size of text.
colorSpecifies the color of text.

<font> example

<font face = "Georgia, Arial, Garamond"> This is a font style </font>

<font size = "16"> This is a font size </font>

<font color = "#0000ff"> This is a font color in hex </font>

<font color = "rgba(0,0,255,0.5)"> This is a font color in rgba </font>

<font color = "blue"> This is a font color in color name </font>

<font face = "Georgia, Arial, Garamond" size = "16" color = "#0000ff">

 This is a complete example of font tag


Html Comments

Comments are a great asset to new developers and a great way to place little notes to reminding what pieces of code are doing what. Comments are also great ways to troubleshoot bugs and code errors.

Html comment example

<!-- Text for comment in Html -->

Html Line Breaks

The line break is used in Html text elements, and it is the equivalent of pressing Enter or Return on keyboard. In short, a line break ends the line and resumes on the next line.

The <br /> tag use to break a line (a new line) without starting a new paragraph. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <br /> element has a space between the characters br and the forward slash. If we omit this space, older browsers will have trouble rendering the line break, while if we miss the forward slash character and just use <br> it is not valid XHTML

<br /> example

This is <br />a text<br /> with line breaks