In this article, we will learn about HTML block elements and inline elements along with their implementation through examples.
Each HTML element has a default display value, depending on what type of element is it. In HTML, there are two display values or basic categories i.e., Block elements and Inline elements.
Now, let's understand html block and inline elements with the help of following example;
<!DOCTYPE html><html>
<body>
<div>Answersjet</div>
Learn Programming and Tutorials with
<a href="https://www.answersjet.com/"
alt="Answersjet">Answersjet official</a> website for the articles on various Programming Language courses.
</body>
</html>
Output
Block-level Elements
In Html, block-level elements are those elements which always starts on a new line, and the browsers automatically add some space (margin) before and after these element. Block level elements extend to the left and right. It occupies the entire horizontal space of its parent element and the height is equal to the height of the content.
The <p> and <div> elements are an example of block-level elements where <p> element defines a paragraph on a webpage and <div> element defines a division or a section on a webpage.
In the following, we have mentioned some block-level elements in HTML;
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
The <div> element
The <div> element of html is frequently used as a container for other HTML elements. The <div> element has no required attributes. Style, class and id are common attributes used.
Now let's understand <div> element with the help of following example;
<!DOCTYPE html><html>
<title>Html Block-level Element</title>
<body>
<div>
<h1>Welcome to Answersjet</h1>
<h3>Answersjet is a India's most trusted website for learning basics of programming languages and tutorials.</h3>
</div>
</body>
</html>
Output
Inline Elements
The inline elements are those types of elements which doesn't start on a new line and inline element only takes up as much width as necessary instead the breaking flow of the content. In inline element can't contain a block-level element.
In the following, we have mentioned some block-level elements in HTML;
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
The <span> Element
The <span> element is used as inline container for text. Simply we can say that, the <span> element is used to mark up a text of the document. There no attributes required by the <span> element but commonly used attributes are Id, class and style.
Now let's understand the <span> element with the help of following example;
<!DOCTYPE html><html>
<head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<!-- Span element. -->
<h1>Learn
<span style="color: red">HTML</span>
Tutorials
</h1>
</body>
</html>
Output
Conclusion
Above we have discussed about HTML block elements and inline elements along with their implementation through examples. Each HTML element has a default display value, depending on what type of element it is. In HTML, there are two display values or basic categories i.e., Block elements and Inline elements.