HTML Elements

In HTML, an element is a fundamental building block that defines the structure and content of a web page. An element is composed of a start tag, an end tag, and content. When the start tag and end tag are combined, the complete element is formed.

Difference between Tag and Element

Tag and element are often used interchangeably, which can lead to confusion. Strictly speaking, a tag is the individual marker, while an element is the combination of the opening tag, content, and closing tag. For example, <p> is a tag, and <p>This is a paragraph</p> is an element.

Attributes

Each element has attributes that provide additional information about HTML elements and are always included in the opening tag. For example: <a href="https://tutorialsbuddy.com">Link to TutorialsBuddy</a> is an element, where href is an attribute, and https://tutorialsbuddy.com is its value.

Empty Elements

The elements which does not have end tags and contents are called empty elements. The <br> is an example of empty element.

Types of Elements in HTML

  1. Document Structure:
    • <html>: Root element
    • <head>: Document metadata
    • <title>: Title of the document
    • <body>: Document body
  2. Text Elements:
    • <p>: Paragraph
    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings
    • <strong>: Strong emphasis (usually bold)
    • <em>: Emphasis (usually italic)
  3. Links and Images:
    • <a>: Anchor (for links)
    • <img>: Image
  4. Lists:
    • <ul>: Unordered list
    • <ol>: Ordered list
    • <li>: List item
  5. Forms:
    • <form>: Form container
    • <input>: Input field
    • <button>: Button
  6. Tables:
    • <table>: Table container
    • <tr>: Table row
    • <td>: Table cell (data)
  7. Multimedia:
    • <audio>: Audio content
    • <video>: Video content
  8. Semantic Elements:
    • <header>, <footer>, <nav>, <article>, <section>, <aside>: Provide meaning to the structure.

Elements Example

Here's an example, demonstrating the use of several elements:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Web Page</h1>
    </header>
    <nav>
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
    <section>
      <h2>About Us</h2>
      <p>This is a brief description of our web page.</p>
    </section>
    <footer>
      <p>&copy; 2023 My Web Page</p>
    </footer>
  </body>
</html>

These are just some of the most commonly used HTML elements. There are more elements available, each serving specific purposes in structuring and styling web content.