HTML is the standard markup language which is use to describe a structure of web page . In this blog , we will look at some basic but useful HTML tags which every beginner should know .
Heading Tag
Heading is use to define a headings of a page or we can say heading is use to divide your page content into readable chunks . There are 6 heading elements from h1 to h6 . H1 defines the most important heading and h6 defines the least important heading . We should use these headings carefully as it can improve SEO ( Search Engine Optimization ) of your webpage. It is denoted by
Output
Paragraph Tag
Paragraph tag is use whenever we want to add any paragraph. You might be thinking we can write anything without using paragraph so again paragraph tag will make your source code more presentable and moreover you can edit your css with paragraph tag.
If you want to insert Dummy text , so just write lorem and number of words you need to insert . For Example : lorem34 (if you need to insert 34 words)
Output
Anchor tag
A anchor tag is used to indicate a hyperlink which means you can also use URL of another page in your web page . You can use href which is the attribute of anchor tag to define the destination of link .
Output
It you click on the link , it will open tryhackme's website.
Image tag
As the name suggest, img tag is use to add a image in your HTML. What you have to do is just copy the image address of any image from Google and paste it inside img tag or you can also download the image in your system and paste the location of your image inside img tag.
Output
OL tag and Li tag
You can also create a ordered list with the help of OL tag. Just use OL tag and inside the OL tag use Li tag to create the elements of list .
Output
You can also define the OL tag's type
Output
By default the type is set to 1. You can search more about it's type on google
UL tag and Li tag
Just like OL tag which is use to create a ordered list, you can use UL tag to make a unordered list. Use UL tag and inside UL tag use Li to create the elements of list.
Output
You can also define the UL tag's type
Output
By default the type is set to circle . You can search more about it's type on google
Table tag , Th tag , Tr tag , Td tag
You can also create a table with the help of table tag . Tr tag is use to create a row of a table . Th tag is use to make a table header and Td tag is use to insert the data of the table
Output
You can add border in this table with the help of CSS . Moreover , there are many attributes of table tag , td tag , th tag and tr tag which you should know. You can search them on google
Div Tag
Div tag lets you divide your web page into sections. It does not effect your content but you can view the effect of div tag by inspect element. We can define a class or id name with div tag so that we can later use that class or id to customise our css.
Output
As you can see , every element is taking it's own space on web page . Note : press shift+ctrl+i for inspect element
Span tag
Span tag is an inline element which means it will take only required widh unlike paragraph tag . The advantage of Span tag is we can easily customise the css of the content which is written inside Span tag.
Output
As you can see , the span tag is taking only the required space but div tag use full width even if it requires only half width. This is the advantage of Span tag.
More tags
There are many tags like italic tag , bold tag , br tag and hr tag . I will show you the output of each tag one by one.
Italic tag (i tag): It will write your words in italics.
Output
Bold tag (b tag): It will convert your sentence into bold
Output
Br tag : It will break your sentence from wherever you used br tag
Output
Hr tag : It will create a horizontal line for you.
Output
Conclusion
Only reading any blog or watching any video won't make you master in anything. You need to practice more and more. Make mistakes and try to find the solution of your mistakes.
Keep learning and keep spreading knowledge.