Skip to content

Linear and block elements

HTML tags can be divided into two types, distinguished by the amount of space taken by default on the displayed web page. These types are:

  • linear elements
  • block elements.

Line elements

Line elements are those that behave like lines of text. They take up as much space as the content they contain. Also:

  • Unable to specify their dimensions using the width and height properties.
  • Top and bottom margin cannot be specified.
  • Each line element is lined up next to the other.

Examples of line tags include <a> and <span>.

<section>
    <p>
        <span>This is some text</span>
        <span>This is even more text</span>
    </p>

    <p>
        <a href="https://sdacademy.dev/">SDA</a>
        <a href="https://sdacademy.dev/contact/">CONTACT</a>
    </p>
</section>

linear_elements

Block elements

Block elements are those that display blocks on the page. By default, they are 100% of the width of their parent. Also:

  • You can specify their dimensions with the width andheight properties.
  • You can specify all (four) margins.
  • Each block element is placed one below the other.

Examples of block tags are, for example, <p>, <div>.

<section>
    <div>
        <p>First Paragraph</p>
        <p>Second paragraph</p>
    </div>
    <div>
        <p>p in second div</p>
        <p>second p in second div</p>
    </div>
</section>

block_elements