HTML Blocks

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Block and Inline Elements

Every HTML element consists of a default display value that depends on the type of element it is.

There are two display values: block and inline.

Block-level Elements

A block-level element is always started on a new line, and the browsers add some space (a margin) before and after the element automatically.

A block-level element always stretches up to the full width.

Two commonly used block elements are: <p> and <div>

  • The <p> element is used for defining the paragraph in an HTML document.
  • The <div> element is used for defining the division or a section in an HTML document.
  • The <p> element is a block-level element.
  • The <div> element is a block-level element.
				
					<!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:

Hello World

Hello World
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).

Inline Elements

An inline element is not started on a new line.

An inline element only takes up as much width as required.

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>

				
			

Output:

This is an inline span Hello World element inside a paragraph.

The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420