HTML. Unit 2. Text formatting.

Introduction

In order to make the structure of our text clearer, we can mark some elements to make them more relevant than other elements. In HTML there are some tags for this purpose:

<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Marked (or highlighted) text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript text</sub>
<sup>Superscript text</sup>

The <b> and <strong> elements

The <b> element represents a piece of bold text to which attention is being drawn, but it does not add any extra importance. On the other hand, the text inside the <strong> element is displayed in bold too, but it also adds a strong importance to the text, which could be meaningfull when the web page is analyzed and processed to extract important words or expressions. This kind of text analysis is done for example by some search engines, which need to know what any page is about to include it in the results when a user is searching for pages containing specific keywords.

Proposed exercise: Important text

Create a web page with the text below using a header and a paragraph, and also add extra importance to several words inside the paragraph:

Doctors without borders

In May 1968, a group of young doctors decided to go and help victims of wars and major disasters. This new brand of humanitarianism would reinvent the concept of emergency aid. They were to become Médecins Sans Frontières (MSF), known internationally in English as Doctors Without Borders.

The <i> and <em> elements

The <i> element defines a part of the text in an alternate voice or mood, and the content inside is usually displayed in italic. It is often used to indicate a technical term, a phrase from another language, a thought, etc. On the other hand, the HTML <em> defines an emphasized text, which is displayed in italic too, but the result is different when a screen reader is used, since the words inside the <em> tag will be pronounced with an emphasis, using verbal stress.

Proposed exercise: Emphasized text

Create a web page with the text below using a header and a couple paragraphs, and also emphasize several words inside the paragraphs:

People first

MSF was officially created on December 22, 1971. At the time, 300 volunteers made up the organization: doctors, nurses, and other staff, including the 13 founding doctors and journalists.

MSF was created on the belief that all people have the right to medical care regardless of gender, race, religion, creed, or political affiliation, and that the needs of these people outweigh respect for national boundaries.

The <del> and <ins> elements

The <del> element is used to define a text which has been deleted from a document. Search engines sometimes use this tag to show the changes inside a website, when some text has been removed after the developer has uploaded a new version.

On the other hand, the <ins> element is used to define a text which has been inserted into a document. Search engines sometimes use this tag to show the changes inside a website, when some text has been replaced after the developer has uploaded a new version.

It depends on the browser how to display the text inside these elements, but most of them will strike a line through deleted text, and will underline the inserted text by default.

Proposed exercise: Deleted and inserted text

Create a page to show several paragraphs where some words or sentences were previously said, but now the authors have changed their minds and want to tell their readers a new version of their thoughts. Using the <del> and <ins> tags, show the previous texts and the new ones in a way that makes clear that the new text is replacing the first one. The result should look like this (you should write at least 10 paragraphs):

The Earth is flat rounded.

On 31 December 2020 the whole world is going to end! carry on as usual.

...

The <mark> element

The <mark> element represents text which is marked or highlighted for reference or notation purposes, due to the marked passage’s relevance or importance in the enclosing context.

Proposed exercise: Highlighted text

Create a web page with the text below using a header and a couple paragraphs, and also highlight several words or figures inside the paragraphs:

Building MSF

Since 1980, MSF has opened offices in 28 countries and employs more than 30,000 people across the world. Since its founding, MSF has treated over a hundred million patients. 

MSF has also maintained itsinstitutional and financial independence, and the organization has continued to be critical of both itself and the broader aid system when appropriate, all in the name of trying to help direct more effective and timely aid to those who need it most.

Proposed exercise: Highlighted text

Create a web page with the following text and highlight the “salamander” word in the last two paragraphs:

Search results for "salamander":

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Proposed exercise: Highlighted text

Create a web page with the following heading and paragraph, and mark the text “Rebel spies managed to steal secret plans”:

Star Wars Episode IV - A New Hope

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.

The <sub> and <sup> elements

The <sub> and <sup> elements specify inline text which should be displayed as subscript (or superscript) for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text, and superscripts are usually rendered with a raised baseline using smaller text.

Proposed exercise: Subscripts

Create a web page to display the following text:

One of my favorite molecules is C8H10N4O2, also known as "caffeine".

The horizontal coordinates' positions along the X-axis are represented as x1 ... xn.

Proposed exercise: Subscripts

Create a page to display the chemical formula of some common compounds, applying subscript formatting to the numbers (you must print each compound in a different paragraph, using the <p> element). The result should look like this (you must add some other compounds on your own):

Oxygen: O2
Water: H2O
Carbon dioxide: CO2
Vinegar: C2H4O2
Baking soda: NaHCO3
Sugar: C12H22O11
Alcohol: C2H5OH
...

Proposed exercise: Superscripts

Create a web page to display the following text:

The Pythagorean theorem is often expressed as the following equation: a2 + b2 = c2

One of the most common equations in all of physics is: E = mc2

The ordinal number "fifth" can be abbreviated in English as follows: 5th

Proposed exercise: Superscripts

Print the squares of the numbers 1 – 25. Each number should be on a separate line (using the <br /> element), next to it the number 2 superscripted, an equal sign and the result. Something like this should be displayed:

12 = 1
22 = 4
...
252 = 625

The <span> element

If we need to mark a text but we consider that none of the existing tags is a good option, we can use the <span> element. Thus, we can isolate a piece of text although there are no changes in the appearence of the text marked when using it on its own (<span>...</span>). The advantage of this tag comes when it is used together with some attributes like class or style, combined with some CSS code. We will work on this deeply in the future, but by now, let’s have a look for example at this code, where we use a <span> element to color only a part of the text inside a paragraph:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Proposed exercise: Text color

Using the <p> and <span> elements, create a web page to display the color of the eyes (e.g. blue, brown, green, gray) of some people you know.

Quiz

Test your skills with this quiz about text formatting and some other concepts related to this unit.