I blocchi di tag H1, H2, H3, H4 o elementi in linea?

Question

E 'corretto HTML cambiare il colore del testo all'interno di un elemento H1, H2, H3 o H4? Sono a livello di blocco?

Ad esempio

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

Answer 1

Sono elementi di blocco.

Se si guarda il codice HTML 4.01 Strict DTD:

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

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

Quindi, sono tutti definiti come %heading entità, che a loro volta fanno parte delle %block entità.

Per quanto riguarda la domanda per quanto riguarda se è possibile cambiare il colore - questo è solo lo stile e va bene, anche se mi piacerebbe farlo in un file CSS, non in linea:

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

Answer 2

sì intestazioni sono a livello di blocco.

In un'altra nota, #ABAB non è un colore valido :)

Answer 3

La migliore pracktace è creare innanzitutto di stile CSS nel foglio di stile.

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

Answer 4

Sì Questo è il modo corretto, se si desidera utilizzare css in linea. In caso contrario, fare una classe di dire

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

ora il suo Css è:

h1.title span{ 
color:#ABABAB; 
} 

Anche in questo caso sì H1 a H6 è un livello di blocco.

Answer 5

Il colore altera il colore del carattere, non il colore dello sfondo, quindi tecnicamente è ugualmente corretto. Tuttavia, farlo in questo modo significa che per ogni intestazione che vuoi con questo stile devi specificare un tag span all'interno come hai fatto tu.

Meglio soluzione se si vuole avere sempre in vigore per tag H1 potrebbe essere quella di includere un foglio di stile con il seguente codice:

h1 { 
    color: #ABABAB 
} 

Answer 6

Sì, un span all'interno di un tag h1 è consentito. Come si può vedere sul W3C Reference page for the h1 tag:

contenuti consentiti: contenuti fraseggio

e contenuti fraseggio è un testo normale così come il vostro elemento span (e diversi altri elementi come si può vedere su questo reference page for phrasing content.

Oh sì, e le tag di intestazione sono elementi di blocco.

Answer 7

Il modo più semplice per scoprire se un elemento è a livello di blocco o inline elemen t è mettere un bordo intorno ad esso.

HTML

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

CSS

h1 { 
    border: 2px solid green; 

} 

span { 
    border: 2px solid blue; 
} 

Più esempi su jsFiddle.