HTML Introduction HTML Basic Structure Create an HTML Page HTML Elements Element Attributes HTML Heading HTML Paragraph HTML Links HTML Image HTML Lists HTML Forms HTML Tables HTML Audio HTML Video HTML Comments HTML CSS HTML Events HTML Canvas HTML Colors HTML Code Symbols

Elements in HTML

Last updated Apr 25, 2024

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

Document Structure:

<html>: Root element
<head>: Document metadata
<title>: Title of the document
<body>: Document body

Text Elements:

<p>: Paragraph
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings
<strong>: Strong emphasis (usually bold)
<em>: Emphasis (usually italic)

Links and Images:

<a>: Anchor (for links)
<img>: Image

Lists:

<ul>: Unordered list
<ol>: Ordered list
<li>: List item

Forms:

<form>: Form container
<input>: Input field
<button>: Button

Tables:

<table>: Table container
<tr>: Table row
<td>: Table cell (data)

Multimedia:

<audio>: Audio content
<video>: Video content

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.