What are block level elements? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 10

What are block level elements?

Need some in detail explanation please.

2nd Jun 2017, 8:46 PM
Dileepbc Dil
Dileepbc Dil - avatar
9 Answers
+ 5
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
2nd Jun 2017, 9:26 PM
Melih Melik Sonmez
Melih Melik Sonmez - avatar
+ 17
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> | | | |______________| |________________|
2nd Jun 2017, 9:23 PM
Pao
Pao - avatar
+ 16
@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;
2nd Jun 2017, 9:59 PM
Pao
Pao - avatar
+ 15
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; }
5th Jun 2017, 3:04 AM
Marco Macdon
Marco Macdon - avatar
2nd Jun 2017, 8:55 PM
Awele Omeligwe
Awele Omeligwe - avatar
+ 4
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 :)
2nd Jun 2017, 10:14 PM
Melih Melik Sonmez
Melih Melik Sonmez - avatar
+ 3
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
2nd Jun 2017, 8:56 PM
Maart
Maart - avatar
0
I don't know it either well enough to make you understand
5th Jun 2017, 12:44 PM
Nitesh Swarnakar
Nitesh Swarnakar - avatar
0
this is so helpfully thank you
28th Aug 2022, 10:26 AM
mesuli mkhize
mesuli mkhize - avatar