The greatest difference is between the SPAN and the other two. It is an inline element. The other are block level elements.
We can write a SPAN inside either of the other two, but not the other way around, unless we elevate the inline element to block level. This implies we are fully aware of the new behavior and placement.
The best use of SPAN is to isolate a word or phrase within a sentence so that it can be highlighted or emphasized, and/or given a title attribute so it has a tooltip.
<p>Wishing everyone <span title="Good health" lang="FR" style="text-decoration: underline; font-style: italic">Bonne santé</span>.</p>
We’ll come back to this. Block level elements all demonstrate the same basic qualities…
- They reach across the entire viewport.
- They have no height attribute
- They inherit from their parent(s), the BODY and HTML
P has a special added style:
margin: 1em 0;
That means a P is just a DIV except they render with a blank line between. DIVs don’t have margins.
I use Chrome just because it is the one I’m set up for.
In the location bar, type and entire,
Bookmark this page on your Bookmarks Bar as, ‘about.blank’.
Now click the bookmark.
Ctrl + Shift + J gives us the JS console.
Let’s do some stuff at the input prompt,
> body = document.querySelector('body')
> p = document.querySelector('p')
> p.innerHTML = "Wishing everyone <span>Bonne santé</span>."
<- "Wishing everyone <span>Bonne santé</span>."
> s = document.querySelector('span')
<- <span>Bonne santé</span>
> s.style.textDecoration = 'underline'
> s.style.fontStyle = 'italic'
> s.style.fontWeight = '600'
Click on the arrow to expand the text node of P.
<p>"Wishing everyone "<span style="text-decoration: underline; font-style: italic; font-weight: 600;" title="Good health">Bonne santé</span>"."</p>
In one short lesson we have taken control of the DOM. Everything you learn from here on in will in one way or another by tied to this concept of manipulation.
We appended a P element to the document BODY. To that we inserted text and HTML. Then we styled the embedded HTML (SPAN) Finally we added a
title attribute to the same element. If we view the source, it looks like it was written by the page author in the raw document (sans quotes).
I forgot to mention, most importantly, watch the browser window in the console as we carry out the above command steps.