Inline Elements και Block Elements σε HTML - Εξηγείται

Αποκλεισμός και ενσωματωμένα στοιχεία

Ας καταλάβουμε στοιχεία μπλοκ και ενσωματωμένα χρησιμοποιώντας τα παρακάτω παραδείγματα:

Δείγμα κώδικα με έξοδο:

Έξοδος μπλοκ

Στοιχείο επιπέδου μπλοκ:

Ένα στοιχείο επιπέδου μπλοκ καταλαμβάνει ολόκληρο το χώρο του γονέα (κοντέινερ) όπως και

Note that both and

start from a new line each time, forming a block-like structure. Block-level elements begin on new lines.

Common block-level elements are ,

,,,, etc.

Inline Element:

Inline as the name says “included as a part of the main text and not as a separate section”. Inline elements occupy the space as needed within the space defined by the main element. Unlike block-level elements, they do not begin on new lines.

Some of the inline elements are ,,,,,, etc.

Code Sample with Output:

Inline Output

Note : Block-level elements may contain other block-level elements or inline elements. Inline elements cannot contain block-level elements.

Changes In HTML5

While an understanding of block and inline elements is still relevant, you should be aware that these terms were defined in prior versions of the HTML specification.

In HTML5, a more complex set of “content categories” replaces block-level and inline elements. Block-level elements are largely placed in the “flow content” category in HTML5, while inline elements correspond to the “phrasing content” category.

For more information on the new content categories in HTML5, including flow content and phrasing content, refer to the Content categories page on the Mozilla Developer Network.

Read more about HTML here.