TecX-ray

King of The Block

Adebola Andrew Modongho's photo
Adebola Andrew Modongho
·

2 min read

When it comes to the street of Html there are just two level to an element, Either you belong to the Block (Block level element) or you stay inline(inline element). If you belong to the block (block level element) then welcome to the clan of kings, where only one king rules a kingdom. What makes the block level element king, where exactly is the kingdom two kings cant rule, what are the elements that belongs to these clan, where does other element belongs to ? All these questions will help us understand the subject better.

King of the block

Is it that we are trying to follow a pattern of coding that why we write our code line by line, or we are trying to observe a set of rules. Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block". to tell you how powerful they are

The kingdom

" Browsers display them with a newline both before and after the element", they act in the manner of stack of boxes. In the real world a king rules over a kingdom and makes decision which other have to follow, only a king runs a kingdom the rest are his subordinate and have influence in a lesser domain. How does this principle relate to a block level element Two block level element can never stay on the same line, although it might happen in our code editor, but the most important thing is what happens when the code is run on the browser. The block element declared first, always push the other block element to the next line, making it clear that it has no place in that particular line. May be this principle could be the reason why mainly write our html code line by line.

List of some block level elements

  • address tag

  • article tag

  • aside tag
  • blockquote tag

  • details tag

  • dialog tag

  • dd tag
  • div tag
  • dl tag
  • dt tag
  • fieldset tag
  • figcaption tag
  • figure tag

  • footer tag

  • form tag

  • h1, h2, h3, h4, h5, h6 tags

  • header tag

  • hgroup tag

  • hr

  • li tag

  • main tag

  • nav tag

  • ol tag

  • p tag

  • pre tag
  • section tag
  • table tag
  • ul tag

Where does other element belong to

Apart from all these element mention and the new element introduce to html5, other element are categorize as inline level element.

block