HTML Blocks and Inline Elements
Every HTML element can be categorized into either (1) Block OR (2) Inline.
Block-level Elements
These elements always start on a new line with full width.Examples of block level elements are: <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <ul>, <ol>, <dl>, <pre>, <hr />, <form>, and <address>.
Inline Elements
Inline element does not start with new line and takes width as per content inside.Examples: <span>, <b>, <strong>, <i>, <u>, <em>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, etc.
HTML Grouping Tags
In HTML <div> and <span> tags are frequently used to group various other HTML tags.
<div> Element
<div> element is the important blog tag and often used as a container for other HTML tags. It can also be used to create webpage layouts like header, footer and sidebar.
Example:
<head><title>Div Example</title></head>
<body>
<div style=”background:yellow”>
<h2>Computer</h2>
<p>Computer is an electronic device.</p>
</div>
<div style=”background:cyan”>
<h2>Mouse</h2>
<p>Mouse is a input device.</p>
</div>
</body>
</html>
Output:
<span> Element
<span> is an inline html element and often used to group inline elements in HTML.
Example:
<head><title>Span Example</title></head>
<body>
<p><span style=”color:blue”>Mouse</span> is a input device and <span style=”color:red”>printer</span> is a output device.</p>
</body>
</html>
Output:
About Author
bestonetechnologies
I am a software developer.
