<![CDATA[HTML Block and Inline Elements]]>https://html-block-and-inline-elements.hashnode.devRSS for NodeMon, 31 Aug 2026 21:30:01 GMT60<![CDATA[HTML Block and Inline Elements]]>https://html-block-and-inline-elements.hashnode.dev/html-block-and-inline-elementshttps://html-block-and-inline-elements.hashnode.dev/html-block-and-inline-elementsWed, 22 Jan 2025 22:16:14 GMTif you ever notice in HTML some tags take full width space but some take they required, this is because of inline element and block level element

Now your question will be what is inline element and block level element ?

INLINE ELEMENTS

inline elements are HTML tag which take only space which they required .

<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
    <a href="https://www.google.com" style="background-color: red">I AM LINK TAG (a tag)</a>
    <button>button</button>
</body>
</html>

in this example a and button will be in same line as they inline elements and they will only consume only space they required

BUT BLOCK LEVEL ELEMENTS ARE TOTALLY OPPOSITE OF THIS ..!

Here are the Inline elements in HTML:

<a>

<br\>

<button\>

<img\>

<input>

<sup\>

<textarea\>

BLOCK LEVEL ELEMENTS

as now got idea, Block level elements mean HTML tag which take full width of space

in this image H1 tag take full with of space

<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
    <h1>Hi, Welcome</h1>
    <h2>Hi, Welcome</h2>
</body>
</html>

THEN OUT-PUT WILL BE

Here are the block-level elements in HTML:

<div>

<h1>-<h6>

<header>

<hr>

<li>

<ol>

<p>

<ul>

KNOW MORE

NOW QUESTION IS THIS INLINE ELEMENT CAN BE BECOME BLOCK LEVEL ELEMENTS

ANSWER : YES, WE CAN

Now if you want to convert block level elements EX- H1 to inline elements

you just have to type DISPLAY : INLINE

and boom just magin happen

<h1 style="display: inline;">Massage</h1>

and you can also make inline elements into block level elements

<h1 style="display: block;">Massage</h1>
]]>