Understanding HTML tags & elements

HTML is the foundation of web development. It structures content on the web by using tags and elements. Here's a quick overview:

What are HTML Tags?

Tags are building blocks in HTML, that define how the content is displayed on the web page, tags usually come in pairs surrounded by angle brackets <>

<p>This is a paragraph.</p>

In this example

• <p> is the opening tag.

• </p> is the closing tag.

• The text "This is a paragraph." is the content

HTML Elements

This whole opening & closing tags + content <p> This is a Paragraph </p> called an HTML element

Void Tags

In HTML some tags are self-closing tags are called void tags like the image tag <img>

<img src="image.jpg" alt="Sample Image">

Some Common Tags in HTML

• Headings <h1> to <h6> h1 for largest heading h6 for smallest

• <p> tag for uses paragraphs

• <a> tags called anchor tag used for links

• <img> for images

• <div> uses as a container

• Lists

  • <ul> for unordered lists

  • <ol> for ordered lists

  • <li> for lists Items

• Tables

  • <table> tag for defining table body

  • tr for table row

  • <td> for table data

  • <th> table header

  •   <table>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
      </table>
    

Attributes in HTML

Attributes are specified within the opening tag and follow the format name="value"

<a href="https://example.com" target="_blank">Open Example</a>

• href: Specifies the link's destination

• target: Defines where to open the link (mostly open in new tab)

Nesting Elements

Elements can be nested inside other elements. Proper nesting ensures valid HTML

<div>
  <h1>Title</h1>
  <p>This is a paragraph.</p>
</div>

Proper nesting shows valid HTML Syntax Structure

That’s all Thanks for reading 😊