Horje
What is HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.


Example of HTML Block-level Elements

Two commonly used block elements are: <p> and <div>. The <p> element defines a paragraph in an HTML document. The <div> element defines a division or a section in an HTML document.
index.html
Example: HTML
<!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>

Output should be:

Example of HTML Block-level Elements

Example of HTML Inline Elements

An inline element does not start on a new line. An inline element only takes up as much width as necessary.
index.html
Example: HTML
<!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>

Output should be:

Example of HTML Inline Elements






Related Articles
What is HTML Block and Inline Elements HTML Block and Inline Elements
How to create HTML Block-level Elements HTML Block and Inline Elements
How to create HTML Inline Elements HTML Block and Inline Elements
How to crearte The <div> Element in HTML HTML Block and Inline Elements
How to create The <span> Element in HTML HTML Block and Inline Elements

Single Articles
Example of HTML Block-level ElementsHTML Block and Inline Elements
Example of HTML Inline ElementsHTML Block and Inline Elements

Read Full:
HTML Block and Inline Elements
Category:
Web Tutorial
Sub Category:
HTML Block and Inline Elements
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
23



Share on: