Gli elementi HTML (Hypertext Markup Language) sono di solito elementi "block-level" o "inline". Un elemento a livello di blocco occupa l'intero spazio del suo elemento padre (contenitore), creando così un "blocco". Questo articolo aiuta a spiegare cosa significa.
I browser in genere visualizzano l'elemento a livello di blocco con una nuova riga sia prima che dopo l'elemento. Puoi visualizzarli come una pila di scatole.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
The following example demonstrates the block-level element's influence:
Block-level elements
HTML
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
CSS
p { background-color: #8ABB55; }
Usage
- Block-level elements may appear only within a
<body>
element.
Block-level vs. inline
There are a couple of key differences between block-level elements and inline elements:
- Formatting
- By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.
- Content model
- Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. The "block-level" category roughly corresponds to the category of flow content in HTML5, while "inline" corresponds to phrasing content, but there are additional categories.
Elements
The following is a complete list of all HTML block level elements (although "block-level" is not technically defined for elements that are new in HTML5).
<address>
- Contact information.
<article>
HTML5- Article content.
<aside>
HTML5- Aside content.
<blockquote>
- Long ("block") quotation.
<canvas>
HTML5- Drawing canvas.
<dd>
- Describes a term in a description list.
<div>
- Document division.
<dl>
- Description list.
<dt>
- Description list term.
<fieldset>
- Field set label.
<figcaption>
HTML5- Figure caption.
<figure>
HTML5- Groups media content with a caption (see
<figcaption>
). <footer>
HTML5- Section or page footer.
<form>
- Input form.
<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
- Heading levels 1-6.
<header>
HTML5- Section or page header.
<hgroup>
HTML5- Groups header information.
<hr>
- Horizontal rule (dividing line).
<li>
- List item.
<main>
- Contains the central content unique to this document.
<nav>
- Contains navigation links.