Attributi HTML p. Tag: cosa sono e cosa sono. Perché sono necessari i tag h1-h6?

Etichetta

Etichetta

utilizzato per dividere una pagina in paragrafi. Può contenere solo testo e tag in linea (tag a livello di riga). Allo stesso tempo, il tag stesso

È basato su blocchi, ovvero crea un'interruzione di riga prima e dopo se stesso. Inoltre, stabilisce margini di spazio libero sopra e sotto dai suoi lati al contesto circostante, grazie ai quali la pagina viene visivamente divisa in paragrafi. Dimensione del campo tag

Dipende dal tipo di browser, ma è approssimativamente uguale all'altezza di una riga di testo nella pagina corrente.

Etichetta di chiusura

è facoltativo. Se manca, la fine del paragrafo verrà considerata il primo tag non in linea situato sotto nel codice HTML della pagina.

Attributi

Attributi personali:

align: imposta l'allineamento orizzontale del contenuto del paragrafo.

accesskey - Imposta il tasto di scelta rapida per concentrarsi su un elemento HTML.
class - specifica il nome della classe o delle classi tag utilizzate nei CSS (Cascading Style Sheets).
dir - indica la direzione del testo all'interno dell'elemento.
- specifica il nome di un identificatore di tag HTML che può essere utilizzato come "ancora" o nei fogli di stile.
lang - indica la lingua in cui è scritto il testo all'interno dell'elemento HTML.
style: necessario per applicare gli stili CSS in linea al tag.
tabindex: imposta l'ordine di tabulazione tra gli elementi (tasto Tab).
titolo: visualizza una descrizione comando quando si passa il mouse su un elemento HTML.

Tipo di etichetta

Scopo: testo (blocchi).

Modello di tag: blocco (blocco, livello di blocco).

Potrebbe contenere: tag in linea, testo semplice e Caratteri speciali HTML(mnemonici).

Tag di apertura: necessario. Etichetta di chiusura: non richiesto.

Sintassi

contenuto

Esempio HTML: utilizzo del tag P

seodon.ru - Utilizzando il tag P

Uno degli errori commessi dai creatori di siti Web alle prime armi è l'utilizzo di immagini non uniformi o colori vivaci per lo sfondo delle informazioni di testo sulla pagina. Ciò non solo rende difficile la lettura, ma ha anche un effetto dannoso sulla vista degli utenti, costringendoli a scrutare ogni riga e affaticare inutilmente la vista.

Un altro errore è l'uso dei colori invertiti "ovunque", quando il colore del testo è visivamente più chiaro dello sfondo, ad esempio uno sfondo nero - testo bianco. Questa tecnica è abbastanza applicabile, ma solo dove è veramente appropriata.

Supporto della versione HTML

Versione:	HTML4.01	HTML5	XHTML 1.0	XHTML 1.1
Supporto:	SÌ	SÌ	SÌ	SÌ

Supporto del browser

Navigatore:	Internet Explorer	Google Chrome	Mozilla Firefox	musica lirica
Versione:	6.0 e versioni successive	2.0 e versioni successive	2.0 e versioni successive	9.2 e versioni successive	3.1 e versioni successive
Supporto:	SÌ	SÌ	SÌ	SÌ	SÌ

E oggi daremo uno sguardo più da vicino a cosa è tag html e loro attributi Per esempio p, br, ora; e anche che ruolo svolgono? valori degli attributi tag contenuti in un documento html.

Prima di iniziare vorrei scusarmi per la mia lunga assenza. Il fatto è che, essendo impegnato con un progetto, sono stato costretto a rinunciare per un po' all'aggiornamento del blog ed ero un po' in ritardo sulla tabella di marcia. Ma ora tutto è alle mie spalle e spero di continuare a mantenere lo stesso ritmo e fornire regolarmente materiale fresco.

Ora torno all'argomento previsto. Come parte della mia introduzione alle basi di html, ho già scritto sulla struttura dei documenti html, dove ho anche dato spiegazioni sui principali tag html, head e body, che devono essere presenti in ogni documento, oltre a un tag specialechiamata dichiarazione.

Questa sezione fornisce inoltre informazioni su come utilizzare la funzionalità di creazione dell'elenco. Inoltre, potresti familiarizzare con i moduli sul sito e separatamente con i tag che ti consentono di progettare un'ampia varietà di moduli: .

