What is Text Formatting in HTML?

Hello friends,

You are all welcome in this HTML series.

I hope that you have tried and gone through the last topic of HTML elements at your home & you have also tried all the element tags one by one (Blockline, Blocklevel, Inline level, and void).

If you have run it successfully, so that is really well and good but,

 if you faced any difficulty or got stuck anywhere, you can tell us all your issues by visiting our website forum.learnvern.com.

We will try to read out the issues and revert to you as soon as possible.

So, our last topic was HTML elements.

Today what we are going to learn in the session is Text formatting.

Along with the text formatting,

We will also learn how to comment in html and phrase text.

So, today's session is basically going to be a text-based session, like how can we format the text that we write in HTML.

How can we show the text decorated and more attractive by using HTML & how by using HTML text will show up on the webpage, so we will see that today.

So, the very first point we will take is text formatting.

So, firstly we will look upon what is formatting:

What formatting is?

So,

We use formatting to give a good look and feel to a text written in the HTML webpage.

You might know, sometimes we go through different websites, we open a website and do not want to look at the content they contain.

So, that is the look and feel that whenever we open a website, the content of the site is present there but its look and feel must be such that when the user goes through the website, he must enjoy and take interest while he go through it.

While looking at the site , it must provide a proper look and feel so that

Okay we don't close the website with just a glance or go to another website but we stayed on that website and go through the content.

That is called look and feel, & by the help of formatting, we can give a proper look and feel to the website.

In HTML when we write the content, we can give the content a good look and feel by two types. One is the CSS (cascading style sheet) that is written here.

We will learn this in the next course of CSS after this one.

Though CSS is used to format the text, there are some tags given in the HTML through which we can format the text.

So, there are two ways of using text formatting.

The first one is using CSS & the other one HTML or (without CSS)

So,

Currently, in the HTML series, we will learn to format the text using HTML only.

So, In formatting tags, there are two types of tags available.

The first is a physical tag & the other is the logical tag. The basic difference between the physical and the logical tags is,

When we use the physical tag to format the text, only the visual appearance gets affected, it has no logical concept.

No information gets passed to the browser, it is like a task.

If we are using physical tags (for ex- Bold), with the help of bold, we can show our text darker but no logical information is passed to the browser.

So,

We will use the logical tag if we want to perform a task and pass the information to the browser, and this portion needs to be shown in a bold format.

Physical and logical tags do the same work but, physical tags perform output related work while the logical tag gives the output and passes the information to the browser.

After that,

Now we will see how many tags are available related to the text formatting.

So, slash

Here the first example is the BOLD, how to bold the text.

We have two examples.<b> and <strong>.

So,

Let us open the program.

That is our text editor in which we usually write our programs.

So,

As learned earlier, we need to write the program in the body tag.

Firstly I will write a few lines in the body tag.

Like usually, I write a paragraph like hello, how are you. So,

I will write the same Hello, How are you, thank you.

Here I have written a line.

Now, I have to show some portions in Bold.

I can show it with two views.

First, I will save it when I run this program.

That is my program, under which the output is shown "Hello, How are you? Thank you".

So, what I have written in my text editor under the body tag, is as it is shown here.

Now,

For example, from this line

I want to show the "hello" portion in bold.

What I will do is, I will insert the <b> tag before "Hello" and </b> after Hello.

By doing this, the "hello" will be shown in a bold format.

I am reloading the page here, the "hello" has become bold and appears dark & the rest of the portion (How are you? Thank you.), is shown in normal font.

So, we have done all this by using the <b> tag.

If I want to show "thank you" in bold, I will do the same by using the "strong" tag.

Save & Reload,

We saw that we made "hello" bold by using the b tag, and "thank you" by using the strong tag.

The output is the same both ways, but when we used the b tag to bold the text, only the output is given,

No information has been passed to the browser by the b tag.

When we use the strong tag,

As it is an element of HTML 5, it is also giving the same output.

The output is almost the same.

But the hidden and semantic related information is passed when we use the strong tag that which portion it has to make bolder etc.

So, the main difference is that the output will not differ in the physical and logical tag but, the difference is only browser-related.

So, If we want to bold the text, we do it using b and strong.

Next,

The tag is italic, how the text can be made italic.

So there are two ways the <i> & <em> tag.

We can do it in both ways.

So,

I am copying the same thing, I am making the "hello", portion italic <i> tag Hello </i> okay!

Save & reload here it is.

As we learned to come into a new line, we use the <br> tag.

So,

Here I used the <i> tag to italicize the text.

Here, my Hello turned italic.

Now,

The same way I am using <em>.

It will also produce the same output.

Here we can see that we can turn output italic by using <i> and <em>.

