Scoping in HTML

This is a submission for the Web Game Challenge: One Byte Explainer

Explainer

In HTML, there are two types of elements: block and inline. Block elements (e.g. <div>) cover the entire line, while inline elements (e.g., <span>) occupy only the necessary space. A block element can't be wrapped inside an inline element like <span>.

Additional Context

If we wrap a <div> (a block element) with a <span> tag, it will behave unexpectedly. For example, applying a background color to that <span> element will only partially work. Remember to always wrap inline elements (like ) with block elements (like ), not the other way around.

@saamiabbaskhan