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