¿Están bloqueadas las etiquetas H1, H2, H3, H4 o los elementos en línea?

Question

¿Es correcto HTML para cambiar el color del texto dentro de un elemento H1, H2, H3 o H4? ¿Están a nivel de bloque?

Por ejemplo

<h1><span style="color:#ABAB">#500</span> Hello world</h1> 

Answer 1

Son elementos de bloque.

Si nos fijamos en el código HTML 4.01 estricto DTD:

<!ENTITY % heading "H1|H2|H3|H4|H5|H6"> 

<!ENTITY % block 
    "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT | 
     BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS"> 

Por lo tanto, todos son definidos como %heading entidades, que a su vez forman parte de las entidades %block.

En cuanto a la pregunta sobre si se puede cambiar el color - eso es sólo el estilo y está muy bien, aunque me gustaría hacerlo en un archivo CSS, no en línea:

H1, H2, H3, H4, H5, H6 
{ 
color: #ccccc; 
} 

Answer 2

sí cabeceras son a nivel de bloque.

en otra nota, #ABAB no es un color válido :)

Answer 3

La mejor pracktace se cree primero de estilos CSS en hojas de estilo.

h1 { 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 18px; 
font-weight: bold; 
color: #000000; 
} 

Answer 4

Sí Esta es la forma correcta, si desea usar css en línea. De lo contrario, hacer una clase decir

<h1 class="title"><span>#500</span> Hello world</h1> 

Ahora Su Css es:

h1.title span{ 
color:#ABABAB; 
} 

vez sí h1 a h6 es un nivel de bloque.

Answer 5

El color altera el color de la fuente, no el color de fondo, por lo que, técnicamente, es igualmente correcto. Sin embargo, hacerlo de esa manera significa que para cada encabezado que desee con este estilo debe especificar una etiqueta span dentro como lo hizo.

mejor solución si quiere tenerlo siempre en efecto para las etiquetas h1 podría ser incluir una hoja de estilo con el siguiente código:

h1 { 
    color: #ABABAB 
} 

Answer 6

Sí, un span dentro de una etiqueta h1 está permitido. Como se puede ver en la W3C Reference page for the h1 tag:

contenidos permitidos: contenido estático

Y contenido estático es un texto normal, así como su elemento span (y varios otros elementos, como puede verse en este reference page for phrasing content.

Oh sí

, y las etiquetas de título son elementos de bloque.

Answer 7

La forma más fácil de averiguar si un elemento se encuentra a nivel de bloque o en línea elemen t es poner un borde a su alrededor.

HTML

<h1> Heading 1 </h1> 
<span> Span </span> 

CSS

h1 { 
    border: 2px solid green; 

} 

span { 
    border: 2px solid blue; 
} 

Más ejemplos en jsFiddle.