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


    <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>


    p { background-color: #8ABB55; }


    • 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:

    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.


    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).

    Contact information.
    <article> HTML5
    Article content.
    <aside> HTML5
    Aside content.
    <audio> HTML5
    Audio player.
    Long ("block") quotation.
    <canvas> HTML5
    Drawing canvas.
    Definition description.
    Document division.
    Definition list.
    Field set label.
    <figcaption> HTML5
    Figure caption.
    <figure> HTML5
    Groups media content with a caption (see <figcaption>).
    <footer> HTML5
    Section or page footer.
    Input form.
    <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    Heading levels 1-6.
    <header> HTML5
    Section or page header.
    <hgroup> HTML5
    Groups header information.
    Horizontal rule (dividing line).
    Contains the central content unique to this document.
    Contains navigation links.
    Content to use if scripting is not supported or turned off.
    Ordered list.
    <output> HTML5
    Form output.
    Preformatted text.
    <section> HTML5
    Section of a web page.
    Table footer.
    Unordered list.
    <video> HTML5
    Video player.

    See also

    Document Tags and Contributors

    Last updated by: appsforartists,