¿Podemos agregar un <span> dentro de la etiqueta H1?

96

¿Es un método adecuado utilizar la etiqueta span dentro de la etiqueta H1?

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

Sé que podemos escribirlo de esta manera ... y también sigo la siguiente sintaxis en mi propio sitio web ...

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

Sin embargo, solo quería saber la forma más limpia de html.

html Codeobsesión
fuente
3
@fireeyed creo que quiere seguir lo que es correcto, me refiero a la semántica de la etiqueta.
dpp
2
No olvide marcar la respuesta como aceptada si tiene la información que desea
Pranay Rana
Poner intervalos en los encabezados presenta problemas con el ajuste de palabras. ¿Alguien más ha observado esto?
Rafael
1
¿Alguna vez ha intentado ajustar un texto que está en un lapso? ¿Y qué hay de ajustar el texto que está en cualquier elemento de bloque? @Rafael
Daniel Springer

Respuestas:

180

Sí tu puedes.

HTML4 tiene esto que decir :

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

Y %inline;es:

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

E %special;incluye <span>.

El HTML actual tiene esto que decir :

Contenidos de contenido Contenido de
redacción

Y el contenido de fraseo incluye <span>.

mu es demasiado corto
fuente
1
El enlace de "HTML5 tiene esto que decir" está roto :(
mehulkar
@mehulkar Gracias por avisarme, debería arreglarse ahora.
mu es demasiado corto
30

Sí tu puedes. Puede usarse para formatear una parte de un bloque h1:

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

Si el estilo se aplica a todo el bloque h1, hago esto:

<h1 class="highlight">Page Title</h1>
mnsr
fuente
1
@dpp ¿por qué debería uno evitar el uso de nombres de presentación?
nu Everest
agradable, gracias
Joimee Cajandab
3

Sí, normalmente está bien usar un spanarchivo h1. spanes un elemento en línea, por lo que generalmente está bien usarlo dentro de cualquier cosa (¡que permita elementos dentro de él!)

Y realmente no hay una forma más limpia de hacerlo a veces, digamos si solo desea diseñar una parte del h1.

Por otro lado ... no lo hagas si no es necesario, ya que es un poco feo :)

Dave
fuente
2

Sí, está bien, pero ¿por qué no?

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

¿Si eso es todo lo que estás haciendo?

Simón Sarris
fuente
1
No es todo. La solicitud es para diseñar solo una parte del encabezado.
Daniel Springer
1

Sí tu puedes. El tramo se muestra en línea, por lo que no debería afectar el estilo del H1.

geetfun
fuente
0

Sí, podemos usar la etiqueta span con etiquetas de encabezado y no tiene nada de malo. De hecho, esto se usa ampliamente para diseñar etiquetas de encabezado, especialmente para colorear una palabra o letra en particular.

Touhid Rahman
fuente
0

Sí, podemos usar la etiqueta span con etiquetas de encabezado y no tiene nada de malo. De hecho, esto se usa ampliamente para diseñar etiquetas de encabezado, especialmente para colorear una palabra o letra en particular.

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

Piense en las líneas anteriores - Funcionó para mí - use display: inline prop

takrishna
fuente
¿Qué tiene esto que ver con la pregunta?
Quentin
3
@Quentin Creo que se refería a sugerir que el encabezado sea un elemento en línea. Una buena idea, si es factible.
Daniel Springer
2
Esta respuesta no debe ser rechazada ya que resuelve el problema, aunque no es lo que se pregunta directamente. +1 para la solución.
Achala Dissanayake