The next tag is the Marked Formatting <mark>.

If we want to mark or highlight any particular portion in the text we use the mark tag.

So, the same way.

So,

I want to show the (How are you) portion marked.

So,

I will write <mark> before "How are you" and after the question mark, I add </mark> then save and reload.

So,

As I reloaded, you can see a yellow background behind How are you.

Here we have not used any color, it is the default color of the mark tag.

So, using the mark tag, this portion is shown marked.

The next tag is the underline tag

If we need to underline anything we can use <u> or <ins>

We can underline using both of these.

For example,

Copying the same

The first tag was the U which stands for underline

/U save and reload

Here you can see the hello is shown with an underline.

Now the insert tag has another use I will show you along with it.

So as soon as I run this tag the output shown is the same

Hello and thank you both are shown with an underline.

Insert tag's actual use is not for underlining but to add or insert any content externally to our text or the body tag.

The output of the insert tag is shown underlined because it represents that this portion is inserted separately in this line.

I repeat,

The difference between the insert tag and u tag is the underline tag just provides the underline to the text while the insert tag represents that this portion has been added or inserted externally in the body tag.

Next is,

Strike, strike text is used to apply a strike on the text as we usually see on cancel or delete.

It also has two options: strike and del

So,

I'm copying the same,

Here I am writing strike, I will remove this insert from here.

Save and reload.

So as you can see a line is shown above hello a strike has been applied.

Just like we write something in our notebook with the help of a pen and when we need to cancel out that content we draw a line over that text.

Similarly, we use the strike tag to show a line over the text.

The next tag that will show the same output is del.

For this let me show you the output.

Save and reload.

Just as hello the same line is shown on the content using del but what's the use of delete?

When we use the del tag that represents that some portion has been deleted from the content.

Again, if the content is hello how are you thank you

The content which is added in the del tag represents that thank you is deleted from the content.

So, here we saw two tags ins and del both are semantic level tags.

The result provided by the underline and strike tag same result is shown using insert and delete tag but the actual use of insert and delete is to remove some portion from the content.

When we need to remove some portion from the content we use delete and when we need to add some portion we use insert tag.

Next is the monospaced font (tt) tag.

Firstly, I will show you its output to show what a monospaced font is and how it works.

So I'm copying the same.

I am adding a thank you portion in the tt tag.

The meaning of monospaced,

The alphabets in capitals occupy more space as compared to small alphabets.

Let's say if I write W it is a wide-character, if in that place I write small a, so compared to that W small a will occupy less space.

So if I want to show the content in such a way that all the characters occupy the same space in that case I will use tt tag.

So I am saving the program and run

So as you can see I haven't used the tt tag and not applied the monospace in hello how are you, but when I applied it to thank you.

I can see that all the characters occupied the same space in thank you.

If it's looking small, let me make it bigger.

Let me write it in the H1 tag.

If I write "thank you" in H1 tag with tt tag.

As you can see the T and H have occupied the same space.

As I have you the example that W and M is a character that occupies more space.

So if I replace this thank you with welcome.

You can observe that W will occupy while small e will occupy less space.

So let's save and reload and see the example.

You can see the space occupied by W is the same space occupied by E.

So this is the use of monospace and the tag used for it is tt.

All the content is written in tt tag, all the characters will occupy the same space.

Let's move further.

Next is superscript.

Sometimes in mathematics, we need to show the power.

2 to the power 4, 2 to the power 3, so this type of content is shown by using superscript.

This was the math's example.

If we need to show content slightly above compared to the other we use superscript.

So I am using the same example.

So I want the “how are you” to be slightly above the hello.

Removing this tt, I am adding sup before how are you

Save and run

So as you can see the “how are you” are starting slightly above the “hello” And this is called superscript.

And as I gave the example of math, we need to represent 2 to the power 10.

I will write 2 <sup> 10.

Reload

We can see 2 to the power 10 here.

When we need to display the content like this example we use a superscript tag which we show as sup.

Same way, if we want to show something below we use the subscript.

So same example,

If I want to show “how are you” below, I will replace sup with sub subscript.

Save and reload

So as how are you after the hello was above now it is below the "hello".

So that was the example of subscript.

If we want to show a text larger than the previous text we use the big tag.

So if I want to show this thank you bigger as compared to other texts.

So let's remove this sub and put big before "thank you" and slash big.

Save and reload.

So here “thank you” is appearing in larger font as compared to the “hello how are you”.

Similarly, if we want to show any text smaller we use the small tag.

So Same copy

Small.

Save

So as compared to “hello”, “how are you” and “thank you” are shown a bit smaller.

Here all we learned are the tags related to the text formatting like bold, strong, underline, em, mark, italic, insert, delete, strike, monospaced, superscript, subscript, big and small.

