# 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

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: ```xml

football, basketball,

listening to music

``` 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: ```xml

My Projects: Go to Projects

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

My Projects: Go to Projects

``` You can easily style these changes using CSS but we will get to that. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711974516400/33aaf0ac-1332-46c2-8bdc-5d01b2a2f1c6.png align="center") ## 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: ```xml Architecture ``` * 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: ```xml Frontend Web Development ``` * 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: ```xml ~~intimidating~~ ``` * 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/](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: ```xml ₁ ``` * 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? ```xml U²B ``` * The `underline` tag: Let's underline `HTML, CSS, Javascript, and React` in the skills section: ```xml HTML, CSS, Javacsript and React ``` * The `bold` tag: Sure, we can make the `Coventry` text bold in the `About Me` section: ```xml Coventry ``` * The `italic` tag: Go ahead and make the `UK` text italicized: ```xml UK ``` * 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: ```xml UK ``` * 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: ```xml Architecture ``` Please note that all these can be done easily with CSS and we will move into CSS soon. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712001376886/b96d6275-6960-4536-953f-e79f560c75b5.png align="center")