Block-level and inline elements

How an element can be styled depends on its default, either as block-level (put on a new line to take the whole horizontal space, with a default width of 100 percent) or inline (sharing a line with other elements). We will point out various ways in which these types of elements behave differently.

Examples of block-level elements include:

  • the paragraph elementAn element consisting of text that forms a paragraph.
  • heading elementsAn element that gives a heading.
  • the division elementAn element used to group elements on different lines.
  • the table elementAn element for a table.
  • the ordered list elementAn element for an ordered list.
  • the unordered list elementAn element for an unordered list.
  • the list item elementAn element for an item in a list.

Examples of inline elements include:

  • the hyperlink elementAn element used to include a hyperlink.
  • the image elementAn element used to include an image.
  • the span elementAn element used to group elements that share a line.
  • the table data elementAn element for a data item in a table.
  • forms, which we will discuss later

Changing the default is also possible; for example, one might use inline to make list items appear horizontally, such as for a horizontal menu. The display property (display) can take values inline, block, inline-block (not discussed here), and none (which results in the element not being displayed).

It might seem strange to have a value that indicates that an element should not appear. This is of use when writing programs to change the appearance of a page: changing the value of the display property can be used to make an element appear or disappear. Another alternative is to use the visibility property (visibility) to make the content appear (value visible) or disappear (value hidden).

Optional enhancement

Although this course does not explain how to write programs to provide action for web pages, our course on Web programming does.