Before going into the specifics of individual HTML tags, it helps to understand the difference between block-level elements and inline elements.
Block-level elements can contain inline elements and other block-level elements. Here is an example using div and p block-level elements and a span inline element.
<p id="p1>Some <span>text inside a span.</span></p>
<p id="p2">Some more text with no span.</p>
And here is what that would look like if we add a little colour, borders and some padding.
Usually a block-level element will be displayed on a new line. So taking the humble div as an example again.
Would look something like this.
If a div has no content and you do not specify a height or background or border colour, it won’t be visible when a page renders. It helps when laying out a page if you can see the divs!
Block-level elements usually expand to fill the full width of the surrounding element.
Unlike block-level elements, inline elements cannot contain block-level elements. However, they can contain other inline elements. For example, the following code uses two inline elements that are nested one inside the other.
<p><span style="color:#f00;">This is red text and <strong>this is red and bold text</strong></span></p>
That looks like this.
This is red text and this is red and bold text.
Don’t worry about the style=”color:#f00;” part for now. That is known as inline CSS, which we will cover in another article.
One last bit about inline elements which I am sure you have gathered by now, is that they do not automatically start on a new line.
Whenever you nest one element inside another, there is a correct way to do it and a wrong way. It is simple really. All you need to do is pay attention to where you put your opening and closing tags. The best way is to show you.
<p>Some normal text and <strong>some bold text.</strong></p>
<p>Some normal text and <strong>some bold text.</p></strong>
If you nest things incorrectly, the browser may have trouble displaying the page. If you get it right, then you will have no problems!