Home/ Questions/Q 8635281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:56:13+00:00

I’m using a series of div and span tags as hooks for CSS styles

  • 0

I’m using a series of div and span tags as hooks for CSS styles for purposes of highlighting syntax of lines of code that I wanted to post on a web blog. Each line is put on it’s own list element in an ordered list.

So it may look something like this, for example:

<div class="json">
    <ol>
    <li class="li1"><div class="de1"><span class="br0">&#123;</span></div></li>
    <li class="li2"><div class="de2"> <span class="st0">&quot;files&quot;</span><span class="sy0">:</span><span class="br0">&#91;</span></div></li>
    <li class="li1"><div class="de1">  <span class="br0">&#123;</span></div></li>
    <li class="li2"><div class="de2">  <span class="st0">&quot;url&quot;</span><span class="sy0">:</span><span class="st0">&quot;http://www.blah.com&quot;</span><span class="sy0">,</span></div></li>
    <li class="li1"><div class="de1">  <span class="st0">&quot;lastModified&quot;</span><span class="sy0">:</span><span class="nu0">1348750586000</span></div></li>
    <li class="li2"><div class="de2">  <span class="br0">&#125;</span></div></li>
    <li class="li1"><div class="de1"> <span class="br0">&#93;</span></div></li>
    <li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li>
    </ol>
</div>

I wanted to give the markup extra semantic meaning by placing it between code tags, because it is actually lines of code (although with extra markup), e.g.

<code>
    <div class="json">
        <ol>
        <li class="li1"><div class="de1"><span class="br0">&#123;</span></div></li>
        <li class="li2"><div class="de2"> <span class="st0">&quot;files&quot;</span><span class="sy0">:</span><span class="br0">&#91;</span></div></li>
        <li class="li1"><div class="de1">  <span class="br0">&#123;</span></div></li>
        <li class="li2"><div class="de2">  <span class="st0">&quot;url&quot;</span><span class="sy0">:</span><span class="st0">&quot;http://www.blah.com&quot;</span><span class="sy0">,</span></div></li>
        <li class="li1"><div class="de1">  <span class="st0">&quot;lastModified&quot;</span><span class="sy0">:</span><span class="nu0">1348750586000</span></div></li>
        <li class="li2"><div class="de2">  <span class="br0">&#125;</span></div></li>
        <li class="li1"><div class="de1"> <span class="br0">&#93;</span></div></li>
        <li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li>
        </ol>
    </div>
</code>

Yet, code cannot contain div elements per the html5 w3c validation service. So do I forgo the use of the code tag altogether? Or do I try to rewrite everything without div‘s at all? I’m not sure because in my particular use of code I’m adding extra markup for CSS syntax highlighting purposes.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why not just use the code tag instead of a span tag? They’re both inline elements I think so it should be fine.

    • 0