DEV Community

Sahrish Afzal
Sahrish Afzal

Posted on

HTML elements and difference between <p> and <span> element

<!DOCTYPE html>



html element
 <p> This is a block level, therefore, add padding and margin before and after the line</p>
 <p> This is single line sentence.</p>
Enter fullscreen mode Exit fullscreen mode 
<span>This is inline element and therefore does not add any padding and margin before and after the line.</span>
 <span>This is single line sentence.</span>

</body>
Enter fullscreen mode Exit fullscreen mode

Result/ output







This is a block level, therefore, add padding and margin before and after the line

This is single line sentence.

This is inline element and therefore does not add any padding and margin before and after the line. This is single line sentence.

we can see that in case of the

element the result printed on two different line, however, in span the same code printed on the same line.
we actually use span element for styling purpose and it has not semantic meaning in html, however, the

element is block element and has semantic meaning in HTML




Top comments (0)