In HTML, you’ll mainly come across 2 types of HTML elements:
-
block elements like:
- paragraphs
<p> - lists: unordered (with bullet points)
<ul>or ordered lists (with numbers)<ol> - headings: from 1st level
<h1>to 6th level headings<h6> - articles
<article> - sections
<section> - long quotes
<blockquote>
- paragraphs
-
inline elements like:
- links
<a> - emphasised words
<em> - important words
<strong> - short quotes
<q> - abbreviations
<abbr>
- links
Block elements are meant to structure the main parts of your page, by dividing your content in coherent blocks.
Inline elements are meant to differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or few words.
<p>Have you seen this <a href="https://www.youtube.com">amazing video</a> on YouTube?</p>Opening and closing tags
All block-level elements have an opening and closing tags.
As a result, self-enclosing elements are inline elements, simply because their syntax don’t allow them to contain any other HTML element.
| Have opening and closing tags | Self-enclosing | |
|---|---|---|
| Block elements |
<p>
</p>
<ul>
</ul>
<ol>
</ol>
|
Impossible |
| Inline elements |
<a>
</a>
<strong>
</strong>
<em>
</em>
|
<input>
<br>
<img>
|
Other types of HTML elements
There are several exceptions to the block/inline elements, but the ones you will most often encounter are:
- list items for the
<li> - table, table rows, table cells for
<table>,<tr>and<td>respectively