Prahlad Inala

HTML Tags in Depth

HTML Tags in Depth

Prahlad Inala's photo
Prahlad Inala
·

5 min read

Table of contents

What is HTML?

HTML Stands for HyperText Markup Language

HyperText Markup Language, or HTML, is the basic code that makes up the foundation of every website on the World Wide Web. HTML is used to mark up text and other page content and define how a web page is structured.

A web page is made up of lots of content—text, images, and even videos. Each of these pieces of content is marked up using HTML syntax which is a collection of words and symbols that can be understood by computer programs. HTML is also used to describe the structure of the page, defining each of the different sections it may have such as a header, content area, and footer.

  • The HTML is a Markup Language, But not a programming language

The total HTML is made up of tags, these tags consist of the content and inside the opening tags we can use some attributes

The attributes are the main key role in adding the functionality and even styling

HTML Tags that are the most important to create a basic structure

  1. <!DOCTYPE>
  2. <html></html>
  3. <head></head>
  4. <body></body>
  5. <div></div>
  6. <section></section>
  7. <header></header> nav
  8. <footer></footer>
  9. <img />
  10. <a></a>
  11. <h1></h1> to <h6></h6>
  12. <p></p>
  13. <b></b> or <strong></strong>
  14. <button></button>
  15. <ul></ul> and <li></li>
  16. <ol></ol> and <li></li>
  17. <form></form>
  18. <iframe></iframe>
  19. <input></input>
  20. <label></label>
  21. <select></select>
  22. <textarea></textarea>
  23. <style></style>
  24. <meta></meta>
  25. <script></script>
  26. <span></span>
  27. <small></small>
  28. <style></style>
  29. <table></table>
  30. <th></th>
  31. <td></td>
  32. <u></u>
  33. <sup></sup>
  34. <sub></sub>
  35. <video></video>
  36. <audio></audio>

Let's Discuss each in detail

1. <!DOCTYPE>

It is "information" to the browser about what document type to expect. Here <!DOCTYPE html> means it is a html5 file.

<!DOCTYPE html>

2. <html></html>

This tag is the beginning and ending of the HTML document. All the HTML tags are written inside this <html></html>

<html>
  /* All the HTML tags goes inside these tags */
</html>

3. <head></head>

In <head></head> tag, we define the title of a website, styling of the website, linking documents, meta data, script, and many more.

These are the following tags that can be used in <head></head> tag

  • <title>
  • <style>
  • <link>
  • <meta>
  • <script>
  • <noscript>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <title>Prahlad Inala Portfolio</title>
  </head>

4. <body></body>

This is the body of the entire Html document. It contains all the content of the HTML document such as heading, padding, images, links, videos, images and many more.

  <body>
    <div class="main-div">
      <nav>
        <img src="./images/logo.svg" alt="logo" />
        <div class="nav-items">
          <h5 class="nav-item">HOME</h5>
          <h5 class="nav-item">ABOUT</h5>
          <h5 class="nav-item">BLOG</h5>
          <h5 class="nav-item">CONTACT</h5>
        </div>
        <button class="signin-btn">SIGN IN</button>
      </nav>
   </div>
</body>

5. <div></div>

This <div> tag is a division or a section in an HTML document. It acts as a container for a group of HTML Elements.

<div class="header">
    <h1>Hello Users</h1>
    <p>div tag is a division or a section in an HTML document. It acts as a container for a group of HTML Elements.</p>
</div>

6. <section></section>

This <section> tag is also similar to <div>. But created to easily differentiate the containers.

This tag is newly introduced in HTML 5.

<section class="header">
    <h1>Hello Users</h1>
    <p>div tag is a division or a section in an HTML document. It acts as a container for a group of HTML Elements.</p>
</section>

7. <nav></nav>

This <nav> tag is also similar to <div>. But created to easily differentiate the nav section from other divs and sections.

This tag is newly introduced in HTML 5. 

   <nav>
        <img src="./images/logo.svg" alt="logo" />
        <div class="nav-items">
          <h5 class="nav-item">HOME</h5>
          <h5 class="nav-item">ABOUT</h5>
          <h5 class="nav-item">BLOG</h5>
          <h5 class="nav-item">CONTACT</h5>
        </div>
        <button class="signin-btn">SIGN IN</button>
   </nav>

8. <header></header>

This <header> tag is also similar to <div>. But created to easily differentiate the header section from other divs and sections.

This tag is newly introduced in HTML 5. 

<header class="header">
    <h1>Hello Users</h1>
    <p>div tag is a division or a section in an HTML document. It acts as a container for a group of HTML Elements.</p>
</header>

9. <footer></footer>

This <footer> tag is also similar to <div>. But created to easily differentiate the footer section from other divs and sections.

This tag is newly introduced in HTML 5. 

<footer class="header">
    <h1>Hello Users</h1>
    <p>div tag is a division or a section in an HTML document. It acts as a container for a group of HTML Elements.</p>
</footer>

10. <img />

This <img /> is used to display images on HTML document.

Attributes of <img /> tags

  • src - mandatory - used to define the location of the image
  • alt - recommended - this is the text that displays when the image URL or the path given is broken or does not exists.
  • width - optional - used to define the specific width of the image
  • height - optional - used to define the specific height of the image
<img src="./images/logo.svg" alt="logo" />

11. <a></a>

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address.

Attributes of <a></a> tags

  • href - mandatory - used to link to the specific URL or a path
  • download - optional - this attribute allows users to download a file.
  • target - optional - used to add special functionalities.
    • _blank - to open URL / Path in a new tab
    • _parent
    • _self - to open URL / Path in current tab (default)
    • _top
<a href="https://prahladinala.in" target="_blank">Prahlad Inala</a>

12. <h1></h1> to <h6></h6>

<h1>Heading 1 Tag</h1>
<h2>Heading 2 Tag</h2>
<h3>Heading 3 Tag</h3>
<h4>Heading 4 Tag</h4>
<h5>Heading 5 Tag</h5>
<h6>Heading 6 Tag</h6>

13. <p></p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

14 . <b></b> or <strong></strong>

<b>Prahlad Inala</b>
<strong>Prahlad Inala</strong>

15. <button></button>

<button class="learn-more-btn">LEARN MORE</button>

16. <ul></ul> and <li></li>

<ul>
  <li>Home</li>
  <li>About</li>
  <li>History</li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

17. <ol></ol> and <li></li>

<ol>
  <li>Home</li>
  <li>About</li>
  <li>History</li>
  <li>Blog</li>
  <li>Contact</li>
</ol>

Did you find this article valuable?

Support Prahlad Inala by becoming a sponsor. Any amount is appreciated!

HTML5CSSWeb DevelopmentLearn Code Onlineiwritecode