Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

HTML Main Tags

HTML Main Tags

All the contents of the page is written between the html tags.There is a starting tag like (<p>) and with the same ending tag like(</p>).


Like This

<tagName>Content</tagName>

Some HTML tags do not have an end tag.




  • <title></title>:It defines the title of your page.It must be placed within the <head> tag.


  • Example of title tag

    <title>This is the title of the Webpage.</title>



  • <style></style>:It is used to set the style of the html document.It is placed in the <head> tag as well as inside their respective tag.We will cover complete usage in HTML Style chapter.

  • Example of Style tag

    <! DOCTYPE html>
    <html>
     <head>
      <style>
       p
       {
        color:green;
        font-size:30px;
       }
      </style>
     </head>
     <body>
      <p>This is a simple paragraph</p>
     </body>
    </html>
    

    Result of Above Example

    This is a simple paragraph


    Code Explanation

  • In this example we have a paragraph and we want to style the paragraph.
  • We use style tag inside the head tag to style the paragraph.
  • We use "p" in the style to style all the paragraph present in the webpage.
  • We use color:green; to change the color paragraph to green.
  • We use font-size; to change the font size of the paragraph to 20px.
  • We have to use attributename(eg.color,font-size):value; this is how to do styling inside.
  • We use "px" px stands for pixels we can use "%" also.

  • For Complete Usage of Style go to HTML Style chapter.



  • <base>:It specifies the base URL/target for all relative URLs in a document.There can be at maximum one <base> tag in a document, and it must be inside the <head> tag. And It Does not have end tag.

  • Example of base

    <html>
    <head>
    <base href="www.somewebsite.com" target="_blank">
    </head>
    <body>
    <p>This is a base example</p>
    </body>
    </html>
    

    Attributes of base:

  • href:Specifies the base URL for all relative URLs in the page.
  • target:Specifies the default target for all hyperlinks and forms in the page target value can be _blank , _parent , _self , _top , framename.



  • <link>:It is used for defining a link to an external document.It is placed in the <head> tag.It does not have end tag.

  • Example of link

    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    

    Attributes of link

  • charset:It determines the character encoding of the linked document.
  • href:It determines location of the linked document.
  • media:It determines on what device the linked document will be displayed.
  • rel:It determines relationship between the current document and the linked document.



  • <meta>:It is used to provide meta information of a webpage such as keywords , description , revisited ,    refresh, cookie , author , content-type.It does not have end tag.It is placed in the <head> tag.

  • Example of meta

    <head>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web Programming tutorials">
    <meta name="keywords" content="HTML,CSS,JavaScript,Jquery,PHP,MySql">
    </head>
    

    Code Explanation

  • meta name="description":It defines the description of the webpage and the content value is the description
  • meta name="keywords":It defines the keywords used to search your webpage and the content value is the keywords.

  • Attributes of meta

  • charset:Defines the encoding for the HTML document
  • content:Holds the value of the attributes
  • http-equiv:Provides an HTTP header for the information/value of the content attribute
  • name:Name for the metadata



  • <script></script>:It is used to write and insert the script like(javascript) in the webpage.It is placed in the <head> tag.We will cover complete usage in HTML Javascript chapter.

  • Example of script

    <head>
    <script>
    document.getElementById("example").innerHTML = "Hello";
    </script>
    </head>
    

    Code Explanation

  • document means the complete webpage
  • It takes the element whose id is example and change its tag content to "Hello".

  • You will learn more in HTML JavaScript Chapter.



  • <noscript></noscript>:It is used to tell the browser to display alternate text when the browser does not support scripting.

  • Example of noscript

    <head>
    <script>
    document.getElementById("example").innerHTML="Hello";
    </script>
    <noscript>
    document.getElementById("example").innerHTML="Your browser does not support script";
    </noscript>
    </head>
    

    Code Explanation

  • document means the complete webpage
  • It takes the element whose id is example and if the browser does not support script then change its tag content to "Your browser does not support script".

  • You will learn more in HTML JavaScript Chapter.



  • <div></div>:It is for dividing your web page content into containers.

  • Example of div

    <html>
    <head>
    </head>
    <body>
    <div>
    <p>This is the example of division(div) tag.It divides the webpage into container.</p>
    </div>
    </body>
    </html>
    



  • <h1-h6></h1-h6>:It defines the heading in the webpage <h1> is the biggest heading and size reduces upto <h6> which is the smallest heading.

  • Example of h1-h6

    <html>
    <body>
    <div>
    <h1>This is Heading 1</h1>
    <h2>This is Heading 2</h2>
    <h3>This is Heading 3</h3>
    <h4>This is Heading 4</h4>
    <h5>This is Heading 5</h5>
    <h6>This is Heading 6</h6>
    </div>
    </body>
    </html>
    

    Result of the above example

    This is Heading 1

    This is Heading 2

    This is Heading 3

    This is Heading 4

    This is Heading 5
    This is Heading 6



  • <p></p>:It define the paragraph in the webpage

  • Example of p tag

    <html>
    <body>
    <div>
    <p>This is a sample paragraph 1 to show how paragraph tag works.</p>
    <p>This is a sample paragraph 2 to show how paragraph tag works.</p>
    </div>
    </body>
    </html>
    

    Result of the above example

    This is a sample paragraph 1 to show how paragraph tag works.

    This is a sample paragraph 2 to show how paragraph tag works.




  • <a></a>:It us used to go to some other webpage by creating a link to another page.We will cover complete usage in HTML Links chapter.

  • Example of a tag

    <html>
    <body>
    <div>
    <a href="www.somewhere.com">Hello Friends<a>
    </div>
    </body>
    </html>
    

    Result of the above example


    We will cover complete usage of <a> in HTML Links Chapter.



  • <li></li>:It defines a list item it is used generally used under <ol> or <ul> tags.We will cover complete usage in HTML List chapter.

  • Example of li tag

    <html>
    <body>
    <div>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
    <li>List Item 6</li>
    </div>
    </body>
    </html>
    

    Result of the above example

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6

  • We will cover complete usage of <li> in HTML List Chapter.



  • <img>It is used to insert the image in the webpage.It does not have an end tag.We will cover complete usage in HTML Images chapter.

  • Example of img tag

    <html>
    <body>
    <div>
    <img src="example.jpg">
    </div>
    </body>
    </html>
    

    Result of the above example


    We will cover complete usage of <img> in HTML Images Chapter.

PreviousNext

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email