Types of Tags and Button Tag in HTML

Types of Tags in HTML

The types of tags are used in the HTML documents is responsible to tell a web browsers to do something (follows the instructions) instead of just displaying texts. In an HTML documents, all tags name is differentiated from other simple texts.

Top 3 Types of Tags in HTML

An HTML documents are created using different types of tag.We have divided HTML tag based on the following classification:

1. Paired and Unpaired Tags

Following are the paired and unpaired tagd in HTML explained in details with the helps of exampled.

Paired Tags

An HTML Paired tags are start with an opening tags, which are the tags name enclosed insides the angle brackets, for examples, a paragraph opening tags are written as ‘p‘. The contents follow the opening tags which ends with an ending tags, which are the tags name starting with a forward slash, for examples, an ending paragraph tags are written as ‘/p‘.

Example #1:

<p> This texts are a paragraph . </p>

Output:

This texts are a paragraph .

Example #2:

Another examples of a paired tags are, italic and/or bold tag:

  <i> <b> This is a bold and italicized texts. </b> </i>

Output:

This is a bold and italicized texts.

Unpaired Tags

The Unpaired HTML tags do not requires a closing tags, an opening tags are sufficient in this types. Unpaired tag is sometime also named as Standalone Tag or Singular Tag since they do not require a companion tags.

Example:

<p> This is a paragraph </p>
   <hr>
   <i> <b> This is a bold and italicized text </b> </i>

Output:

Here the hr are the unpaired tags used to creates a horizontal line. In older version, you might see hr tags written as hr/ instead of hr. These tag is also called Empty Tags.

2. Utility-Based Tags

The HTML tags can be widely differentiated on the basises of their utilites, that are, on the basises of the purposes they serves.

Formatting Tags

The HTML tag that help us in the formatting of the text likes the size of the texts, font style, making a text bold, etc. Belows are a small programs using division for formatting the pages along with some other formatting tag.

Example:

  <body>
    <div class="container">
    <div class="row">
    <div class="col-25">
    <label for="email"><b>Name</b></label>
    </div>
    <div class="col-35">
    <input type="text" placeholder="First" name=
    "fname" required>
    </div>
    <div class="col-35">
    <input type="text" placeholder="Last" name=
    "lname" required>
    </div>
    </div>
    </div>
    </body>
            

Control Tags

Another category of tag that can be created are ‘Control Tags’. The Scripts tag, radio button or checkbox, the Form tag, etc form the control tag. These is the tag that is used in managing contents or managing scripts or libraries that is external.

Button Tag of HTML

This button elements are declared within the body tags. Why do we needs a button elements ? Yes, Normally when a user accesses a web pagex the most common thingx, he does clicking somewhere in a websitex which lead to the nexts URL Pages.

The contents texts pushed between the opening and closing tags are considered to be texts on the buttons. Action on the buttons is done using JavaScripts or by using them with a forms.

Syntax:

<button>
    // some stuff like content / image
    </button>

Attributes of HTML Button Tag

They are used as an ordinary buttons with the type=”attributes”. Even this elements are styled using CSS, with the properties to alter the change in the button tags. This properties is CSS font-family, Font-weights, Text-decorations, font-Styles. Colouring properties likes Background-colors and finally layout properties likes text-overflows, text-indents.

S.noAttribute NameDescriptionExample
1autofocusIt is considered as a Boolean attribute.&lt;button&gt; autofocus &lt;button&gt;
2disabledIt Creates a form.&lt;form&gt;…&lt;/form&gt;
3FormMaking a button non-clickable.&lt;button type=”button” disabled…&gt; &lt;/button&gt;
4nameIt specifies the button name used in the form element which is used by form inputs.&lt;button type= “submit” name =””
5typeIt specifies the type of the button been used. It has three default values submit, reset, text.&lt; button type= “……” &gt;
6onclickWhen a button is pressed it runs a small javascript code behind..&lt;button onclick =””&gt;

Example #1

Code:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title> HTML button tag Example</title>
    </head>
    <body>
    <h2>HTML button tag Example </h2>
    <form action="" method="">
    <p>
    Employee Name: <input type="text" name="Employee-Name">
    <button type="submit" value="Submit">Click</button>
    <button type="reset" value="Reset">Reset</button>
    </p>
    </form>
    </body>
    </html>

Output:

HTML button tag Example

HTML button tag Example

Employee Name:

Example #2

Code:

<!DOCTYPE html>
    <html>
    <head>
    <h3> <center> Gurukol Zone </center><h3>
    </head>
    <body>
    Java
    <button type="button">Add to the Java
    </button>
    <hr />
    React
    <button type="button" style="color: pink;">
      <b> React </b></button>
    <hr />
    HTML
    <button type="button" style="color: orange;">
      <b> HTML </b></button>
    <hr />
    Departure
    <button type="button" style="font: bold 12px
     Open Sans;">Norway </button><br />
    </body>
    </html>

Output:

Gurukol Zone

Java
React
HTML
Departure

Example #3

Code:

<html>
    <style>
    body {
    color: #000;
    height: 90vh;
    background: linear-gradient(-90deg, #a1c3d1 0%,
     #c48b9e 100%) no-repeat;
    text-align: center;
    }
    input {
    width: 280px;
    display: block;
    margin: 2rem auto;
    border: 3px solid #fbc7ff;
    padding: 7px;
    background: transparent;
    border-radius: 25px;
    outline: none;
    }
    ::placeholder {
    color: #00ced1;
    }
    .btn {
    background:#96f905;
    border: none;
    height: 3rem;
    border-radius: 20px;
    width: 220px;
    display: block;
    color: #96f905;
    outline: none;
    margin: 2rem auto;
    }
    </style>
    <body>
    <h1>HTML Form action Using Button</h1>
    <form action="/action_page.php" method=
    "get">
    <input type="text" name=" Full Name" 
    placeholder="Enter Full Name" class="btn">
    <input type="text" name=" Address" 
    placeholder="Enter Address" class="btn">
    <button type="press" value="Press"> Click 
    </button>
    </form>
    </body>
    </html

Output:

Example #4

Code:

<!DOCTYPE html>
    <html>
    <head>
    <title>HTML  On Click Button Demo</title>
    </head>
    <body>
    <h3> HTML  On Click Button Demo</h3>
    <button onclick="alert('Hi Welcome to Gurukol Zone')">
     Press me... </button>
    </body>
    </html>

Output:

HTML On Click Button Demo

HTML On Click Button Demo

Leave a Reply

Your email address will not be published. Required fields are marked *