HTML Elements

📚 Lesson 4 of 25 • 🕑 10 min read • Beginner

What is an HTML Element?

An HTML element is made up of a start tag, content, and an end tag:

HTML

<h1>Welcome to My Site</h1>
<!-- start tag ^^^      ^^^ end tag -->
<!-- content: "Welcome to My Site" -->

Block vs Inline Elements

HTML elements are either block-level or inline:

Block Elements

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

HTML

<h1>Heading</h1>       <!-- h1 to h6 -->
<p>Paragraph</p>     <!-- paragraph -->
<div>Container</div> <!-- generic container -->
<ul>, <ol>, <li>   <!-- lists -->
<table>             <!-- table -->
<form>              <!-- form -->

Inline Elements

Inline elements sit within text and only take up as much width as needed:

HTML

<span>highlighted text</span>
<a href="#">link</a>
<strong>bold text</strong>
<em>italic text</em>
<img src="img.jpg">
<br>  <input>  <button>

Nesting Elements

Elements can be placed inside other elements — this is called nesting. The inner element must be closed before the outer one:

HTML

<!-- CORRECT nesting -->
<p>Visit <a href="https://example.com">our website</a> today.</p>

<!-- WRONG — tags overlap -->
<p>Visit <a href="#">our site</p></a>  <!-- ❌ -->

Empty Elements

Some elements have no content and no closing tag. They are called void elements:

HTML

<br>          <!-- line break -->
<hr>          <!-- horizontal rule -->
<img src="photo.jpg" alt="Photo">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

Most Common HTML Elements

HTML

<!-- Headings (h1 is biggest, h6 is smallest) -->
<h1>Main Title</h1>
<h2>Section</h2>
<h3>Sub-section</h3>

<!-- Text -->
<p>A paragraph of text.</p>
<strong>Bold/Important text</strong>
<em>Italic/Emphasized text</em>

<!-- Link -->
<a href="https://google.com">Go to Google</a>

<!-- Image -->
<img src="photo.jpg" alt="Description of photo" width="300">

<!-- Lists -->
<ul>            <!-- unordered (bullet) -->
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>            <!-- ordered (numbered) -->
  <li>First step</li>
  <li>Second step</li>
</ol>

<!-- Division (generic container) -->
<div class="box">
  <p>Content inside a div.</p>
</div>

← Your First Web Page Next: Attributes →