Avendo ricevuto tanti auguri da voi, cari lettori, attraverso il modulo di feedback e via e-mail, ho deciso di tornare all'inizio e di entrare più nel dettaglio su quali tag esistono, come vengono classificati e quali sono gli attributi dei tag html . Quindi, cominciamo.

Tag HTML accoppiati e singoli, a blocco e a linea: p, br, hr

Come probabilmente hai già capito dai post precedenti del blog, un tag è l'unità strutturale principale dell'Hyper Text Markup Language (HTML). In generale, è l'insieme di tag che determina il codice html che descrive un particolare documento (ad esempio, una delle pagine della tua risorsa).

I tag sono classificati in coppie e singoli, nonché in tag di blocco e di linea. Ora, in ordine, consideriamo l'essenza delle loro differenze usando l'esempio dei tag più popolari e usati di frequente. A proposito, in molte fonti puoi trovare il nome del blocco e degli elementi in linea, sappi che sono la stessa cosa.

Per cominciare, darò brevi definizioni. Tag html accoppiati- elementi che hanno tag di apertura e chiusura, tra i quali è racchiuso il contenuto; i singoli elementi non hanno tag di chiusura. Gli elementi blocco sono quelli che occupano l'intera larghezza disponibile; la sua altezza è determinata dal contenuto. Pertanto, per impostazione predefinita, diversi elementi del blocco verranno posizionati uno sotto l'altro.

Gli elementi del blocco possono essere annidati uno dentro l'altro, ma non tutti, ne parleremo più avanti. I tag in linea in genere contengono testo o altri elementi in linea, ma non è consentito inserire tag di blocco all'interno di tag in linea. I tag inline, a differenza dei tag a blocco, si trovano su una riga e vengono trasferiti su un'altra solo se necessario, quando lo spazio disponibile in larghezza si esaurisce.

Probabilmente per i principianti è ancora un po’ complicato e c’è confusione in testa, ma è un buon inizio. Tutto diventerà più chiaro in futuro, ne sono convinto. Inoltre, passo ad esempi specifici basati su tag comuni, annotando di volta in volta a quali elementi, inline o block, accoppiati o singoli, appartiene ciascuno di essi.

Cominciamo dal tag p, che ogni webmaster utilizza letteralmente ogni minuto, non sto esagerando. Il nome di questo elemento deriva dalla lettera iniziale della parola inglese paragrafo (paragrafo, paragrafo). Serve a evidenziare frammenti di testo, che quindi sono molto più facili da percepire per i lettori. In questo momento, ad esempio, sto scrivendo un articolo e di tanto in tanto evidenziando il testo del post in paragrafi, puoi vedere questo.

Suddividendo il testo in frammenti e rendendo il materiale il più semplice possibile per i visitatori della risorsa, è possibile migliorare significativamente la risorsa per i motori di ricerca, il che è importante nella sua promozione.

Fondamentalmente, naturalmente, l'elemento p è accoppiato, poiché ha un tag di apertura e uno di chiusura. Allo stesso tempo, è un elemento blocco che può contenere solo elementi in linea. Ad esempio, se scrivi del testo su più righe e lo racchiudi tra i tag di apertura e chiusura p, il browser lo visualizzerà comunque su una riga e solo se il testo non rientra in una riga verrà trasferito.

Tag HTML Tag p - elemento di blocco Contenuto del tag p

Ma per visualizzare questo testo su più righe, è necessario utilizzare l'elemento br (dall'inglese “break”), che è singolo, cioè non ha un tag di chiusura, ed è anche un elemento inline. Posizionandolo alla fine di ogni riga di testo che costituisce il contenuto del tag p, otteniamo l'opzione desiderata:

Tag HTML
Tag p - elemento blocco
Contenuto del tag p

Scrivere i tag br è quasi gratuito. Cioè, puoi selezionare più righe contemporaneamente e inserire questo tag alla fine di ciascuna di esse, oppure puoi semplicemente scrivere il testo nel solito modo e inserire br nei punti in cui dovrebbero essere inseriti i presunti trattini. Il numero di elementi in linea br inclusi nel contenuto del tag di blocco p può essere grande quanto desiderato. Cioè, tutto il testo che desideri può essere scritto su una nuova riga.

