HTML Block and Inline Elements

Block Elements

The block elements appear on a screen as if they have a line break before and after them. They also take up the entire available width. Some of the block elements include, <h1> to <h6>, <article>, <aside>, <p>, <pre>, <ul>, <ol>, <address>, etc.

Example

Let us see an example of one of the block element <address>, <p>, <h3>, etc −

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<p>Click on the individual links to work on online compilers:</p>
<nav>
<a href="/compile_java_online.php">Java</a> |
<a href="/php_terminal_online.php">PHP</a> |
<a href="/online_jquery_editor.php">jQuery</a> |
<a href="/compile_c_online.php">C</a> |
<a href="/compile_cpp_online.php">C++</a> |
<a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have complier for <acronym title="JavaScript">JS</acronym> libraries.</p>
<address>
Contact us at <a href="mailto:[email protected]">admin</a>.<br>
4th Floor,<br>
Incor9 Building, <br>
Kavuri Hills, <br>
Madhapur, Hyderabad,<br>
Telangana 500081
</address>
</body>
</html>

This will produce the following output −

HTML Block and Inline Elements

Inline Elements

The Inline elements are different from the block elements since they won’t appear like a line break and can appear in sentences. Some of the examples of Inline elements are <a>, <abbr>, <button>, <code>, <em>, <i>, <textarea>, <time>, etc.

Example

Let us now see an example to implement inline elements <a> and <acronym> in HTML −

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>Compilers for Programming Languages and Web Technologies</h3>
<nav>
<a href="/compile_java_online.php">Java</a> |
<a href="/php_terminal_online.php">PHP</a> |
<a href="/online_jquery_editor.php">jQuery</a> |
<a href="/compile_c_online.php">C</a> |
<a href="/compile_cpp_online.php">C++</a> |
<a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>We also have complier for <acronym title="JavaScript">JS</acronym> libraries.</p>      
</body>
</html>

This will produce the following output −

Output

HTML Block and Inline Elements

Place the cursor on JS to display the title of the acronym −

HTML Block and Inline Elements