Every element in HTML has display level. There are two types of display level which decide how it will display in browser.
- Block-level elements
- Inline elements
Block-level Elements
Block-level elements always occupy full width in the browser. So new elements always starts with new line in browser.
Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
background-color: pink;
}
</style>
</head>
<body>
<p>This is block level element and occupy full width.</p>
<p>This is also block level element and will start on new line.</p>
</body>
</html>
The below is a list of few block-level elements.
All headings <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Paragraph <p>
<nav>, <form>, <table>
<ul>, <ol>, <li>, <div> etc.
Paragraph <p>
<nav>, <form>, <table>
<ul>, <ol>, <li>, <div> etc.
Inline elements
Inline element doesn't starts from new line. It always start with left side of the document and only takes space as it require.
Below in example, span and a elements are inline elements.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span {
background-color: pink;
}
</style>
</head>
<body>
<div>This is block level element and <span>this is inline element.</span> The inline element <a href="#">starts from the left</a> side of element.</div>
</body>
</html>
The below is a list of few inline elements.
<span>
<a>, <button>, <img>,
<input>, <select>, <textarea>,
<b>, <i>, <em>, <code>, <strong>
<a>, <button>, <img>,
<input>, <select>, <textarea>,
<b>, <i>, <em>, <code>, <strong>