So all these examples we saw are used to format the text.

Further, we will learn how to phrase the text.

Firstly we'll learn what the phrase tags are.

So the phrase tags are special-purpose tags that give a proper structure to a block or a paragraph.

I repeat,

The text formatting is made for single lines or statements but the phrase tags work on paragraphs.

Let us see them with examples.

If we want to add an abbreviation to our line we will use the abbr tag for that.

I will remove this content from here so that we can see proper examples.

When we hover our mouse on a particular text and some extra information is shown above that text, that extra information can be shown using the abbreviation tag.

We always need to add a title with the abbr tag.

Let us say,

I want to add some abbreviations above hello.

In that case, I will add abbr and / abbr and inside that abbr, I will use the title attribute.

Like if I want to show hello with hello or if I want to pass some other information as we have already written how are you.

So, I will remove “how are you” from here and write it here.

Now I will save and reload the program.

A dotted underline is displayed under the hello, this formatting is provided by the abbr tag because we haven't added any dotted line.

This is the functionality that when we use the abbr tag, it provides us with the underline.

So when I hover on it, then "how are you" is shown in a tooltip.

So this is the functionality when we add the abbr tag the information is shown inside a tooltip.

And to add the tooltip we need to add the title in the program. If I do not add the title the hello and dotted underline will show but no extra information will be shown when I hover on it.

For good use of the abbr tag, it's a good practice to use the abbr tag and the title attribute.

The next tag is the mark, mark tag we have already learned in the formatting.

Strong and em we have learned for bold and italics.

The next tag is the dfn or definition tag.

I repeat, dfn stands for definition.

This tag is used to define the keywords.

If in the webpage we are creating or the content we need to define the keywords we use the dfn tag.

To understand dfn let us see the example to have a clear picture.

So let's say

After the hello how are you I take a new example with a br tag.

As we are learning html let us take the example of html.

Let's say

I add something in the p tag

P, dfn /dfn and here is my html after space, I write "is a markup language".

Save and reload.

So we can see HTML is a markup language.

The output is in italic which represents that this is a keyword of a definition and the definition is "is a markup language".

It's the definition of HTML that it is a markup language.

But Instead of calling HTML

We are showing it together and highlighting that html is a markup language so this defines the definition for that we are using the dfn tag.

Next is Quoting for which we use blockquotes.

If you have read any Theseus you must have seen when we use quotes, to quote we use the blockquote tag.

Blockquote helps to determine from where the content was taken.

For this, we will take an example too.

Let's go to the code.

Br tag

After that, I will add a paragraph here, through that we will know how to work with blockquote and what is its defined CSS.

Let's say I write a blockquote here and cite inside it.

Inside the cite, I am writing abc.com as of now,

Or else we can mention learnvern's website.

After that, we will take some quotes like "learnvern is the best site to learn coding".

Full stop and Save.

When I will Run and reload.

You can see that I didn't give any extra space here but because I am using blockquote it gives an additional space over here and the statement is starting from here.

So from where I have taken this content that is referenced as my cite is learnvern.com.

As I have to cite from where I have taken the content that is from learnvern.com.

So this is the use of the blockquote.

Here is the cite tag along with the blockquote.

How the cite tag works.

If I have taken this portion from learnvern.com, it is not showing in the output from where I have taken the portion.

To show that I will use the cite tag here and write learnvern inside it.

Save and when I run that

It will show something like this,

Now as it is showing here let us add it in the blockquote only so that the issue of spacing is resolved.

So blockquote start our statement "learnvern is the best site to learn coding", from where we have taken it

From learnvern itself.

So when I added the term learnvern into the cite tag it is shown as italicized and the font is 1 or 2 pixels small.

So when we need to give a citation for a quote we use the cite tag.

The next tag is the short tag.

When we need to provide the quotes we add the "q" like this.

So let's add a tag.

I am adding it here only at "learnvern is the best site to learn coding".

Let's add q

Save and reload

The quotes get added.

So to add the quotes we use the q tag.

Whenever we need to show it someone has said something or someone's speech we use the q tag.

Next is the code tag.

The code is written on a webpage when we are learning any programming language like C or Java, and usually, the browser runs the code.

So let's say I want to show the Html code on the browser so that's not possible if I write it as it is.

In that case, using the code tag I can show the html code or any other code on the webpage.

For example,

Let's start from a new line

Code, inside this code tag I will write.

Let's say In the c Language there is a line #include stdio.h.

So I am adding #include studio.h

So if I save and run it

It has shown as it is but the studio.h portion got removed because the browser considers this portion as a tag.

This is a problem, so as a solution

We include a valid hexagonal code for the symbols like angular braces opening and closing and a few signs.

