In the last article, we learned about the basics required to learn web designing. In this article, we are going to start learning about the basic HTML tags which form a basic foundation in learning web designing as a beginner.
Basic HTML Tags:
Heading tags are useful in writing Headings on your website. It should have an opening tag(h1) as well as closing tag(</h1).
Tag Structure: <h1> Type your content here </h1>
In HTML we can create 6 levels of headings. You can see the variations of font sizes varies from H1 to H6.
How to write HTML Heading in code:
<title>Basic HTML Heading</title>
<h1>This is h1 Tag example</h1>
<h2>This is h2 Tag example</h2>
<h3>This is h3 Tag example</h3>
<h4>This is h4 Tag example</h4>
<h5>This is h5 Tag example</h5>
<h6>This is h6 Tag example</h6>
All the heading tags have some default font sizes. These heading tags are very useful in SEO.
H1 will have the bigger font size.
H6 will have the smaller font size.
Practice 1: Write an HTML Heading tag with h1 tag with content as “My name is ____”
Practice 2: Write an HTML Heading tag with h5 tag with content as “My age is ____”
P Tag: It is called Paragraph Tag. It is useful when you want to write content in your code.
Tag Structure: <p> Type your content here </p>
By default paragraph tag (p) tag will have left alignment.
Attributes of ‘ p ‘ Tag:
align = “right” :
Structure: <p align =”right”> Type your text </p>
Example: <p align =”right”> I want right aligned text </p>
align = “center”
Structure: <p align =”center”> Type your text </p>
Example: <p align =”center”> I want center aligned text </p>
align = “justify”
Structure: <p align =”justify”> Type your text </p>
Example: <p align =”justify”> I want both left and right aligned text </p>
Practise : Write an HTML ‘p’ tag with content as “Write a paragraph about yourself of 2 lines”
: It stands for Non-breakable space. We can create space between letters by using this tag.
HTML comments are very useful to understand the code very easily and we can solve the bugs very fast.
HTML comments are ignored by browsers. It is just useful for us ( developers) to understand our coding in the future.
HTML comments are not visible to browsers.
Structure: <!– Type your comment here –>
Example: <p> This is a paragraph tag </p> <!– Comment here –>
Single Level Tags:
hr: hr tag name stands for Horizontal Ruler Tag. We can create Horizontal rule by using this tag. By default, its alignment is “center”. These are the single level tags which don’t need an end tag like </hr>. It is an empty element that has no attribute.
br tag: br tag is placed at the end of a block of text where you want to break a line, but do not want a space placed between the current and the next text block.
For example, you want two lines but want to break.
<p>My name is “Rohan”. My age is “24” </p>
For the above example normally the text will display in 1 line but if we using br tag it will break into two lines.
<p>My name is “Rohan”. <br>My age is “24” </p>
Text Formatting Tags:
Text formatting tags are the tags which are used to style text elements.
|b||Useful for bold text|
|em||Useful for emphasized text|
|i||Useful for italic text|
|strong||Useful for important text|
|small||Useful for smaller text|
|sub||Useful for subscripted text|
|sup||Useful for superscripted text|
|ins||Useful for inserted text|
|del||Useful for deleted text|
You can try all the above tags with 1 example to try and see the results in your browsers.
Over to you:
So in this article, you got to learn basic important tags required in HTML and text formatting tags. In the next article, you will learn how to style in HTML, Colors and other important tags.
If you found this article useful please do share with your friends because it can help them also in learning web designing for FREE.