Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Divs and spans are kind like wildcard tags that have no semantic meaning. You can use them to group or identify elements when no other tag is appropriate (like tables, lists or headings). Their differences are:</p> <p><strong>div</strong> </p> <ul> <li>it's a block level element </li> <li><p>default display property is block which means:</p> <ul> <li>its as wide as its container</li> <li>always makes line breaks before and after </li> </ul></li> <li>can contain other block level elements like <code>p</code>, <code>h1</code>, <code>table</code>, <code>ul</code>, <code>blockquote</code>, <code>div</code> </li> <li>can contain other inline elements like <code>img</code>, <code>strong</code>, <code>em</code>, <code>input</code>, <code>a</code>, <code>span</code></li> </ul> <p><strong>span</strong> </p> <ul> <li>is an inline element </li> <li><p>default display property is inline which means: </p> <ul> <li>is as narrow as its content </li> <li>does not makes any line break if not necessary) </li> <li>you can use the css property <code>vertical-align</code> with it</li> </ul></li> <li>can<strong>not</strong> contain block level elements</li> <li>can contain other inline elements like <code>img</code>, <code>strong</code>, <code>em</code>, <code>input</code>, <code>a</code>, <code>span</code> </li> </ul> <p>You can always change their default display property with css, but you cannot change the type of elements they can contain, regardless of the display property value. For instance:</p> <pre><code>&lt;span style="display:block"&gt; this will be displayed like a div, but still cannnot contain block level elements &lt;/span&gt; </code></pre> <p>Because they are "generic" tags, they're usually used for <a href="http://microformats.org" rel="nofollow noreferrer">microformats</a> in conjunction with classes. For instance: <code>&lt;span class="tel"&gt;555-5555&lt;/span&gt;</code>, because there is no <code>&lt;tel&gt;</code> tag.</p> <p>As for the image wrapping, if the image is directly related to the text, you could use:</p> <pre><code>&lt;p&gt;&lt;img src="image.jpg" style="float: right" alt="my image" /&gt;Long paragraph.&lt;/p&gt; </code></pre> <p>And no divs or spans would be required. However, if it is not, then you could use:</p> <pre><code>&lt;p&gt;unrelated to the image&lt;/p&gt; &lt;div&gt; &lt;img src="image.jpg" style="float: right" alt="my image" /&gt; &lt;p&gt;Long paragraph.&lt;/p&gt; &lt;/div&gt; </code></pre> <p>Here <code>div</code> is necessary because <code>p</code> is a block level element. </p> <p>Finally, for more information you can check <a href="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4" rel="nofollow noreferrer">the official W3C spec topic</a> about divs and spans.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload