CODEWITHSUNDEEP
html
Codeobsession
Codeobsession

Reputation: 1805

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

Upvotes: 117

Views: 138775

Answers (8)

mu is too short
mu is too short

Reputation: 434585

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

Upvotes: 209

takrishna
takrishna

Reputation: 5002

<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

Upvotes: -2

Touhid Rahman
Touhid Rahman

Reputation: 2583

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.

Upvotes: 0

Touhid Rahman
Touhid Rahman

Reputation: 2583

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.

Upvotes: 0

mnsr
mnsr

Reputation: 12437

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>

Upvotes: 37

Simon Chiu
Simon Chiu

Reputation: 1168

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

Upvotes: 1

Simon Sarris
Simon Sarris

Reputation: 63812

Yes that's fine, but why not

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

If thats all you're doing?

Upvotes: 2

Dave
Dave

Reputation: 11879

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 : )

Upvotes: 3

Related Questions