MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    Block-level elements

    HTML (Hypertext Markup Language) elements are usually "block-level" elements or "inline" elements. A block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.

    Browsers typically display the block-level element with a newline both before and after the element. 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.
    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.
    <audio> HTML5
    Audio player.
    <blockquote>
    Long ("block") quotation.
    <canvas> HTML5
    Drawing canvas.
    <dd>
    Definition description.
    <div>
    Document division.
    <dl>
    Definition list.
    <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).
    <main>
    Contains the central content unique to this document.
    <nav>
    Contains navigation links.
    <noscript>
    Content to use if scripting is not supported or turned off.
    <ol>
    Ordered list.
    <output> HTML5
    Form output.
    <p>
    Paragraph.
    <pre>
    Preformatted text.
    <section> HTML5
    Section of a web page.
    <table>
    Table.
    <tfoot>
    Table footer.
    <ul>
    Unordered list.
    <video> HTML5
    Video player.

    See also

    Document Tags and Contributors

    Last updated by: appsforartists,