What are block level elements?

Question

Need some in detail explanation please.

Answer 1

Dear Dileepbc
let me explain these instead of memorizing some lists.

html is main root
which means it contains blocks and inline elements but not another html (iframe is not subject here)

in another good example is <p>; it is one paragraph and you can not put another paragraph in it but you can put many inline elements.

so in easy words if an element can not divide even if it is floating as one part it means block.

i hope it helped

Answer 2

Block is a display type, which determines how HTML elements will be arranged in relation to each other. Some elements like headings <h1>, paragraphs <p>, unordered lists <ul>, divs <div>, etc. are block level, this means each appear on its own line on the webpage.

Whereas elements like image <img> and anchor tags <a> are displayed inline, this means, they appear on the same line as their neighboring elements on the webpage.

I'll try to illustrate it for you 😊:

Block Inline
______________ ________________
| <h1> | | <img> <img> |
| <p> | | <a> <a> <a> |
| <ul> | | <img> <a> |
| <div> | | |
|______________| |________________|

Answer 3

@Melih that's a good explanation, although there could be some ambiguity, since div tags are block level elements and they CAN contain other block level elements like paragraphs, and even other divs.

I do think it's important to memorize the default state of elements, it will help you save time, at least if you really want to know how to position elements in your website. Specially because with CSS rules you can change the behavior of elements. For example, you can instruct an image to behave as a block-level element and facilitate scaling when coding responsive websites by setting it the property display: block;

Answer 4

This is a more detailed answer, I hope this helps.

the <div> element has a default CSS property that makes it a block element.
div{
display: block;
}

and inline elements like <a></a> the "anchor tag" has a default CSS property that makes it an inline element.
a {
display: inline;
text-decoration: underline;
}

and lastly the <p> tag or "paragraph" has a default CSS property too that makes it a block element.
p {
display: block;
margin-top: 8px;
margin-bottom: 8px;
}

Answer 5

please see link below relating to your question

https://www.sololearn.com/discuss/346549/?ref=app

https://www.sololearn.com/discuss/19736/?ref=app

Answer 6

yes @Paola but i explained or meaned it while giving example of html :) i was not trying to give all block level elements name like headers (h1-h6 ) and form tag. but more info always welcome :)

Answer 7

Block level elements start up a new line and take yp the full width of a page (like a block 😉). More info: https://www.w3schools.com/html/html_blocks.asp

List of block level elements: https://developer.mozilla.org/nl/docs/Web/HTML/Block-level_elements

Answer 8

I don't know it either well enough to make you understand

Answer 9

this is so helpfully thank you