Learn web development 02 - HTML Font tags
Tags: html, beginners, webdev, css
Published: 2021-07-24 12:20:11

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](https://dev.to/kunaal438/about-html-learn-web-development-series-01-4jbh) 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.

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

######Output
![Capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zk9crt2ybdx6ebsvn8v.PNG)
 
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.

```HTML
<a href="www.google.com">link</a>
```
######Output
![Capture-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vmyc1frihpxhocyp6kt.PNG)

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 `<p></p>` paragraph tags.
This do exactly what it's name says. Paragraphhhhhhh.

```HTML
<p>this is a very long long paragraphhhhhhhhhhhhh.</p>
```
###output
![para](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pupesy1hw68w6r99s6e8.PNG)

>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.

```HTML
<!-- 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 -->

stike through text

<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>
```
>`<br>`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

>```HTML
>wrong.
> <b><i><u>This is wrong</b></i></u>
>```
>right.
>```HTML
> <b><i><u>This is right</u></i></b>
>```

######Output
![Capture-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unvvidgigpq7922xagro.PNG)
 
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.

```HTML
<!--
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
![page1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/293oii968anqexcpsb5e.PNG)
 
######about.html
![page 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24yfule1xovcs2zvt79r.PNG)
 
If you want, you can tag your homework to my [Instagram](https://www.instagram.com/modern_web_channel/). 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](https://www.youtube.com/c/modern_web?sub_confirmation=1).I create awesome web development tutorials. You can also watch tutorial on [Gradient Infinity loading animation](https://www.youtube.com/watch?v=89IFrt_Unj0)

Thanks For reading.