Block and Inline level elements of HTML and XHTML

There are two types of element that are used within the body section:
Block-level (or Structural Elements) which push other elements above or below the current element. These types of elements can be repositioned using the positioning CSS properties: top, right, bottom and left which take a length (pixels, percentages, em's, ex's). position: relative or absolute or fixed. You can float and clear these elements too. Plus you can layer them using z-index. Such Block-level elements are headings, sections, paragraphs, lists, tables, noscript and form boxes.

The other type is Inline-level (or Textual Elements) which do not push other elements and text below or above itself and so can quite comfortably sit within normal text. Generally no Block like elements may be within any Inline elements but Inline elements can be within Block elements. These types of elements can not be repositioned, floating or layered. Such Inline-level elements are hyperlinks, scripts, linebreaks, emphasis, form controls and essentially images and objects.

Certain (X)HTML elements have specific elements that are allowed within them. Plus a few are spacial elements: in the flow of the webpage they are essentially inline elements. But they have the content and styling support of block-level elements. In CSS this is called inline-block. Such elements are images, objects, table data and table headings.

In strict flavours of HTML 4 and XHTML 1 you can't have text directly within the element but in Transitional flavours you can. But for as structured a document as possible use block-level elements directly within the body element.

In the list below, elements followed by a question mark (?) are optional.

Block-level / Structural Elements

  • h1 to h6
    Contains inline elements and text.
  • div
    Contains block and inline elements and text.
  • p
    Contains inline elements and text.
  • ul
    Contains li elements.
  • ol
    Contains li elements.
  • li
    Contains block and inline elements.
  • dl
    Contains dt and dd elements.
  • dt
    Contains inline elements and text.
  • dd
    Contains block and inline elements and text.
  • address
    Contains inline elements and text.
  • bockquote
    Contains block elements or script.
  • table
    Contains caption? and ( thead?, tbody, tfoot? ) or tr elements.
  • thead, tbody, tfoot Contains tr elements.
  • tr
    Contains th and td elements.
  • noscript
    Contains block elements.
  • form
    Contains block elements.
  • fieldset
    Contains legend and then block and inline elements only.

Inline-level / Textual Elements

  • span
    Contains inline elements and text.
  • em
    Contains inline elements and text.
  • strong
    Contains inline elements and text.
  • a
    Contains inline elements and text.
  • script
    Contains text only.
  • br
    Empty.
  • sup, sub
    Contains inline elements and text.
  • pre
    Contains inline elements and text.
  • label
    Contains inline elements and text.
  • input
    Empty.
  • select
    Contains optgroup or option elements.
  • optgroup
    Contains option elements.
  • option
    Contains text only.
  • textarea
    Contains text only.
  • code, var, q, kbd, samp, dfn, cite, abbr, acronym
    Contains inline elements and text.
  • legend
    Contains inline elements and text.

Special 'inline-block' elements:

  • img
    Empty.
  • object
    Contains param elements and for alternative content also contains block and inline elements and text after any param elements.
  • button
    Contains text and block and inline elements except a, form, fieldset and other form controls.
  • td, th
    Contains block and inline elements and text.


    • Bookmark and Share

    Submit a comment about this page












    I am available for freelance web design work in the Cambridge, UK area, outside normal working hours. If you are interested, please