Consideriamo ora un altro semplice tag, di cui parleremo più in dettaglio alla fine dell'articolo. Stiamo parlando del tag hr (dall'inglese "regola orizzontale"- linea orizzontale), che è singola, ma allo stesso tempo bloccata, poiché per impostazione predefinita occupa l'intera larghezza possibile. Descrive una semplice linea orizzontale utile per dividere il contenuto della pagina in parti logiche. Potrebbe trattarsi della separazione di testo, gruppi di immagini o altri componenti di progettazione.

L'aspetto di questa linea orizzontale dipende dal browser in cui viene visualizzata la pagina, il cui codice html contiene questo elemento. Inoltre, l'aspetto di questa linea, come l'aspetto di altri elementi, può essere modificato utilizzando una varietà di attributi. Ora abbiamo affrontato senza problemi un altro componente del nostro argomento di oggi, vale a dire il concetto di attributi dei tag html.

Attributi dei tag HTML e loro classificazione

Gli attributi dei tag html consentono di conferire loro caratteristiche aggiuntive e di diversificare l'aspetto degli elementi della pagina Web visualizzati dal browser. Ogni tag può avere diversi attributi. Ognuno di essi svolge un ruolo nel modellare il design di una particolare area di una pagina del sito web. Gli attributi vengono scritti all'interno del tag di apertura dopo il nome dell'elemento stesso. Se sono presenti più attributi, il loro ordine non ha importanza; può essere qualsiasi cosa.

Quasi ogni attributo ha il proprio valore (parametro). In generale, qualsiasi tag singolo o accoppiato può essere rappresentato schematicamente come segue:

Tieni presente che per indicare il valore di un attributo, è necessario inserire un segno di uguale dopo i nomi degli attributi e il valore stesso deve essere racchiuso tra virgolette singole o doppie. Gli attributi possono essere presenti sia nel tipo inline che in quello a blocco; sia nei tag singoli che in quelli doppi.

Naturalmente nel caso di un singolo elemento non ci sarà alcun tag di chiusura. Tutti gli attributi ed i loro valori sono scritti all'interno del tag di apertura e devono essere separati da uno spazio, altrimenti l'area corrispondente nel browser non verrà visualizzata correttamente. Sì, quasi dimenticavo, alcuni attributi non possono avere valori. Naturalmente, è impossibile analizzare tutti i tag in combinazione con tutti i possibili attributi, e questo non ha importanza, l'importante è comprendere il meccanismo del loro utilizzo. Nella pagina ufficiale puoi studiare tutti i tag html consigliati.

È vero, ci sono dati che corrispondono agli standard ufficialmente attuali di HTML 4.01. Tuttavia, l'implementazione della versione html 5 sta avvenendo a un ritmo rapido, le cui regole sono già seguite dai browser più diffusi. E nella nuova versione del linguaggio di markup ipertestuale, alcuni tag e attributi non saranno più validi, ovvero non rispetteranno gli standard HTML. Pertanto staremo al passo con i tempi e in futuro vi offrirò solo tag e attributi validi, impareremo anche in futuro ad evitare la non conformità con gli standard del codice HTML, i materiali su questo argomento appariranno molto presto.

Ma diamo un’occhiata alla pagina ufficiale del W3C, dove viene presentata una tabella dei tag html consigliati. Se clicchiamo sul collegamento con il tag che ci interessa (per chiarezza, prendiamo il già citato tag hr, soprattutto perché di seguito ne prenderemo in considerazione un esempio), verremo reindirizzati a questa pagina web, dove sono presenti le specifiche riguardo a questo elemento si riporta:

Tutti gli attributi degli elementi possono essere divisi in tre gruppi:

Gruppo di attributi universali- si applicano a quasi tutti i tag html. Nello screenshot qui sopra sono evidenziati in una cornice verde
Attributi unici- un insieme di attributi unici per questo elemento (per il tag hr nella figura sono sottolineati in viola: align, noshade, size, width). La specifica html 5 ha aggiunto un nuovo attributo color che specifica il colore della linea orizzontale.
Eventi- questi attributi sono necessari quando è richiesta un'azione in risposta a un'azione dell'utente. Nello screenshot sono evidenziati in una cornice blu.

Informazioni sugli attributi possono essere ottenute anche su un'altra pagina del W3C, dove è presente una tabella con un elenco completo degli attributi html:

