Learn web development 02 - HTML Font tags

Hello, Welcome. My name is kunaal. This is a part of learn web development series.

In today's article, you'll learn about font tags in HTML. Earlier, We discussed about HTML, and programming languages. So, if you want, you can to checkout that article first.

Font tags

So till now we learnt about basic HTML structure. But, what you think how can we add texts to our web page? Well, we have lots of tags which allow us to add text to our page. So, let's check some.

h1 to h6 tag

<h1></h1> stands for heading tag 1. This tag is used to add heading on the page. we have some more tags for headings.

<h1>heading</h1>
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<h6>heading</h6>

Output

So, that was about headings but what about links ?

Anchor tag

<a></a> anchor tag. This is used to add links in the web page. yes, those blue color underlined text.

<a href="www.google.com">link</a>

Output

If you notice. We have href="www.google.com" inside <a>. Now what is that ? href="" is know as attributes in HTML. Anything that you type inside a tag with quotes <tag attribute=""></tag> is knows as attributes. href stands for header reference. This attribute is used to add link url. Means in this case, we set our url to www.google.com. If we don't set any href attribute. Anchor tag will not re-direct you to anywhere.

If you have to redirect to other HTML file give files name in href. Example href="index.html"

P tag

hmm! Now we know about headings, links, but about paragraphs or normal texts. Well, for that we have  paragraph tags.
This do exactly what it's name says. Paragraphhhhhhh.

<p>this is a very long long paragraphhhhhhhhhhhhh.</p>

output

Remember all these property should be inside <body> tag.

Font styling relating tags

Now, we have very basic font styling tags. So let's see them with example.

<!-- for bold text -->
<b>bold text</b> 
<br>
<!-- for italic font -->
<i>italic font</i>
<br>
<!-- for underlined text -->
<u>underlined text</u>
<br>
<!-- for strike through text -->
<s>stike through text</s>
<br>
<!-- you can use more the one tags at a time -->
<b><i><u>this is bold, italic and underlined :) </u></i></b>
<br>
<!-- By default if you give more that 1 space it trims down to 1 space
    but if you want to add text with lots of space. use pre tag -->
<pre>
     h
      e 
       l
        l
         o
</pre>

 This tag is know as break line. This tag is used to add a line break. And Notice we are not close it. Because, In HTML we have some tags which do not close.

Most of these tags use you'll never use. Because now days, we use CSS to achieve this same result.
If you have any doubt. Ask me in comments.

Remember to close all tags, and also close them in order. For example
wrong.
This is wrong
right.
This is right

Output

So, that's it about Font tags in HTML. I hope you understood each and everything. In the next article we'll learn about lists in HTML. So make sure you follow me.

Homework

I appreciate, If you do homework as well for you better practice. Today's homework is.

<!--
You have to make two pages. you can give any name to them. 
But make sure you give these things.

both page should contain
1. at least one heading tag.
2. at least two paragraphs, and you should make at least one paragraph bold, italic or underline.
3. link to the other page.
->

For example

home.html

about.html

If you want, you can tag your homework to my Instagram. I'll be glad to see you developing web pages.

So, that's sit, if I missed something or you have any doubt feel free to ask me in discussion.

If you like, you can subscribe my youtube channel.I create awesome web development tutorials. You can also watch tutorial on Gradient Infinity loading animation

Thanks For reading.