Understanding HTML Tags and Elements

HTML is the skeleton or core structure of every website on the internet. Without HTML there is no website or web app. HTML, or Hyper Text Markup Language, is the language of the internet used to transfer structured, useful, and semantic information.

Today we will understand what HTML is and how we can write our own HTML webpage.

HTML Tags

Tags are small building blocks of HTML that are written in a specific order to form a complete HTML document. Each tag has its own purpose. A tag acts like a wrapper or box that holds content or information. Depending on how we want to present information on the screen, we choose an appropriate tag.

Tag and Element

If a tag is a wrapper around content, then the combination of the tag and the content inside it is called an element. A tag is just the wrapper itself, while an element is the complete unit with content inside a tag.

Common Tags

Below are some of the most commonly used basic tags.

• <html> -This is the root of an HTML document. Every HTML page starts with this tag. It tells the browser that everything written inside it should be treated as HTML code.

•   <html>
    </html>
  

• <head>-This tag contains meta information about the page, like the title or other details that are not shown directly on the webpage. It is placed inside the <html> tag.

•   <head>
    </head>
  

• <body> -The body tag is used to group all the content of an HTML document. Almost all visible content of a webpage is written inside the <body> tag.

•   <body>
    </body>
  

• <div>- A div is a generic container used to group elements together. To keep things organized, we place a main container <div> inside the body.

•   <html>
      <head>
        <title>Cohort 2026</title>
      </head>
      <body>
        <div class="main-container">
        </div>
      </body>
    </html>
  

• <h1> to <h6> - Heading tags are used to give titles to content. <h1> is the largest heading and <h6> is the smallest.

    <html>
      <head>
        <title>Cohort 2026</title>
      </head>
      <body>
        <div class="main-container">
          <h1>Hello and Welcome</h1>
        </div>
      </body>
    </html>
  

• <p>- Paragraph tags are used for normal text content.

    <html>
      <head>
        <title>Cohort 2026</title>
      </head>
      <body>
        <div class="main-container">
          <h1>Hello and Welcome</h1>
          <p>I write about coding, systems, and things I learn along the way.</p>
        </div>
      </body>
    </html>
  

• <span> -The span tag is used to style small parts of text without breaking the line.

    <html>
      <head>
        <title>Cohort 2026</title>
      </head>
      <body>
        <div class="main-container">
          <h1>Hello and Welcome</h1>
          <p>I write about <span>coding</span>, systems, and things I learn.</p>
        </div>
      </body>
    </html>
  

  <a> - The anchor tag is used to create links.

    <html>
      <head>
        <title>Cohort 2026</title>
      </head>
      <body>
        <div class="main-container">
          <h1>Hello and Welcome</h1>
          <p>I write about <span style="color: blue;">coding</span>, systems, and things I learn.</p>
  
          <a href="https://example.com">Visit my personal website</a>
        </div>
      </body>
    </html>
  

Conclusion

HTML is the skeleton of the web. It uses tags to define elements, and understanding these basic tags, elements, and their behavior is the first step toward becoming a web developer. Once we understand HTML clearly, learning CSS and JavaScript becomes much more easier.