There are many definitions about this topic. And as a developer it is a need to know more in this topic! so, let's see how important and useful to us!
HTML (HyperText Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. First let see about inline elements,
Inline elements:
An inline element does not start on a new line. An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>
</body>
</html>
Here is a list of common inline elements
<a>
<img>
<small>
<script>
<strong>
I have stacked up multiple inline elements together.
<a href="#">Link</a>
<img src="" />
<small>The text gets become smaller</small>
<script>src=""</script>
<strong>React</strong>
Block-level elements:
A Block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available .Two commonly used block elements are: <p> and <div>
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>
</body>
</html>
Here is a list of common Block elements. I have attached some common block elements together.
<h1 - h4>,<header> and <section>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<header>
<h1>A heading here</h1>
<p>Posted by John </p>
<p>Some additional information here</p>
</header>
<section>
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
And here are some useful references.
Full list of block level elements:[https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements]
Full list of inline level elements: including inline-block elements:(https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Elements)
Thank you for reading!
Top comments (0)