DEV Community

loading...
Cover image for Learn web development 02 - HTML Font tags

Learn web development 02 - HTML Font tags

Modern Web
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
・4 min read

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>
Enter fullscreen mode Exit fullscreen mode
Output

Capture

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>
Enter fullscreen mode Exit fullscreen mode
Output

Capture-2

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.

<p>this is a very long long paragraphhhhhhhhhhhhh.</p>
Enter fullscreen mode Exit fullscreen mode

output

para

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>
Enter fullscreen mode Exit fullscreen mode

<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

wrong.
<b><i><u>This is wrong</b></i></u>

right.

<b><i><u>This is right</u></i></b>
Output

Capture-3

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.
->
Enter fullscreen mode Exit fullscreen mode

For example

home.html

page1

about.html

page 2

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.

Discussion (2)

Collapse
kunaal438 profile image
Modern Web Author • Edited

I am doing this series for beginners. This series will teach the concepts from zero to hero. So that you can make awesome things as I make without watching any tutorial. You can see my designs. If you want to make those without any tutorial, this series is everything.☺️☺️