HTML Block and Inline Element
In this tutorial, the basic concepts of HTML block and Inline element are described.
Each HTML element is having a default display value based on its type. The two display values are — block and inline.
HTML Blocks
The “<div>“ tag defines a division or a block in an HTML document. Being a block-level element, it always begins with a new line and consumes the full browser width available.
This element has no required attributes, but style, class and id are common.
It is often used to group block-elements to format them with styles. See the following code:
<html>
<body>
<div style="border: 2px solid red; color: blue">
<h2>This is a header</h2>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Output:
Inline Element
An inline element does not begin with a new line and only consumes as much width as needed. The “<span>” tag being an inline element is frequently used as a container for some text.
Like “<div>” element, this element also has no required attributes, but style, class and id are common.
This tag can be used to style parts of the text. See the code below:
<html>
<body>
<h2>Useful Proverb</h2>
<p>Too err is <span style="color: blue">human</span> !</p>
</body>
</html>
Output:
