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