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.