HTML 104: Text Formatting, Divs, and Spans

Before we proceed into today's Class, let's find out just how much information you have retained, with a quick refresher.

Refresher Quiz

Now that we have refreshed our memory from the previous article, let us proceed to formatting text in HTML.

Inline and Block-level Elements

Inline Elements take up just the space of their content while Block elements take up the entire line of code. In other words, Inline elements can share the same line with other elements, whereas, block-level elements are very 'selfish', as they don't share.

Spans and Divs

We will illustrate this concept using a span, which is an inline element, and a div, which is a block element. a div is like a container for separating sections of the HTML document for styling purposes, it is a block-level element. A span is also a container for sectioning contents in an HTML document, it is an inline element. Now let's code:

• In our index.html file, scroll to the hobbies section and wrap the first two hobbies with a div, like so:

<p>
<div>football, basketball,</div>
<a href="./assets/music.html" target="_blank">listening to music</a>
</p>

Notice how the div has forced the listening to music hobby out of its line, and into the next line. This clearly demonstrates how a div is a block-level element, as they don't share the same line with other elements. Let's demonstrate the inline concept:

• In the same file, scroll down to the my projects section and replace the h3 tag that surrounds it, with a span. See how that section gets smooched up into the section before it.

• Next, surround the entire section with a div to isolate it inside a container, as follows:

 <div><span>My Projects:</span>
      <a href="./assets/projects.html" target="_blank">Go to Projects</a></div>

Notice how that section has now moved to a new line. You can now add line breaks to separate them, thus:

<br>
<br> 
<div><span>My Projects:</span>
      <a href="./assets/projects.html" target="_blank">Go to Projects</a></div>

You can easily style these changes using CSS but we will get to that.

Text Appearance Formatting

We can use special tags to alter the appearance of some text to add emphasis to them.

Still inside our index.html document, we will demonstrate these concepts:

• The mark tag: In the About Me section, give the word Architecture a special background to emphasize it, using the mark tag:

<mark>Architecture</mark>

• The monospaced tag: In the About Me section, wrap the words Frontend Web Development with a monospaced tag using the tt tags. This would appear to not be visible because of the pre tags currently wrapping that paragraph, change it from pre to p tags and notice the changes:

<tt>Frontend Web Development</tt>

• The deleted tag: Here we will make a word we consider unpleasant appear deleted. Find the word intimidating in the same section and wrap it with the del tag:

<del>intimidating</del>

• The subscript tag: Let's create a reference to the University of Birmingham website using a subscript tag. Locate the text University of Birmingham, type 1 immediately after it, no spaces, then wrap the number '1' you just typed with the sub tags. Secondly, nest an anchor tag inside this sub tag and set its href attribute to the following URL: (https://www.birmingham.ac.uk/), without the brackets. I went ahead and added a tooltip using the title tag, I hope you still remember how to do this.
  Typically, subscripts are used to refer users to a footnote, we will learn how to link elements to other sections of the same document in a later article:

<sub><a href="https://www.birmingham.ac.uk/" title="University of Birmingham Website">1</a></sub>

• The superscript tag: Used typically in mathematical expressions to raise numbers to the power of something, but we will demonstrate how it is done here. Let's create a funky way of writing 'YouTube' in the contacts section like U2B, and then making '2' a superscript, really cool right?

U<sup>2</sup>B

• The underline tag: Let's underline HTML, CSS, Javascript, and React in the skills section:

<u>HTML, CSS, Javacsript and React</u>

• The bold tag: Sure, we can make the Coventry text bold in the About Me section:

<b>Coventry</b>

• The italic tag: Go ahead and make the UK text italicized:

<i>UK</i>

• The big tag: We can also make texts big. This is rarely used because CSS can be used to manipulate text sizes really easily. We will make the UK text big by nesting a big tag inside the italic tag:

<i><big>UK</big></i>

• The small tag: We can also make texts small. we will go ahead and make the Architecture text small, by nesting a small tag inside the mark tag, thus:

<mark><small>Architecture</small></mark>

Please note that all these can be done easily with CSS and we will move into CSS soon.