HTML Block & Inline

Every HTML element has a default display value, depending on what type of element it is.

The two most common display values are block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

Example

Here are the block-level elements in HTML:

<address>

[](/tags/tag_article.asp) [](/tags/tag_aside.asp) [](/tags/tag_blockquote.asp) [](/tags/tag_canvas.asp) [](/tags/tag_dd.asp) [](/tags/tag_div.asp) [](/tags/tag_dl.asp) [](/tags/tag_dt.asp) [](/tags/tag_fieldset.asp) [](/tags/tag_figcaption.asp) [](/tags/tag_figure.asp) [](/tags/tag_footer.asp) [](/tags/tag_form.asp) - [](/tags/tag_header.asp) [](/tags/tag_hr.asp) [](/tags/tag_li.asp) [](/tags/tag_main.asp) [](/tags/tag_nav.asp) [](/tags/tag_noscript.asp) [](/tags/tag_ol.asp) [](/tags/tag_p.asp) [](/tags/tag_pre.asp) [](/tags/tag_section.asp) [](/tags/tag_table.asp) [](/tags/tag_tfoot.asp) [](/tags/tag_ul.asp) [](/tags/tag_video.asp)

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example

Here are the inline elements in HTML:

<a>

[](/tags/tag_abbr.asp) [](/tags/tag_acronym.asp) [](/tags/tag_b.asp) [](/tags/tag_bdo.asp) [](/tags/tag_big.asp) [](/tags/tag_br.asp) [](/tags/tag_button.asp) [](/tags/tag_cite.asp) [](/tags/tag_code.asp) [](/tags/tag_dfn.asp) [](/tags/tag_em.asp) [](/tags/tag_i.asp) [](/tags/tag_img.asp) [](/tags/tag_input.asp) [](/tags/tag_kbd.asp) [](/tags/tag_label.asp) [](/tags/tag_map.asp) [](/tags/tag_object.asp) [](/tags/tag_output.asp) [](/tags/tag_q.asp) [](/tags/tag_samp.asp) [](/tags/tag_script.asp) [](/tags/tag_select.asp) [](/tags/tag_small.asp) [](/tags/tag_span.asp) [](/tags/tag_strong.asp) [](/tags/tag_sub.asp) [](/tags/tag_sup.asp) [](/tags/tag_textarea.asp) [](/tags/tag_time.asp) [](/tags/tag_tt.asp) [](/tags/tag_var.asp)

Note: An inline element cannot contain a block-level element!

The Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example

You will learn more about the <div> element in the next chapter.

The Element

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example

Chapter Summary

• A block-level element always starts on a new line and takes up the full width available

• An inline element does not start on a new line and it only takes up as much width as necessary

• The <div> element is a block-level element and is often used as a container for other HTML elements

• The <span> element is an inline container used to mark up a part of a text, or a part of a document

HTML Tags

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Video: HTML Block and Inline