✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

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

    Hello Friends

    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 ❯