Home / HTML / Elements

HTML Elements

What are HTML Elements?

An HTML element is defined by a start tag, some content, and an end tag. The HTML element is everything from the start tag to the end tag.

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

Element Structure

HTML elements consist of three parts:

  1. Opening tag: Contains the element name wrapped in angle brackets
  2. Content: The actual content displayed on the page
  3. Closing tag: Same as opening tag but with a forward slash before the element name

Common HTML Elements

Block-Level Elements

Block-level elements start on a new line and take up the full width available:

Example
<div>This is a div element</div>
<p>This is a paragraph element</p>
<h1>This is a heading element</h1>
<ul>
    <li>List item</li>
</ul>

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary:

Example
<span>This is a span element</span>
<strong>This is bold text</strong>
<em>This is italic text</em>
<a href="#">This is a link</a>

Nested Elements

HTML elements can be nested inside other elements. This creates a parent-child relationship:

Example
<div>
    <p>This paragraph is nested inside a div.</p>
    <p>This is another paragraph in the same div.</p>
</div>

Empty Elements

Some elements don't have content and don't require a closing tag. These are called empty or void elements:

Example
<br>        <!-- Line break -->
<hr>        <!-- Horizontal rule -->
<img src="photo.jpg" alt="Photo">
<input type="text">

HTML5 Semantic Elements

HTML5 introduced semantic elements that clearly describe their meaning:

Example
<header>Header content</header>
<nav>Navigation links</nav>
<main>Main content</main>
<article>Article content</article>
<section>Section content</section>
<aside>Sidebar content</aside>
<footer>Footer content</footer>

Best Practices

← HTML CSS HTML Attributes →