Block elements are normally displayed without starting a new line.

New Page

online items

In this article, we’ll look at row-level HTML elements and how they differ from block-level elements.

Historically, HTML ( Hypertext Markup Language ) elements were classified as “block-level” or “line-level” elements. Since this is a presentation feature, CSS currently specifies it in the feed layout.

Inline elements are those that occupy only the space enclosed by the tags that define the element, rather than interrupting the flow of content.

Note: An inline element does not start on a new line and is only as wide as needed.

Inline Elements vs Block Level Elements: A Demo

This is most easily demonstrated with a simple example. First, some simple CSS we’ll be using:

.highlight { background color: #ee3; } Copy to clipboard

On line

Let’s look at the following example that demonstrates an inline element:

<div> The following span is a <span class=”highlight”>inline element</span>; its background has been colored to show both the start and end of the inline element’s influence. </div> Copy to clipboard

In this example, the block-level <div> element contains text. Within this text is a <span> element, which is an inline element. Because the <span> element is inline, the paragraph correctly renders as a single, unbroken flow of text, like this:

body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background color: #ee3; }

block level

Now let’s change this <span> to a block-level element, like <p>:

<div> The following paragraph is a <p class=”highlight”>block-level element;</p> its background has been colored to show both the start and end of the element’s influence block level. </div> Copy to clipboard

body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background color: #ee3; }

Rendered using the same CSS as before, we get:

Look the difference? The <p> element totally changes the layout of the text, dividing it into three segments: the text before the <p>, then the text inside the <p>, and finally the text after the <p>.

Changing Item Levels

You can change the visual presentation of an element using the CSS display property. For example, by changing the display value from “inline” to “block”, you can tell the browser to render the element inline in a block box rather than an inline box, and vice versa. However, this will not change the item’s category and content model. For example, even if the span element display is changed to “block”, it still wouldn’t allow nesting a div element inside it.

conceptual differences

Briefly, here are the basic conceptual differences between inline and block-level elements:

Content model

Generally, inline items can only contain data and other inline items. An exception is the inline element which can contain block level elements such as div.

Note: Links that span multiple lines of block-level content create a poor or even unusable experience for some assistive technologies and should be avoided.

layout

By default, inline items do not force the start of a new line in the document flow. Block elements, on the other hand, usually cause a line break (although, as usual, this can be changed using CSS).

List of “online” articles

The following elements are inline by default (although inline and bulk elements are no longer defined in HTML 5, use content categories instead):

  • <a>
  • <br>
  • <acronym>
  • <audio> (if you have visible controls)
  • <b>
  • <bdi>
  • <bdo>
  • <large>
  • <br>
  • <button>
  • <canvas>
  • <quote>
  • <code>
  • <data>
  • <data list>
  • <del>
  • <dfn>
  • <em>
  • <integrate>
  • <i>
  • <iframe>
  • <picture>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <map>
  • <brand>
  • <meter>
  • <noscript>
  • <object>
  • <output>
  • <picture>
  • <progress>
  • <q>
  • <ruby>
  • <s>
  • <sample>
  • <script>
  • <select>
  • <location>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <top>
  • <svg>
  • <model>
  • <text box>
  • <time>
  • <i>
  • <tt>
  • <var>
  • <video>
  • <wbr>

See also

  • Block level elements
  • HTML element reference
  • display
  • Content Categories
  • Bulk and in-line design in normal flow

Found a problem with this page?

  • Edit on GitHub
  • Source on GitHub
  • Report an issue with this content on GitHub
  • Do you want to solve the problem yourself? Consult our contribution guide.

Last modified: September 14, 2022, by MDN Contributors


Video Block elements are normally displayed without starting a new line.

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…