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 <p></p> 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>
<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
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.
Top comments (1)
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.☺️☺️