AccDev's Blog

HTML 104: Text Formatting, Divs, and Spans

Photo by Tom Rogerson on Unsplash

HTML 104: Text Formatting, Divs, and Spans

Format text using div and span, and tags like bold, italic, small, big, superscript, subscript, mark, deleted, underline, and monospaced tags.

AccDev's photo
AccDev
·

6 min read

Table of contents

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

Refresher Quiz

What is a favicon and where does it appear on your web page?
A favicon is an image, usually a logo of your website, and it is displayed on the browser tab next to your page's title
How is a favicon created on your web page?
In the head section of your HTML page, create a link tag, Specify a relative path to your image of choice, add a type attribute, and set the value to image/jpg or image/png depending on the file extension of the image. then add another attribute of rel and set it to icon.
What tag is used to add a video file directly to your webpage?
The video tag.
How do you add a video tag to your web page and add controls to it?
To add a video file directly to your web page, first add a video tag with a src attribute pointing to the relative path of that video on your computer, then add the following attributes: control (to make it play), autoplay (to make it play as soon as it loads on the page), muted (to keep it muted until a user selects sound), and loop (to make it play over and over in a loop).
I have video, audio, and image files on my web page, how do I turn them into clickable links, leading users to a different website?
Turning media files into clickable links on your page follows the same process. You simply wrap the element with anchor tags, using href attributes that point to that specific website's URL. So you simply copy and paste the website URL as the value of the src attribute inside the anchor tag.
To add music files directly to your web page, what tag is used, and what attributes are used to give it functionality?
The audio tag is used to add music directly to your web page and just like adding video files, you add the following attributes: controls, autoplay, muted, and loop.
How do you create links to other pages on your website?
To link to other pages within your website, you simply use an anchor tag to wrap the element you wish to link, it could be a heading, a simple text, or a media file. Then you specify the href attribute to point to the relative path of the destination HTML page.
What attribute can be used to change the size of an image or video file on your webpage?
The width or height attributes, or both.
Why do you need the 'muted' attribute on your video or music files
Audios playing as soon webpage loads can be annoying to some users and so does not make for a great user experience, for this reason, it is advisable to keep them muted.
How do you create a boilerplate code on a blank HTML sheet?
By Typing: ! + tab

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.

Did you find this article valuable?

Support AccDev by becoming a sponsor. Any amount is appreciated!

DIVspanHTML5Beginner DeveloperscodingProgramming BlogsProgramming TipsHTML tags HTML CSS JAVASCRIPT