HTML Block & Inline Elements Tutorial
HTML elements are categorized as either block-level or inline elements. Block-level elements always start on a new line and take up the full width available, while inline elements do not start on a new line and only take up as much width as necessary.
Block Elements
Block elements are used to create the structure of a web page. Some common block-level elements include:
<div><p><h1> - <h6><ul><ol><table>
Here is an example of a <div> element:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>Inline Elements
Inline elements are used to style text within block-level elements. Some common inline elements include:
<span><strong><em><a><img>
Here is an example of using the <em> element to italicize text:
<p>
This is an example of using the <em>element</em>.
</p>Using CSS you can change the behavior of and inline to block an vice versa. But it should be exceptions, consistency is key.
Summary
| Block Elements | Inline Elements |
|---|---|
<div> |
<span> |
<p> |
<strong> |
<h1> - <h6> |
<em> |
<ul> |
<a> |
<ol> |
<img> |
<table> |