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

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