Inline and Block elements in HTML:

Inline and Block elements in HTML:
There are two types of display values in HTML:

Inline elements
Block elements

Inline elements
Here is an inline element it generally takes as much width as essential needed and it doesn’t start with a fresh line. With the help of an example, you will understand more better.

Example:

<!DOCTYPE html>
<html>
<body>

<p>This is a content related to <span style="border: 1px solid black">Inline element</span> which is carry forward here.</p>

<p>This is written in paragraph tag.</p>

</body>
</html>

Some inline 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>

Block-level elements
This element is quite different from the inline element as it takes full width available and it always starts with a new line.

Example:

<!DOCTYPE html>
<html>
<body>

<div style="border: 1px solid black">Hello folks</div>

<p>This is block level elements</p>

</body>
</html>

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>

Web Designing | HTML for Beginners

Curriculum

Inline and Block elements in HTML:

Modal title