Can we add a <span> inside an <h1> tag?

Is it a proper method to use a <span> tag inside an <h1> tag?

<h1>
    <span class="boardit">Portfolio</span>
</h1>

I know we can write it in this way...and am also following the below syntax in my own website..

<h1 class="boardit">
  <span>Portfolio</span>
</h1>

However, I Just wanted to know the cleaner form of html..

Solution 1:

Yes you can.

HTML4 has this to say:

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  There are six levels of headings from H1 (the most important)
  to H6 (the least important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- heading -->

And %inline; is:

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

And %special; includes <span>.

The current HTML has this to say:

Content contents
Phrasing content

And Phrasing content includes <span>.

Solution 2:

Yes you can. It can be used to format a part of a h1 block:

<h1>Page <span class="highlight">Title</span></h1>

If the style applies to the entire h1 block, I do this:

<h1 class="highlight">Page Title</h1>