What Are HTML Block and Inline Elements?
In HTML, elements are categorized into **block** and **inline** elements based on their behavior and layout structure. Understanding the distinction is crucial for creating well-structured and visually appealing web pages.
HTML Block Elements
**Block elements** occupy the entire width of their container and start on a new line. These elements are typically used for structural purposes.
Examples of Block Elements:
<div><h2> to <h6><p><section><header> and <footer>
Example Code:
<div>
<h2>Block Element Example</h2>
<p>This is a paragraph inside a div element.</p>
</div>
Output:
Block Element Example
This is a paragraph inside a div element.
HTML Inline Elements
**Inline elements** only take up as much width as necessary and do not start on a new line. These elements are often used for formatting purposes.
Examples of Inline Elements:
<span><a><strong><em><img>
Example Code:
<p>This is a <strong>bold</strong> word and this is a <span>highlighted</span> word.</p>
Output:
This is a bold word and this is a highlighted word.
All HTML Block-Level Elements
The following are all the block-level elements in HTML:
<address>,
<article>,
<aside>,
<blockquote>,
<details>,
<dialog>,
<div>,
<dl>,
<fieldset>,
<figcaption>,
<figure>,
<footer>,
<form>,
<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>,
<header>,
<hr>,
<main>,
<nav>,
<ol>,
<p>,
<pre>,
<section>,
<table>,
<ul>
HTML Inline Elements
The following are all the inline elements in HTML:
<a>,
<abbr>,
<b>,
<bdi>,
<bdo>,
<br>,
<cite>,
<code>,
<data>,
<dfn>,
<em>,
<i>,
<img>,
<input>,
<kbd>,
<label>,
<mark>,
<q>,
<s>,
<samp>,
<small>,
<span>,
<strong>,
<sub>,
<sup>,
<textarea>,
<time>,
<u>,
<var>,
<wbr>
Chapter Summary
- A block-level element always starts on a new line and takes up the full width available
- An inline element does not start on a new line and it only takes up as much width as necessary
- The
<div> element is a block-level and is often used as a container for other HTML elements - The
<span> element is an inline container used to mark up a part of a text, or a part of a document
<div> element is a block-level and is often used as a container for other HTML elements<span> element is an inline container used to mark up a part of a text, or a part of a documentStyling Block and Inline Elements
CSS allows you to modify the behavior of block and inline elements. For example, you can make an inline element behave like a block element using the display property.
Example:
span {
display: block;
background-color: yellow;
}