HTML Elements

Introduction to HTML Elements

HTML elements are the building blocks of HTML pages. An element is defined by a start tag, some content, and an end tag. Elements can also have attributes that provide additional information about the element.

HTML elements are not the same as HTML tags. HTML tags are used to create HTML elements. For example, the <p> tag creates a paragraph element.

Anatomy of an HTML Element

A typical HTML element consists of:

Opening Tag

The name of the element, wrapped in opening and closing angle brackets: <tagname>

Content

The content of the element, which can include text and other HTML elements

Closing Tag

Same as the opening tag, but with a forward slash before the element name: </tagname>

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

Types of HTML Elements

Block-level Elements

Block-level elements start on a new line and take up the full width available. They create larger structures than inline elements.

<div>

A generic container for flow content

<p>

Represents a paragraph

<h1> to <h6>

Heading elements of different levels

<ul>, <ol>, <li>

Unordered lists, ordered lists, and list items

<div>
  <h1>This is a heading</h1>
  <p>This is a paragraph inside a div.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary. They can be nested inside block-level elements.

<span>

A generic inline container

<a>

Creates a hyperlink

<strong>, <em>

Emphasis elements for importance and stress

<img>

Embeds an image

<p>
  This is a paragraph with <span style="color: blue;">blue text</span> and a
  <a href="https://example.com">link to example.com</a>.
  <strong>This text is important</strong> and <em>this is emphasized</em>.
</p>
<p>Here's an image: <img src="image.jpg" alt="Description" /></p>

Void Elements

Void elements (also known as self-closing elements) don’t have content and don’t need a closing tag.

<img>

Embeds an image

<input>

Creates an input control

<br>

Produces a line break

<hr>

Creates a thematic break

<input type="text" placeholder="Enter your name" />
<br />
<img src="image.jpg" alt="Description" />
<hr />

Common HTML Elements

Document Structure Elements

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Text Content Elements

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text.</p>
<blockquote>This is a blockquote.</blockquote>
<pre>This is preformatted text.</pre>
<code>This is code.</code>

List Elements

<!-- Unordered list -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<!-- Description list -->
<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

Table Elements

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

Form Elements

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>
  
  <button type="submit">Submit</button>
</form>

Media Elements

<!-- Image -->
<img src="image.jpg" alt="Description of the image" width="300" height="200" />

<!-- Audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

<!-- Video -->
<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support the video element.
</video>

Nesting HTML Elements

HTML elements can be nested inside other elements, creating a hierarchical structure.

<div class="container">
  <h1>My Website</h1>
  <p>Welcome to my website. Here's some <strong>important</strong> information.</p>
  <div class="content">
    <h2>About Me</h2>
    <p>I am a <em>web developer</em> who loves <a href="#">HTML</a>.</p>
  </div>
</div>

HTML Element Best Practices

Use semantic elements whenever possible to improve accessibility and SEO
Close all elements properly to maintain valid HTML
Nest elements correctly to create a proper document structure
Use lowercase for element names for better readability and consistency
Include alternative content for media elements to improve accessibility

Modern HTML5 introduces many semantic elements like <header>, <footer>, <article>, <section>, and more. These elements provide meaning to your HTML structure and should be used instead of generic <div> elements when appropriate.

Browser Support

Most HTML elements are supported by all modern browsers. However, some newer HTML5 elements might not be fully supported in older browsers. Always check browser compatibility when using newer elements.

Internet Explorer has limited support for some HTML5 elements. If you need to support older browsers, consider using polyfills or fallback solutions.

Fundamentals

Advanced

Introduction to HTML Elements

Anatomy of an HTML Element

Types of HTML Elements

Block-level Elements

<div>

<p>

<h1> to <h6>

<ul>, <ol>, <li>

Inline Elements

<span>

<a>

<strong>, <em>

<img>

Void Elements

<img>

<input>

<br>

<hr>

Common HTML Elements

Document Structure Elements

Text Content Elements

List Elements

Table Elements

Form Elements

Media Elements

Nesting HTML Elements

HTML Element Best Practices

Browser Support

​Introduction to HTML Elements

​Anatomy of an HTML Element

​Types of HTML Elements

​Block-level Elements

<div>

<p>

<h1> to <h6>

<ul>, <ol>, <li>

​Inline Elements

<span>

<a>

<strong>, <em>

<img>

​Void Elements

<img>

<input>

<br>

<hr>

​Common HTML Elements

​Document Structure Elements

​Text Content Elements

​List Elements

​Table Elements

​Form Elements

​Media Elements

​Nesting HTML Elements

​HTML Element Best Practices

​Browser Support

Introduction to HTML Elements

Anatomy of an HTML Element

Types of HTML Elements

Block-level Elements

Inline Elements

Void Elements

Common HTML Elements

Document Structure Elements

Text Content Elements

List Elements

Table Elements

Form Elements

Media Elements

Nesting HTML Elements

HTML Element Best Practices

Browser Support