Elementary HTML tags

Basics of HTML, this is our second chapter in the HTML which teaches you about the basic elementary tags which we normally use on a page.

Navneet Vyas
08 February 2018 | Navneet Vyas
   

Basics of HTML tags

In the previous post, we studied about what is HTML and how to create an HTML file and we also study the basic procedure or syntax to write an HTML code which you can see by clicking here.

Now in this post, we will study some Basics of HTML tags and we will briefly discuss the example which we took in the last post.

HTML Example

The above picture shows a basic skeleton to write an HTML page, which consists of a start tag, the content of the tag and then an end tag which looks like this

<tag_name> Content of the tag </tag_name>

For Example:

<h1>Hello, Internet!</h1>

We have already discussed about the following tags in the last post:

You may read that from there.

Now in the above picture, our first tag which is new for us is

Title

This tag is used to create the Title of your webpage which shows in the tabs of your web browser and it is used by this tag <title> tag and closed like this </title> for e.g.

<title> tag is placed inside the <head> section.

<!DOCTYPE html>
<html>
    <head> 
        <title>My Page</title>
    </head>
    <body>
    </body>
</html>

Copy this to your text editor and see the result on browser like this -

HTML title example

In this result, you can see that the title which you create in above code is created in the tabs and you can also place here an icon of your website which we discuss later.

Now we are moving to our next tag which is

Headings

In HTML the headings are created by these tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6> and close by these respective tags </h1>, </h2>, </h3>, </h4>, </h5> and </h6> these six tags are use to create heading in html here h1 tag is the first heading and other are the sub headings of html so the tag h1 is a largest text headings and other are the sub headings which are small from h1 and look like this

<html>
    <head> 
    </head>
    <body>
        <h1>This is First heading</h1>
        <h2>This is Second heading</h2>
        <h3>This is Third heading</h3>
        <h4>This is Fourth heading</h4>
        <h5>This is Fifth heading</h5>
        <h6>This is Sixth heading</h6>
    </body>
</html>

and the result is

HTML heading example

So you get the point all the headings are different in size as tag number increase then the size of text is decreased and Under these headings, the browser will give some spacing above and before the heading.

Paragraphs

A paragraph in HTML is created by this <p> tag and end by this tag </p> in between these tags you can write your paragraph and any text which you want to present on your HTML page and this is work like this-

Enter this copy this in your HTML page

<!DOCTYPE html>
<html>
    <head> 
    </head>
    <body>
        <p>This is an HTML Paragraph tag</p>
    </body>
</html>

You can see the result like this:

HTML paragraph example

So this is a paragraph where you can write your own paragraph and facts and you can also make multiple paragraphs in an HTML page like this.

<!DOCTYPE html>
<html>
    <head> 
    </head>
    <body>
        <p>This is an HTML Paragraph tag</p>
        <p>This is an another HTML Paragraphs</p>
        <p>You can enjoy it</p>
    </body>
</html>

HTML multiple paragraph example

One important point Browser automatically add some white space before and after a paragraph tags and don’t forget to close the paragraph with this tag </p>.

But this also creates a problem. When you want to write your code like this:

<!DOCTYPE html>
<html>
    <head> 
    </head>
    <body>
        <p>This is an HTML Paragraph tag.
           This is multiple paragraphs.
           You can enjoy.
        </p>
    </body>
</html>

result

HTML break problem

Here the problem is Enter Button newline space can’t be noted by the Browser every text which you write after entering new line space result in a single line. So to break the line in single paragraph tags you have to use break statement in between the text which is used like this <br> for e.g.

<!DOCTYPE html>
<html>
    <head> 
    </head>
    <body>
        <p>This is an HTML Paragraph tag.<br>
           This is multiple paragraphs.<br>
           You can enjoy it.
        </p>
    </body>
</html>

and the result would be

HTML break example

You can see the break tag use to jump on next line and you try the above code and see the result

<br> tag is a self-closing tag. You don’t need a </br>.

So this is all about the basic elements of HTML. In the next post, we study about some more concepts of HTML with their code and results.

If you are facing any issue, please comment down below and share as much as you like.

stay connected :)




       
outboxcraft logoOutboxcraft
Sitemap