HTML Tags
What is HTML?
You might already be knowing that HTML stands for Hyper Text Markup Language, but that explains nothing. Don't worry I will explain this in simple words to you. It is a way of giving instructions to the browser so that the content will be structured or displayed to the user as per your will or command. Although, HTML itself cannot design your webpage aesthetically and it will need CSS to do so. I have an analogy for you to understand it better- think HTML as the bones of a body, it gives structure to the body, and CSS is like skin, hair, nails, and color which gives aesthetic properties to the body.
There are some basic HTML tags which we will discuss in this post and as we move further with the course more HTML tags will be discussed. The first and most simple of the HTML tags is the 'p' tag or '<p>' tag. Let us understand it by an example:
example no. 1:
<p>I am learning to use HTML tags</p>
Type the above line in the text editor on your machine and save the file with '.html' extension. Now open the file by double-clicking. You will see the exact lines printed on the browser window. The 'p' tag is also known as the paragraph tag. All the tags in HTML are written/typed between the angle brackets, as in '<p>'. You may have also noticed that the displayed text is typed within a <p> and </p> tag. As per convention, tags are of two types one is the type you saw in the example above with an opening<p> and a closing</p> tag and there are some that are self-closing type and do not need a </> tag, which we will see in other examples.
** The closing tags start with an angle bracket or less than (<) followed by a forward-slash(/) with its type, here it is 'p' and ends with an angle bracket or greater than (>).
As the name suggests a 'p' tag is used to denote a paragraph. Now, open the file in the text editor by right-clicking and using the open-with menu from the drop-down. Below the already typed text, write this line - 'I am learning to use HTML tags', without the quotes as shown in the example below. Save the file and open it in the browser. What do you see? Both the lines are displayed exactly the same on the browser window one below the other. So, what is the use of <p> tags if the text is displayed exactly the same in the browser without the <p> tags?
example no. 2:
<p>I am learning to use HTML tags</p>
Let me explain the difference with the example no. 3- remove the tags <p> and </p> from the first line, save the file and open once again in the browser. Do you see the difference in the display style or the structure after removing the tags? Now, both the lines compress into a single line. In the example no.1 and 2, the line enclosed within the <p>...</p> tags was being formatted as a paragraph and that example, with the closing '</p>' tag the paragraph ended and the content after it was displayed in the next line.
example no. 3:
I am learning to use HTML tags
I am learning to use HTML tags
The next HTML tag or set of tags is the heading tags. Let's understand it with an example below.
example no. 4:
<h1>My first Web page</h1>
When you save and open the file in the browser, you'll see that the text is displayed in a style different than what is between the <p>..</p> tags. The text is displayed bigger in its font size. Apart from being displayed in large font size, the text between the <h1>....</h1> tags carries more importance than the other heading types or paragraphs. Conventionally there should only be one h1 on a web page. Generally, <h1></h1> is the Main Heading of the web page you are building. It helps the search engine web crawlers to categorize and display it in the search results.
There are in total 6 (six) HTML tags for heading and sub-headings from <h1>...</h1> to <h6>...<h6> and <h1>....</h1> carries the most importance. Try and experiment with the other heading types by yourself.
Similar to the <p> tags the heading tags also come with the property of displaying the content on a separate line. These tags (elements) which display the content on its own line are by default the block-level elements. We will learn about them in the course later.
That will be all for this post we will discuss more tags and the different block level and inline level elements in the next blog post. Till then you practice the heading and paragraph tags which are the foundation of any web page and are used more than any other tags. Visit this link HTML Tags and you can learn more about the different HTML tags with examples.
You might already be knowing that HTML stands for Hyper Text Markup Language, but that explains nothing. Don't worry I will explain this in simple words to you. It is a way of giving instructions to the browser so that the content will be structured or displayed to the user as per your will or command. Although, HTML itself cannot design your webpage aesthetically and it will need CSS to do so. I have an analogy for you to understand it better- think HTML as the bones of a body, it gives structure to the body, and CSS is like skin, hair, nails, and color which gives aesthetic properties to the body.
The paragraph <p>....</p> tag
There are some basic HTML tags which we will discuss in this post and as we move further with the course more HTML tags will be discussed. The first and most simple of the HTML tags is the 'p' tag or '<p>' tag. Let us understand it by an example:
example no. 1:
<p>I am learning to use HTML tags</p>
Type the above line in the text editor on your machine and save the file with '.html' extension. Now open the file by double-clicking. You will see the exact lines printed on the browser window. The 'p' tag is also known as the paragraph tag. All the tags in HTML are written/typed between the angle brackets, as in '<p>'. You may have also noticed that the displayed text is typed within a <p> and </p> tag. As per convention, tags are of two types one is the type you saw in the example above with an opening<p> and a closing</p> tag and there are some that are self-closing type and do not need a </> tag, which we will see in other examples.
** The closing tags start with an angle bracket or less than (<) followed by a forward-slash(/) with its type, here it is 'p' and ends with an angle bracket or greater than (>).
As the name suggests a 'p' tag is used to denote a paragraph. Now, open the file in the text editor by right-clicking and using the open-with menu from the drop-down. Below the already typed text, write this line - 'I am learning to use HTML tags', without the quotes as shown in the example below. Save the file and open it in the browser. What do you see? Both the lines are displayed exactly the same on the browser window one below the other. So, what is the use of <p> tags if the text is displayed exactly the same in the browser without the <p> tags?
example no. 2:
<p>I am learning to use HTML tags</p>
Let me explain the difference with the example no. 3- remove the tags <p> and </p> from the first line, save the file and open once again in the browser. Do you see the difference in the display style or the structure after removing the tags? Now, both the lines compress into a single line. In the example no.1 and 2, the line enclosed within the <p>...</p> tags was being formatted as a paragraph and that example, with the closing '</p>' tag the paragraph ended and the content after it was displayed in the next line.
example no. 3:
I am learning to use HTML tags
I am learning to use HTML tags
The heading <h1> to <h6> tag
The next HTML tag or set of tags is the heading tags. Let's understand it with an example below.
example no. 4:
<h1>My first Web page</h1>
When you save and open the file in the browser, you'll see that the text is displayed in a style different than what is between the <p>..</p> tags. The text is displayed bigger in its font size. Apart from being displayed in large font size, the text between the <h1>....</h1> tags carries more importance than the other heading types or paragraphs. Conventionally there should only be one h1 on a web page. Generally, <h1></h1> is the Main Heading of the web page you are building. It helps the search engine web crawlers to categorize and display it in the search results.
There are in total 6 (six) HTML tags for heading and sub-headings from <h1>...</h1> to <h6>...<h6> and <h1>....</h1> carries the most importance. Try and experiment with the other heading types by yourself.
Similar to the <p> tags the heading tags also come with the property of displaying the content on a separate line. These tags (elements) which display the content on its own line are by default the block-level elements. We will learn about them in the course later.
That will be all for this post we will discuss more tags and the different block level and inline level elements in the next blog post. Till then you practice the heading and paragraph tags which are the foundation of any web page and are used more than any other tags. Visit this link HTML Tags and you can learn more about the different HTML tags with examples.
Comments
Post a Comment