Can we add a <span> inside H1 tag?

Question

Is it a proper method to use span tag inside 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..

Answer 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> .

Answer 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>

Answer 3

Yes, it's typically fine to use a span inside of an h1 . span is an inline element, so it's typically okay to use it inside anything (that allows elements inside it!)

And there's not really a cleaner way to do it sometimes, say if you want to style only part of the h1 .

On the other hand... don't do it if it's not necessary, as it is a little ugly : )

Answer 4

Yes that's fine, but why not

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

If thats all you're doing?

Answer 5

Yes, you can. The span displays inline, so it should not affect the styling of the H1.

Answer 6

Yes, we can use span tag with header tags and there is nothing wrong in it. Indeed this is widely used for styling header tags, specially for coloring a particular word or letter.

Answer 7

Yes, we can use span tag with header tags and there is nothing wrong in it. Indeed this is widely used for styling header tags, specially for coloring a particular word or letter.

Answer 8

<h1 style="display:inline;">Bold text goes here</h1> 
<span style="display:inline;">normal text goes here</span>

Think in above lines - Worked for me - use display:inline prop