Getting Started With HTML And HTML Tags

What is HTML?

HTML [Hyper Text Markup Language] is a markup language used for developing web applications. HTML is the backbone of the web apps. HTML helps us to add texts, links, video, audio, images ,tables and many more.

Structure of HTML

Below is the code snippet of a basic structure of HTML

<!DOCTYPE html>
<head>
    <title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>: This is not a HTML tag but it indicates the browser what type of document it is.
<head>: Head tag indicates the header of HTML and in header we can declare metadata tags used for SEO and other purposes.
<title>: This tag indicates the title of the HTML Document.
<body>: Body tag indicates the main body/content of the HTML Document.

HTML Tags

HTML Tags helps the browser to understand what type of element is used in the web applications. HTML tags are defined by opening and closing tag as shown < >and are case sensitive.

Now let us dive into different tags used in HTML

Let us use below example to understand it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML Tags</title>
  </head>
  <body>

    <h1>This is Heading</h1>

    <p> This is a paragraph </p>

    <a href="https://www.google.com/">Google </a>

    <img src="img.png alt="image"/>

    <audio src="audio.mp3" controls> </audio>

    <video src="video.mp4" controls> </video>

    <b> Bolds the text</b>

    <i> Italics the text</i>

    <ul>
          <li> </li>
    </ul>

     <ol>
          <li> </li>
    </ol>

  </body>
</html>

Heading Tag : <h1> </h1>: It indicates heading in an HTML document. There are 6 Heading tags which h1,h2,h3,h4,h5,h6 tags which indicates different level of headings.
Paragraph Tag : <p> </p>: It defines a paragraph in an HTML document.
Anchor Tag : <a> </a>: It is used to create a link in HTML document.
Image Tag : <img> </img>: It is used to add image in HTML document.
Audio Tag : <audio> </audio>: It is used to inject audio in HTML document.
Video Tag : <video> </video>: It is used to inject video in HTML document.
Unorder List Tag : <ul> </ul>: It is used to create unorder list in HTML document.
Ordered List Tag : <ol> </ol>: It is used to create order list in HTML document.
Bold Tag : <b> </b>: When a text is placed between this tag it bolds the text.
Italic Tag : <i> </i>: When a text is placed between this tag it Italics the text.
Input Tag : <input></input>: It specifies an input field where the user can enter data.

Types of Input Tag :

text : This type of Input field is created to accept data from users like username etc..

<input type="text" placeholder="username">

password : This type of input field is created to enter the password and it is encrypted.

<input type="password" placeholder="Enter your password">

email : This type of input field accepts email from the user.

<input type="email"  placeholder="Enter your Email">

radio : This is used to create radio buttons from which a user can select one of them.

<input type="radio" name="Gender" >
<input type="radio" name="Gender" >

checkbox : This is used to create checkboxes where user can select multiple values.

<input type="checkbox" >
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

submit : This is used to submit a form. The value attribute indicates what action it is performing.

<input type="submit" value="Submit/Login">

That's all for today. We learned about major HTML tags and their uses. See you guys in the next one. ✌

Pavan V's Blog