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
andheight
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>
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>