Questa tabella mostra tutti gli attributi per tutti i tag esistenti nel linguaggio di markup ipertestuale. Nella colonna "Elementi correlati" di fronte all'attributo desiderato, sono contrassegnati i tag in cui questo attributo può essere utilizzato. La colonna "Tipo" indica il tipo di dati che può essere utilizzato come valore dell'attributo. Ad esempio, l'attributo align (che determina l'allineamento di un elemento) ha tre possibili valori (sinistra, centro, destra).

Se la colonna "Dip" contiene la lettera D, non è consigliabile utilizzare questo attributo, altrimenti il documento html non supererà la convalida. In questo caso è necessario utilizzare gli stili CSS che, come ho già notato, studieremo nel prossimo futuro. Ciò è necessario perché la tendenza è che la maggior parte degli attributi in html 5 sono deprecati e l'aspetto degli elementi dovrebbe essere determinato utilizzando i css.

A proposito, informazioni assolutamente complete con tag aggiunti e relativi attributi secondo la versione html 5 sono presentate su una delle migliori, a mio avviso, risorse dedicate all'apprendimento delle basi di html, vale a dire htmlbook, e in russo.

Come visualizzare una linea orizzontale utilizzando il tag hr

Agiremo progressivamente. elemento hr senza attributi definisce una semplice linea orizzontale che occupa l'intera larghezza dello spazio (vedi esempio sopra). Applicando successivamente vari attributi al tag hr, modificheremo l'aspetto della linea orizzontale.

Innanzitutto, scriviamo gli attributi align e width. Per quanto riguarda align, ha senso utilizzarlo solo se è specificato l'attributo width, che determina la larghezza dell'elemento (inferiore alla larghezza della pagina). Lascia che ti ricordi che il tag hr è un elemento a blocchi e per impostazione predefinita occupa tutto lo spazio di larghezza disponibile.

Il valore dell'attributo larghezza può essere numerico (nel qual caso la larghezza sarà specificata in pixel) o percentuali, che specificano la larghezza dell'elemento come frazione dello spazio disponibile. Il valore dell'attributo size viene inserito in numeri e determina l'altezza dell'elemento (in questo caso lo spessore della linea orizzontale). Quindi diamo un'occhiata ad un esempio:

Successivamente, aggiungi l'attributo noshade a quanto sopra. Il fatto è che quando si utilizza il tag hr, per impostazione predefinita vengono utilizzati gli effetti 3D (ombra), come puoi vedere guardando la linea situata appena sopra. Specificando l'attributo noshade ne vietiamo l'uso.

Ora proviamo ad aggiungere l'attributo color, che determinerà il colore della linea orizzontale. Tieni presente che l'utilizzo di questo attributo disabilita automaticamente gli effetti 3D, quindi noshade non è richiesto. Come valore impostiamo il nome del colore, ad esempio “blu”.

Quindi, usando l'esempio specifico di p, br, hr, abbiamo visto come i tag html, così come i vari attributi utilizzati, influenzano la formazione dei vari elementi su una pagina web. Presto pubblicherò una continuazione di questo argomento, quindi per ricevere nuovi materiali, non dimenticare di iscriverti agli aggiornamenti del blog tramite feed RSS o e-mail. Permettetemi pertanto di congedarmi con i migliori auguri.

I tag HTML sono un linguaggio di markup standard destinato ai documenti su Internet globale. Grazie a lui sono state create tutte le pagine del World Wide Web. Se guardi il codice della pagina in cui ti trovi attualmente, vedrai un numero enorme di caratteri alfabetici e numerici: questi sono tag per HTML. Alcuni di essi sono di particolare importanza per l'ottimizzazione dei siti web sui motori di ricerca.

Cosa sono i tag titolo?

I tag del titolo hanno il maggiore impatto sul peso di una parola chiave su una pagina web. Il browser visualizza il titolo dell'articolo, il che rende il tag un elemento importante per l'ottimizzazione dei motori di ricerca. Per attirare l'attenzione, i titoli degli articoli dovrebbero essere scritti in una lingua comprensibile alla persona media e contenere informazioni sufficienti. Per una migliore prestazione del tag nel valore < titolo > deve contenere almeno 7 parole. Se segui questa regola, avrai l'opportunità di ricevere traffico aggiuntivo dai motori di ricerca. E infine, il titolo dovrebbe essere il più vicino possibile nel significato all'argomento dell'articolo stesso.

Cosa sono i tag di visualizzazione< h1>,< h2>…< h6>?

Tali tag sono intestazioni di testo che si trovano direttamente all'interno dei tag: per una migliore prestazione del sito, il tag