7/11/20

HTML:- BLOCK AND INLINE ELEMENTS


In Html, every element has its default display value, depending on what type of element it is.

There are two types of display value are: -
1 Block Level Elements
2 Inline Level Elements 

Html Block-Level Elements

An Html Block-level elements are the elements that cover the whole width of the line. Whether you want to write in that element more or less.

Block-level elements always start from a new line. It creates the horizontal boundary block in the line.

Here is some example of block-level elements:-
  • <p> element
  • <h1> - <h6> element
  • <div> element
Let us see through an example

Example:-


<html>
<head>
    <title> Example of block & inline </title>
<style>
h2 { border:2px solid black;}
p  { border: 2px solid red; }
div{ border:2px solid blue; }
</style>
</head>
<body>
<h2> This is an Example </h2>
<p> of Block Level </p>
<div> Elements in Html </div>
</body>
</html>

Output:-



In the above example, we saw that in block-level elements, whether you write a little bit or more, the element covers the whole width of the window.

Here is the list of block-level elements:- 

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


Html Inline-Level Elements

Html inline-level elements are the element which does not require the entire width of the window. It neither start from a new line.

It will take up as much space as you would write inside this element.

Here is some example of inline-level elements.
  • <span> element
  • <em> element
  • <img> element
  • <a> element 
Let us see through an example

Example:-


 <html>
<head>
    <title> Example of block & inline </title>
<style>
span  { border:2px solid orange;}
code  { border: 2px solid yellow; }
em    { border:2px solid green; }
</style>
</head>
<body>
<span> This is an Example </span>
<code> of Block Level </code>
<em> Elements in Html </em>
</body>
</html>


Output:-


Here is the list of inline-level elements:-


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

So that it for today guys if you have any quarries related to this comment down. I hope you like the article and the Html series. Follow us on my social media handles. Keep visiting here for more computer knowledge.

Thanks for Visiting Here

Have a good day you all.

PEOPLE ALSO READ:- HTML TABLES:- Elements and Attributes
PEOPLE ALSO READ:- HTML LIST:- Ordered List, Unordered List, Description List

0 comments:

Post a Comment

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Blog Archive

Contact Form

Name

Email *

Message *

Mad About Computer. Powered by Blogger.