HTML Block & Inline
Every HTML element, regardless of its type, has a default display value.
HTML Block & inline are the two display values that are used the most.
Block-level Elements
An element at the block level always begins on a new line, and browsers automatically leave a margin (space) before and after the element.
An element at the block level always occupies the entire width that is available, extending as far to the left and right as possible.
<p> and <div> are two block elements that are frequently utilized.
In an HTML document, a paragraph is defined by the <p> element.
In an HTML document, a division or section is defined by the <div> element.
The <p> element is a block-level element.
Example
<p>Hello World</p>
<div>Hello World</div>
Here are the block-level elements in HTML:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Inline Elements
A line segment that is inline does not begin on a new one.
An inline element only uses the minimum amount of width.
This paragraph contains a <span> element.
Example
<span>Hello World</span>
Here are the inline elements in HTML:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
The < div > Element
Other HTML elements are frequently contained within the <div> element.
Although style, class, and id are ubiquitous, the <div> element lacks any mandatory properties.
The <div> element can be used to style content blocks when combined with CSS:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>Paris</h2>
<p>Paris is the capital city of France. It is the most populous city in the France, with a metropolitan area of over 13 million inhabitants.</p>
</div>
You will learn more about the <div> element in the next chapter.
The < span > Element
An inline container for marking up a section of a text or a document is the <span> element.
style, class, and id are popular properties for the <span> element, but they are not necessary.
The <span> element can be used to style textual elements when combined with CSS:
Example
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
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
HTML Tags
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
HTML Block & Inline
block-level elements
inline elements
display value
paragraph
section
text formatting
web design
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML elements can be categorized into two main types: block-level elements and inline elements. Understanding the difference between these two is crucial for effective web design and layout.
Block-level elements are elements that take up the full width of their parent container and create a new line before and after the element. Examples of block-level elements include
,, and . These elements are typically used to structure the overall layout of a web page.On the other hand, inline elements only take up the space necessary for their content and do not create a new line. Inline elements are typically used for text formatting, such as, , , and . They are embedded within the flow of the text and do not disrupt the layout.The display property in CSS is used to control the type of box an HTML element generates. By default, block-level elements have a display value of “block,” while inline elements have a display value of “inline.” However, these values can be modified to change the behavior of the elements.Understanding the differences between block-level and inline elements is essential for web designers and developers to create well-structured and visually appealing web pages. Proper use of these elements can enhance the user experience and improve the overall organization and layout of the content.
HTML elements can be classified into two main categories: block-level elements and inline elements. Understanding the difference between these two types is crucial for effective web design and layout.
Block-level elements, such as
(paragraph),
(division), and
, occupy the full width of their parent container and start on a new line. These elements are typically used to structure the content and create visual separation between different sections of a web page.
On the other hand, inline elements, like, (anchor), and (image), only take up the space necessary for their content and do not start on a new line. These elements are typically used for text formatting, such as adding emphasis or creating hyperlinks.
The display property in CSS is used to control the behavior of HTML elements. Block-level elements have a default display value of “block,” while inline elements have a default display value of “inline.” Developers can modify these display values to achieve specific layout and design goals.
Understanding the distinction between block-level and inline elements is essential for web designers and developers. Proper use of these elements can lead to more semantically structured and visually appealing web pages, enhancing the overall user experience.
