Block Level & Inline Elements in HTML - Web development

Block Level Elements

                                       Block Level elements start from new line and will take full width how much available. Div, P, h1 to h6 headings, form, pre, blockquote are example of block level elements. 

Here we will see in example block level elements div, pre, blockquote elements. Other elements we had seen in before pages. 

Pre element is used to display in pre formatted text. There 

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;

} 

this is will be pre defined property of pre elements.

Browser display the Blockquote as intended text.

Example :

<div>
<pre>
This is Preformated text

</pre>

<blockquote style="background-color:lightblue;">Pre elements are used 

to display in pre formated text and blockquote used to display as 

intended text. you can see here the example of both pre and blockquote 

elements clearly. Intended text are like bulleted text. We are using 

blockquotes for text in intended block.</blockquote>
</pre>
</div>

Output of the above code in HTML will be like below:

Inline elements

<span>, <a>, <img> elements are inline elements. These are not started with new line. It will start where we will put the code.

example:
Hi
<span style="color:blue">Span elements example here</span></pre>
Please check this


In the above example "Hi span elements example here please check this" will come in one line without new line. Please see the below output. 

Thank you for reading our blog! Have a nice day friends. Will meet in next page to learn HTML more.