Typography is the art and technique of arranging type elements to make written language legible, readable, and appealing when displayed with the use of headings, bold fonts, italic fonts, strong fonts, lists, and so on.
In Bootstrap, all headings from h1
to h6
are available from HTML. Headings are mainly used to highlight the main topics under discussion. The heading text should be included between proper HTML heading tags, for example, <h1> Here is the heading text
</h1>
. The heading size decreases as the heading number increases, providing the facility to highlight the main topics and subtopics. This technique helps in managing a proper design for the website.
Here are a few examples of how headings can be used:
<h1> This is a Bootstrap heading H1</h1> <h2> This is a Bootstrap heading H2</h2> <h3> This is a Bootstrap heading H3</h3> <h4> This is a Bootstrap heading H4</h4> <h5> This is a Bootstrap heading H5</h5> <h6> This is a Bootstrap heading H6</h6>
All the HTML tags related to typography and design must be included within the body tags, for example, text, hyperlinks, images, tables, lists, and so on. The following code shows a paragraph tag, which shows the text in a paragraph:
<p>...</p>
The lead class helps make the text inside the tags stand out. The method of its declaration is as stated here:
<p class="lead">...</p>
Emphasis basically affiliates the size and font of the text to its importance in a document. For example, larger text would have more importance than smaller text or text in italics might contain a reference from another resource.
The text within the small
tags is mainly reduced to 85% of the original size. This technique is mainly used to lessen the importance of the text:
<small>...</small>
The text within the strong
tags is made more visible by making it larger and bolder. This helps in increasing the emphasis of the text in the document:
<strong>...</strong>
The text within the em
tags is italicized. This technique is mainly used to denote references, among many other uses:
<em>...</em>
Alignment is a basic technique used to align a paragraph to the left, right, or center of the screen, regardless of the screen resolution:
<p class="text-left">Text here will be left-aligned</p> <p class="text-center"> Text here will be center-aligned </p> <p class="text-right"> Text here will be right-aligned </p>
The customized <abbr>
element of HTML can be used with the following syntax as shown in the following code snippet.
The <abbr>
tag shows a smaller version of text and is expanded when the mouse is hovered over it:
<abbr title="attribute">Here is an example of an attribute tag</abbr>
The output of this code will show the attr abbreviation.
Initialism has the same functionality as the basic abbreviation but with smaller text:
<abbr title="HyperText Markup Language" class="initialism">HTML using Initialism</abbr>
Address tags are used to accommodate all text related to an address. The following example shows the format:
<address> … <strong>Packt PublishingPublishing.</strong><br> Berwick House, <br> 35 Livery St, <br> Birmingham B3 2PB,<br> United Kingdom <br> <abbr title="Phone">P:</abbr> +44 121 265 6484 </address>
3.133.151.220