So if we include that hex code in our code then we can show these signs in the web pages else we cannot show the signs.

As we saw in the example because I wrote studio.h inside the angular braces the browser considered it as a tag and we cannot show it.

In the next sessions, I will teach you how to show them.

So we are not showing this Currently,

If I write any other code in its place like Java code.

Public static void main (string args)

Okay.

So, save and run

And here the line shows up.

The code tag we used doesn't represent the code, the browser will show the code but also consider that the code written inside the code tag is a code of a programming language and that is why specific formatting is given to the code tag.

As you can see the fonts of the code tag are different from the other lines.

So code tag means that the content written inside it is a code of a programming language and it shows that in a different font.

So this was the use of the code tag.

The next tag is the keyboard tag.

Kbd represents the keys of the keyboard.

To show that,

Let us say I want to print press control alt and delete.

In that case, what I will write is.

Inside the p tag, we will write press

Control is the name of the key so I will add

kbd write ctrl in it kbd close.

Kbd again alt

Again kbd delete

So what I want to show is: press these keys

It will also have a different font

Let us run it

So when I run the code press is shown in a different font and size but whatever I wrote in the kbd tag that content is shown in a different font and a smaller font size.

As we saw in the code tag that the browser understands that this line is a code of a programming language similarly browser understands that this combination

Whatever is written inside the kbd tag is the key of the keyboard and that's why the font size is shown differently.

The next and last tag is the address tag.

Whenever we learn languages in school we need to add the address in a corner and we need to show it in italicized fonts.

Our browser too mentions the address in the same way.

So if we have to write the address at any place we will use the address and write ABC street,

Then new line, we can use the br tag for that

Then ABC road,

Again br

And ABC city

And save.

This address will show up like

Abc street,

Abc road,

And Abc city

As I said whenever we are writing a letter and when we enter the address in the letter we add it in a specific portion and also write it in an italicized manner so that we know that this portion shows an address.

So we used the address tag for that and all the content inside the address tag becomes italicized.

So all the tags we learned until now, are used to format the phrases and more than one content.

Firstly we learned the text formatting this is for the phrase content formatting.

How can we add abbreviations, define a keyword, how citation is provided, how we write the code and address and how to write the keyboard keys.

The last topic is the HTML comments.

This represents how we can add comments in HTML.

So the first point in the code we have just written is the abbreviation.

Let's say I want to show that "below-mentioned lines shows how to use abbreviations".

So if I want to show this as a comment,

So for the programmer or whoever is seeing this code I need to pass the information that this line is for abbreviation.

But I don't want to show this line that I wrote "below-mentioned lines shows how to use abbreviations" in the browser.

So what I will do is I will start the angular bracket, exclamation mark, dash dash, space, dash dash, close the angular bracket.

So whenever the content is written between this and this tag.

Whenever the content is written between these tags it shows that this is something related to the content written here.

When I save and run it.

This complete line will not be shown in the browser.

Nothing is shown above this.

This means that this Portion is the comment.

Again,

I need to write the same for the definition

I will add "below-mentioned lines are for definition"

Again save and run

The code is running as it is no change is appearing in it

This shows that these lines are the comments.

We have now seen how to comment.

If you don't want to type like this and directly comment in the sublime text.

The shortcut key to comment is the ctrl + question mark.

Just select the portion you want to show as a comment then press ctrl and question mark.

I repeat, ctrl and question mark.

Soon as we press ctrl and question mark together the line will become a comment.

Again I will show.

Ctrl + question mark.

If we use this method sublime text gives us the portion that is ready to be used for commenting.

So that you can write it.

So, here I want to write that the "below-mentioned line is for code tag".

But before writing it I will add the comment

I will press Ctrl + question mark

The comment portion shows that now I can write "below-mentioned lines are for code tag".

Commenting is very useful for a programmer if you are writing a program and adding comments.

Whenever you read that program it gives the information about the lines and if someone else reads that code through comments he gets to know what is the use of the written code and why that code is being written.

So commenting is a very good and important practice when you are developing a website or a web application.

So we have learned so many things in today's session

Like how we format the text and phrases.

We learned individual tags related to these

Along with that, we learned how to comment.

 Whatever we have learned today, I request you to try at home and install sublime text in your system and try all the examples we have seen today.

Try them yourself and run them.

These are easy and must run in the browser.

But while running, if you face any issues or difficulties you can let us know at forum.learnvern.com.

We will revert to you with solutions as soon as possible.

The next topic we will learn is the heading tag, anchor tag and image tag.

We have already learned these three in the past session but in the next session, we will learn them in more detail.

How these tags are Useful when creating a webpage and how we can use their attributes to add images, links and headings.

Thank you, guys.