Come faccio a indentare o tab testo sulla mia pagina web o in HTML?

Esistono diversi metodi di rientro del testo. Tuttavia, per compatibilità con più browser e accessibilità, discutiamo i metodi più popolari di rientro del testo sulla tua pagina web.

Metodo consigliato con CSS e HTML

Per il rientro del testo o di un paragrafo, il metodo più comunemente usato e consigliato sarebbe quello di utilizzare i CSS. Di seguito sono riportati diversi esempi di come i CSS possono essere utilizzati per indentare il testo. Ciascuno di questi esempi verrebbe inserito tra i tag HTML.

Il seguente esempio creerebbe una classe di stile chiamata "tab" che fa rientrare il testo e il paragrafo 40 pixel da sinistra.

Una volta che il codice sopra è nella sezione puoi usarlo in qualsiasi momento aggiungendolo al tuo paragrafo (

tag come mostrato.

Esempio di una scheda

L'inclusione di CSS nel documento HTML, come mostrato sopra, viene definita CSS "in-line". È utile per apportare rapidamente modifiche, ma a lungo termine è difficile modificarle in seguito.

Invece, puoi prendere tutto il tuo codice CSS e metterlo in un file separato, con l'estensione .css. Quindi, puoi collegare a questo un file da qualsiasi documento HTML e quel documento può usare quelle proprietà CSS. Utilizzando un file CSS esterno, è più facile cambiare il CSS in un secondo momento, perché tutti i CSS sono definiti in un unico punto.

Per collegarti al tuo file CSS esterno, aggiungi la seguente riga nel tuo documento HTML nell'elemento (dopo il basic.css

Una volta creato questo file .css, modifica il file e aggiungi lo stesso codice CSS, escludendo i tag di commento e di commento, come mostrato.

.tab {margin-left: 40px; }

Infine, una volta completati i passaggi precedenti, è possibile selezionare qualsiasi testo utilizzando lo stesso

esempio che abbiamo mostrato sopra.

Ci sono anche altre forme di indentazione. Ad esempio, se si desidera solo rientrare la prima riga di un paragrafo, anziché utilizzare la riga CSS precedente, si utilizzerà la riga seguente.

.tab {text-indent: 40px}

Suggerimento: puoi anche indentare utilizzando una percentuale. Ad esempio, invece di rientrare di 40px (pixel), è possibile sostituire il rientro con il 5% del testo di rientro del 5% della vista corrente. Puoi anche usare uno spazio em quando definisci la larghezza di un rientro.

Suggerimento bonus: puoi anche cambiare il rientro da un rientro sinistro a uno destro modificando il margine da sinistra a margine destro.

Metodo consigliato usando HTML

È possibile ottenere gli stessi risultati sopra usando uno stile in linea all'interno di HTML. Se si utilizza l'esempio CSS precedente, è possibile semplificare la gestione su più pagine Web, se è necessario utilizzare uno stile solo dopo aver utilizzato l'esempio seguente.

Questo testo è rientrato.

In questo primo esempio, tutto il testo nel tag del paragrafo è rientrato di 40 pixel da sinistra. Qualsiasi altro tag di paragrafo non è rientrato.

Questo testo è rientrato.

In questo secondo esempio, solo la prima riga di testo nel paragrafo sarà rientrata di 40 pixel da sinistra. Qualsiasi riga di testo aggiuntiva in quel paragrafo non sarà rientrata.

Suggerimento: puoi anche indentare utilizzando una percentuale. Ad esempio, invece di rientrare di 40px (pixel), è possibile sostituire il rientro con il 5% del testo di rientro del 5% della vista corrente. Puoi anche usare uno spazio em quando definisci la larghezza di un rientro.

Suggerimento bonus: puoi anche cambiare il rientro da un rientro sinistro a uno destro modificando il margine da sinistra a margine destro.

Metodo alternativo

Un altro metodo comune (ma improprio) di indentazione del testo sta usando i tag, come mostrato nell'esempio seguente. Sebbene questa sia una soluzione molto più semplice, ci sono problemi di accessibilità che possono essere causati dall'uso di questa soluzione per indentare il testo. Questo tag è pensato per citazioni di testo e non per indentazione.

Questo testo sarebbe rientrato