HTML Block and Inline Elements

In HTML, elements are categorized as either block-level elements or inline elements. These categories describe how elements behave in terms of layout and how they interact with other elements on the page.

Block-level elements:

Definition:

Block-level elements typically start on a new line and stretch across the full width of their containing element, creating a "block" of content
They create a structural division in the HTML document.

Example

            
<div>: A generic container used to group other elements.
<p>: Represents a paragraph.
<h1> to <h6>: Heading elements.
<ul>, <ol>, <li>: List elements.
<table>, <tr>, <td>: Table-related elements.
<form>: Represents an HTML form.

Inline elements:

Definition:

Inline elements do not start on a new line; they only take up as much width as necessary and do not force a new line to begin.
They typically flow within the content and do not create a structural division.

Example

            
<span>: A generic container used for inline content.
<a>: Represents a hyperlink.
<strong> and <em>: Used for strong and emphasized text, respectively.
<img>: Embeds images.
<br>: Represents a line break

You can click on above box to edit the code and run again.

Output

Here's an example that illustrates the difference between block-level and inline elements:

Example


<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>Block and Inline Elements Example<title>
<style>
  /* Styling for illustration purposes */
        div {
            border: 1px solid black;
            padding: 10px;
            margin-bottom: 10px;
        }
        span {
            border: 1px solid red;
            padding: 5px;
            margin-right: 5px;
        }
<style>
</head>
<body>
 
<div>This is a block-level div element.</div>
<span>This is an inline span element.</span>
<span>This is another inline span element.</span>

</body>
</html>

You can click on above box to edit the code and run again.