HTML elements can be broadly classified into two categories: block-level elements and inline elements.
- Block-level Elements: Block-level elements are elements that take up the entire width of their parent element, and create a new line before and after the element. Examples of block-level elements include
<div>
,<p>
,<h1>-<h6>
,<ul>
,<ol>
,<li>
,<table>
,<form>
, etc. - Inline Elements: Inline elements are elements that only take up the necessary width of their content, and do not create a new line before or after the element. Examples of inline elements include
<span>
,<a>
,<strong>
,<em>
,<img>
,<input>
,<label>
,<select>
, etc.
Here’s an example to illustrate the difference between block-level and inline elements:
<!DOCTYPE html>
<html>
<head>
<title>Block and Inline Elements</title>
<style>
.block {
background-color: lightgray;
padding: 10px;
margin-bottom: 10px;
}
.inline {
background-color: lightblue;
padding: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="block">This is a block-level element</div>
<span class="inline">This is an inline element</span>
<span class="inline">This is another inline element</span>
<p class="block">This is another block-level element</p>
<a class="inline" href="#">This is an inline link</a>
<a class="inline" href="#">This is another inline link</a>
</body>
</html>
In this example, the <div>
and <p>
elements are block-level elements, while the <span>
and <a>
elements are inline elements. The CSS is used to style the elements differently based on their type. The block-level elements have a light gray background and a margin-bottom of 10 pixels, while the inline elements have a light blue background and a margin-right of 10 pixels.