Uno dei tag che imparerai presto nel tuo web design l'istruzione è una coppia di tag noti come "tag di enfasi". Diamo un'occhiata a cosa sono questi tag e come vengono utilizzati nel web design oggi.
Torna a XHTML
Se hai imparato l'HTML anni fa, molto prima della nascita di HTML5, probabilmente hai utilizzato entrambi i tag grassetto e corsivo. Come ci si aspetterebbe, questi tag hanno trasformato gli elementi rispettivamente in testo in grassetto o in corsivo. Il problema con questi tag, e perché sono stati messi da parte a favore di nuovi elementi (che vedremo tra poco), è che non sono elementi semantici. Questo perché definiscono come dovrebbe apparire il testo piuttosto che le informazioni sul testo. Ricorda, HTML (che è dove verrebbero scritti questi tag) è tutto basato sulla struttura, non sullo stile visivo! Le immagini sono gestite da CSS e le migliori pratiche di web design sostengono da tempo che dovresti avere una chiara separazione di stile e struttura nelle tue pagine web. Ciò significa non utilizzare elementi non semantici e che sembrano dettagli piuttosto che struttura. Questo è il motivo per cui l'audace e
corsivo i tag sono stati generalmente sostituiti da forti (per il grassetto) e da enfasi (per il corsivo).e
Gli elementi forti e di enfasi aggiungono informazioni al tuo testo, dettagliando i contenuti che dovrebbero essere trattati in modo diverso ed enfatizzati quando quel contenuto viene pronunciato. Utilizzi questi elementi più o meno nello stesso modo in cui avresti usato il grassetto e il corsivo in passato. Racchiudi semplicemente il tuo testo con i tag di apertura e chiusura ( e per enfasi e e per una forte enfasi) e il testo allegato sarà enfatizzato.
Puoi nidificare questi tag e non importa quale sia il tag esterno. Ecco alcuni esempi.
Questo testo è enfatizzato e la maggior parte dei browser lo visualizzerebbe in corsivo.
Questo testo è fortemente enfatizzato e la maggior parte dei browser lo visualizzerebbe in grassetto.
In entrambi questi esempi, non stiamo dettando l'aspetto visivo con il HTML. Sì, l'aspetto predefinito del il tag sarebbe in corsivo e il sarebbe in grassetto, ma quegli sguardi potrebbero essere facilmente modificati in CSS. Questo è il meglio dei due mondi. Puoi sfruttare gli stili del browser predefiniti per ottenere il testo in corsivo o in grassetto nel tuo documento senza effettivamente attraversare la linea e mescolare struttura e stile. Dì che lo volevi testo non solo in grassetto ma anche in rosso, puoi aggiungerlo a SCS.
forte {
colore rosso;
}
In questo esempio, non è necessario aggiungere una proprietà per lo spessore del carattere in grassetto poiché è l'impostazione predefinita. Se non vuoi lasciarlo al caso, tuttavia, puoi sempre aggiungerlo:
forte {
font-weight: grassetto;
colore rosso;
}
Ora avresti quasi la garanzia di avere una pagina con testo in grassetto (e rosso) ovunque sia viene utilizzato il tag.
Raddoppia l'enfasi
Una cosa che abbiamo notato nel corso dell'anno è cosa succede se provi a raddoppiare l'enfasi. Per esempio:
Questo testo dovrebbe avere entrambi grassetto e corsivo testo al suo interno.
Penseresti che questa riga produrrebbe un'area con testo in grassetto E corsivo. A volte questo accade davvero, ma abbiamo visto che alcuni browser onorano solo il secondo dei due stili di enfasi, quello più vicino al testo effettivo in questione, e lo visualizzano solo in corsivo. Questo è uno dei motivi per cui non raddoppiamo i tag di enfasi.
Un altro motivo per evitare questo "raddoppio" è per motivi stilistici. Di solito è sufficiente una forma di enfasi per trasmettere il tono che si desidera impostare. Non è necessario mettere in grassetto, corsivo, colorare, ingrandire e sottolineare il testo per farlo risaltare. Quel testo, con tutti quei diversi tipi di enfasi, diventerebbe sgargiante. Quindi fai attenzione quando usi i tag di enfasi o gli stili CSS per fornire enfasi e non esagerare.
Una nota su grassetto e corsivo
Un ultimo pensiero - mentre il coraggioso () e corsivo () i tag non sono più consigliati per essere utilizzati come elementi di enfasi, ci sono alcuni web designer che usano questi tag per modellare aree di testo in linea. Fondamentalmente, lo usano come un elemento. Questo è utile perché i tag sono molto brevi, ma l'utilizzo di questi elementi in questo modo non è generalmente consigliato. Lo menzioniamo nel caso in cui lo vedi là fuori su alcuni siti utilizzato non per creare testo in grassetto o in corsivo, ma per creare un hook CSS per qualche altro tipo di stile visivo.