C'è un modo semantico per ridimensionare il testo con html e css?

Question

Il modo in cui normalmente farlo in HTML (5) sarebbe come questo:

/* CSS For this example */ 
footer p { 
font-size: 16px; 
font-weight: normal; 
} 

footer strong { 
font-weight: bolder; 
} 

<!-- HTML for this example --> 
<footer> 
    <p>Title <strong>- Name. 1234 N. Main St., Anytown, USA</strong></p> 
</footer> 

Il mio problema con farlo in questo modo, è che sembra che il 90% del testo del paragrafo viene dato maggiore importanza, che sembra controintuitiva per me. Sembrerebbe più semantico avvolgere solo il testo anomalo nel paragrafo, che in questo caso è il testo più leggero e lasciare footer p {font-weight:bold}.

È <small> l'elemento appropriato qui anche se la sua non proprio per un disclaimer, ecc

Answer 1

Sì, nel tuo caso è <small> elemento del caso, anche se non "de-enfatizzare" testo.

Lines dalle specifiche HTML corrente:

Nota: Piccola stampa caratteristiche tipicamente disclaimer, avvertimenti, legali restrizioni o diritti d'autore. La stampa di piccole dimensioni viene talvolta utilizzata anche per l'attribuzione o per soddisfare i requisiti di licenza.

Nota: il piccolo elemento non "de-enfatizza" o diminuisce l'importanza del testo enfatizzato dall'elemento em o contrassegnato come importante con l'elemento strong. Per contrassegnare il testo come non sottolineato o importante, semplicemente non contrassegnarlo rispettivamente con em o elementi forti.

http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element

Answer 2

Il normale colore del carattere è nero (# 000). La regolazione del colore, in una versione più leggera, ridimensionerà il frammento di testo.

Strong è un tag per enfatizzare il testo, quindi suggerirei di utilizzare <small> invece.

footer small { 
    color: #999; 
} 

Risultato: http://jsfiddle.net/rzHgW/