HTML Text and Fonts Example

An example page of all things about text in HTML.

by neerajsinghvns

HTML

<!DOCTYPE html>
<html>
<head>
   <title>HTML Text</title>
   <meta name="description" content="A web page for testing text">
   <meta name="author" content="Code Boxx">
   <!-- LOAD THE WEB FONT -->
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
   <!-- FONT AWESOME ICONS -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<h1>HTML - ALL ABOUT TEXT</h1>
<hr>

<h2>ALL THE HEADINGS</h2>
<h1>H1 Title</h1> <h2>H2 Title</h2> <h3>H3 Title</h3> <h4>H4 Title</h4> <h5>H5 Title</h5> <h6>H6 Title</h6>
<hr>

<h2>TEXT ELEMENTS</h2>
<b>bold</b> <i>italic</i> <u>Non-textual annotation</u> <strong>STRONG</strong> <em>Emphasis</em>
Text <sup>Superscript</sup> Text <sub>Subscript</sub>
<small>Small</small> <mark>Mark</mark> <ins>Inserted</ins> <del>Deleted</del>
<hr>

<h2>PARAGRAPHS</h2>
<p>Paragraph
Paragraph
Paragraph</p>
<pre>Preformatted Text
Preformatted Text
Preformatted Text</pre>
Line Break<br>Line Break<br>
<span>A span of text</span>
Horizontal Rule <hr>

<h2>QUOTES, CITATIONS & ABBREVIATIONS</h2>
<q>Short Quotation</q>
<blockquote cite="http://site.com">Block Quotation</blockquote>
<cite>Citation</cite>
<abbr title="abbreviation">ABBR</abbr>
<hr>

<h2>CHANGING FONTS</h2>
<span style="font-family:Arial">Arial</span>
<span style="font-family:'Times New Roman'">Times New Roman</span>
<span style="font-family:Courier">Courier</span>
<span style="font-family:Arial,Courier,Serif">Multiple Fonts</span>
<span style="font-family:Roboto,sans-serif">Google Web Font</span>
<hr>

<h2>FONT SIZE</h2>
<p style="font-size:18px">This font size is defined in exact pixels.</p>
<p style="font-size:1.2em">This font size is defined in em, relative to default browser's font settings.</p>
<p style="font-size:120%">Font size is defined in percentage, relative to default browser's font settings.</p>
<hr>

<h2>FONT COLOR</h2>
<p style="color:red">This color is defined with...