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