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

"+y+""}else{if(A==5){c+='
  • '+w+""+y+"
  • "}else{if(A==6){c+='
  • "+w+'
    '+u+""+y+"
  • "}else{c+='
  • "+w+"
  • "}}}}}s.innerHTML=c+=""+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]>

    0 comments:

    Post a Comment

    Like us on facebook

    blogger templatesblogger widgets

    Follow on Twitter

    Linkedin

    Categories

    Blog Archive

    Mad About Computer. Powered by Blogger.
    This site is in no way affiliated with or endorsed by specified business. It exists as a compendium of supporting information intended for informational purposes only. If you want to buy this website, please don't hesitate to contact us via e-mail: domain (dot) sales (dot) org @ gmail (dot) com or you can find and buy it on Afternic domain auctions.