Span within Headings H1...H6

Asked

Viewed 179 times

3

It is semantically incorrect to put a span inside a Heading?

Ex: 

<h1>Isso é <span>verdade</span></h1>
html html5

2 answers

2


To W3C standard for elements h1-h6 indicates that they may contain phrasing content as child elements, which includes the span.

In the documentation of span, including, indicates that the tag has no meaning in itself (including semantic):

The span element doesn’t Mean Anything on its Own[...]

And it can still be useful when used with class:

[...],but can be Useful when used Together with the Global Attributes, e.g., class, lang, or dir.

h1 .verde{
  color: green
}
<h1>Isso é <span class="verde">verdade</span></h1>

There is no problem in using span to stylize or serve as reference in parts of elements both flow as phrasing content. The tag is widely used for this.

  • Perfect, that’s exactly why I needed to know if using was correct or not. Thank you.

  • You scored the other answer, was that right? No problem, but you can only mark 1 answer as the best. Sometimes it happens that a new user marks the other answer thinking that the one that was marked before tb will be marked. rs... but if you found the other better answer, no problem.

  • Ahh beauty, I didn’t know, Sorry.

1

Yes, that’s totally correct! By definition of Veloper.Mozilla, Span is "a generic inline container for phrasing content , which does not represent anything by nature." Therefore, it has no semantic weight, that is, it has no problem to use it anywhere. Being used only for style purposes. It is important to know when to use the <p></p> and the <span></span>, the <p></p> breaks a line, ie, is "display: block", and the <span></span> no, that is, it is "display: inline". In short, if you want to edit only a part of a text without breaking line, use the <span></span> :)

source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.