Podemos adicionar um <span> dentro da tag H1?

96

É um método adequado para usar a tag span dentro da tag H1?

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

Eu sei que podemos escrever desta forma ... e também estou seguindo a sintaxe abaixo em meu próprio site ..

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

No entanto, eu só queria saber a forma mais limpa de html ..

html Codeobsession
fonte
3
@fireeyed acho que ele quer seguir o que é certo, semântica da tag quero dizer.
dpp
2
Não se esqueça de marcar a resposta como aceita se você tiver a informação que deseja
Pranay Rana
Colocar extensões em títulos apresenta problemas com a quebra de linha. Alguém mais observou isso?
Rafael
1
Você já tentou quebrar qualquer texto que esteja em um intervalo? E que tal envolver o texto que está em qualquer elemento de bloco? @Rafael
Daniel Springer

Respostas:

180

Sim você pode.

HTML4 tem isso a dizer :

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

E %inline;é:

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

E %special; inclui <span>.

O HTML atual tem o seguinte :

Conteúdo do conteúdo Conteúdo da
frase

E o conteúdo de frases inclui <span>.

mu é muito curto
fonte
1
O link de "HTML5 tem isso a dizer" está quebrado :(
mehulkar
@mehulkar Obrigado por me avisar, deve ser consertado agora.
mu é muito curto
30

Sim você pode. Ele pode ser usado para formatar uma parte de um bloco h1:

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

Se o estilo se aplica a todo o bloco h1, eu faço o seguinte:

<h1 class="highlight">Page Title</h1>
mnsr
fonte
1
@dpp por que evitar o uso de nomes de apresentação?
nu everest
bom, obrigado
Joimee Cajandab
3

Sim, normalmente não há problema em usar a parte spaninterna de um h1. spané um elemento embutido, então normalmente não há problema em usá-lo dentro de qualquer coisa (isso permite elementos dentro dele!)

E às vezes não há uma maneira mais limpa de fazer isso, digamos, se você quiser estilizar apenas parte do h1 .

Por outro lado ... não faça se não for necessário, pois é meio feio:)

Dave
fonte
2

Sim, tudo bem, mas por que não

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

Se isso é tudo que você está fazendo?

Simon Sarris
fonte
1
Não é tudo. A solicitação é para estilizar apenas parte do título.
Daniel Springer
1

Sim você pode. A extensão é exibida em linha, portanto, não deve afetar o estilo do H1.

geetfun
fonte
0

Sim, podemos usar a tag span com tags de cabeçalho e não há nada de errado nisso. Na verdade, isso é amplamente usado para estilizar tags de cabeçalho, especialmente para colorir uma palavra ou letra específica.

Touhid Rahman
fonte
0

Sim, podemos usar a tag span com tags de cabeçalho e não há nada de errado nisso. Na verdade, isso é amplamente usado para estilizar tags de cabeçalho, especialmente para colorir uma palavra ou letra específica.

Touhid Rahman
fonte
-2 
<h1 style="display:inline;">Bold text goes here</h1> 
<span style="display:inline;">normal text goes here</span>

Pense nas linhas acima - funcionou para mim - use display: suporte embutido

takrishna
fonte
O que isso tem a ver com a pergunta?
Quentin de
3
@Quentin Eu acredito que ele quis dizer sugerir que o título fosse um elemento embutido. Uma boa ideia, se possível.
Daniel Springer
2
Esta resposta não deve ser rejeitada, pois resolve o problema, embora não seja o que está sendo perguntado diretamente. 1 para a solução.
Achala Dissanayake de