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.