Tutti i tag che si trovano tra e sono qualcosa come informazioni tecniche ufficiali. Prendi un tag come esempio: questo è un titolo. A cosa serve, chiedi?
Apri il browser e guarda tutte le righe di comando (vale a dire il titolo della finestra)... L'hai visto?
L'elemento HEAD (indicato dai tag e ) è posto immediatamente prima del corpo Documento HTML, che è definito dai tag e ().
Tra i tag e possono esserci i seguenti componenti:
HEAD - definisce l'inizio e la fine dell'elemento, all'interno del quale si trovano tutte le informazioni di servizio destinate al browser.
TITOLO - indica il nome del documento (pagina Internet), che viene visualizzato nella finestra del browser. Può essere specificato, ma non più di una volta.
BASE — definisce l'indirizzo di base da cui vengono successivamente calcolati i collegamenti relativi all'interno del documento. Non ha un tag di chiusura. Allo stesso tempo, un punto obbligatorio qui è la presenza di almeno uno dei parametri (attributi):- HREF— determina l'indirizzo di base (URL) della pagina Internet;
- BERSAGLIO— definisce il frame (il suo nome) che verrà utilizzato nei collegamenti ipertestuali per impostazione predefinita.
Esempio.
Creazione del sito web
...
Elenco
...
STILE - utilizzato per inserire un foglio di stile CSS in un documento CSS (foglio di stile a cascata).
Ha i seguenti attributi:
- TIPO— definisce il tipo MIME del foglio di stile da integrare. È un attributo obbligatorio e in genere ha un valore "testo/css" .
- TITOLO— definisce il nome del foglio di stile CSS. Diventa necessario se si prevede di utilizzare più regole in un unico documento STILE. In questo caso il browser sarà costretto a chiedere quale degli stili proposti sarà applicabile al documento. Tutti i browser moderni ignorano questo attributo: non è necessario utilizzarlo.
Esempio.
Utilizzo di un foglio di stile CSS
LINK: determina la relazione del tuo documento con altri oggetti. Non ha un tag di chiusura.
Attributi
- HREF— definisce l'URL del documento (pagina Internet).
- REL— determina il modo in cui il documento è correlato all'oggetto definito dal parametro HREF. Può avere i seguenti significati:
- TIPO— determina il tipo MIME per l'oggetto specificato nel parametro HREF.
Esempi.
Elemento DIV
Mezzogiorno
META: utilizzato per inserire metadati. Questo tag permette di inserire nell'elemento HEAD diverse informazioni tecniche utili, che, alla fine, non saranno visibili all'utente, ma il browser lo riconoscerà. Tali informazioni sono semplicemente necessarie per la corretta indicizzazione delle pagine del sito da parte dei robot di ricerca (ne parleremo quando arriverà il momento giusto in formazione). Non ha un tag di chiusura.
Ha i seguenti attributi:
NOME— specifica il nome dei metadati. Esistono numerosi nomi predefiniti.
EQUIV.HTTP— specifica il nome dei metadati. È quasi identico al parametro NAME, ma con una differenza: viene utilizzato solo quando è necessario trasferire informazioni aggiuntive a intestazione http.
CONTENUTO— assegna un valore ai metadati definiti nel parametro NAME (o HTTP-EQUIV).
E ora - un esempio.
...
I meta tag in HTML sono un gruppo di tag speciali che si trovano tra i tag e . Dal nome è subito chiaro che si trovano all'inizio del codice.
I tag di intestazione hanno due scopi importanti:
- Riportare informazioni sulla pagina html al browser;
- Fornire informazioni ai motori di ricerca su una specifica pagina html;
La particolarità dei tag di intestazione è che non sono visivamente visibili all'utente (l'eccezione è il tag, che può essere visibile nella scheda di una pagina del browser). Tutti i tag di intestazione sono facoltativi, ma ciò non significa che non siano necessari.
Questi tag possono essere divisi in 4 gruppi.
- Etichetta
- Tag
- Tag
- Etichetta
Diamo un'occhiata a ciascun gruppo separatamente.
1. Etichetta- titolo della pagina. Questo è l'unico tag head visibile agli utenti. È di grande importanza per i motori di ricerca in termini di SEO. È questo il titolo della pagina che viene visualizzato nei risultati della ricerca quando vengono specificati i titoli delle pagine.
...Titolo della pagina...Non è facile comporre correttamente per un principiante, poiché è necessario tenere conto di diverse sfumature. Il tag title ideale dovrebbe essere attraente per gli utenti e contenere frasi chiave per i motori di ricerca. Non dovresti rendere questo tag molto lungo perché potrebbe essere percepito come spam dai motori di ricerca. Questo tag deve essere unico per ogni pagina!
2. Tag- si tratta di un gruppo di tag di servizio che contengono informazioni sulla pagina. Consideriamo ciascuno di essi separatamente.
2.1. Tipo di contenuto metaLa sintassi per questo attributo è la seguente:
... ...Questo tag specifica la codifica della pagina. Il valore specifico viene scritto tramite l'attributo charset. In questo caso, la codifica è Windows-1251. Molto spesso, i siti Web utilizzano la codifica UTF-8.
Se la codifica del sito e una specifica pagina html (o nel database) non corrispondono, in alcuni browser il sito potrebbe essere visualizzato tramite geroglifici.
2.2. Meta Description... ...L'attributo content contiene una descrizione della pagina. Molto spesso, questa descrizione viene utilizzata come snippet per un motore di ricerca. La descrizione non è un tag obbligatorio. Ad esempio, il motore di ricerca Yandex determina lo snippet a sua discrezione, ma Google utilizza questa descrizione e la visualizza così come è scritta.
2.3. Meta parole chiave... ...Questo tag provoca molti dibattiti sulla sua effettiva necessità. I motori di ricerca non sostengono che queste parole chiave abbiano alcun ruolo nel posizionamento di un sito.
L'attributo content elenca le parole chiave. È improbabile che ciò influenzi radicalmente la promozione del sito, ma in caso di questioni controverse potrebbe influenzare a tuo favore. Le parole chiave devono essere scritte separate da virgole. Non scrivere parole chiave che non sono presenti nella pagina. Puoi leggere ulteriori informazioni sulle parole chiave.
2.4. Meta aggiornamento......Esistono molti altri meta tag, ma non hanno alcuna importanza né per i browser né per i motori di ricerca, quindi non ha senso utilizzarli.
2.5. Meta vista ... ... 3.3. Link rel=Alternativo ... ... 4. Tag ‹script›- collegamento di file Java con script.
... ...L'attributo src specifica la posizione dei file Java inclusi. Viene utilizzato per ridurre il codice nella pagina, nonché nel caso in cui sia necessario utilizzare alcune funzioni Java all'apertura della pagina. Inoltre accelera il caricamento della pagina, perché... I browser solitamente memorizzano nella cache gli script.
Caro lettore, abbiamo esaminato i tag head di un documento html. Ora hai una migliore comprensione dell'ottimizzazione del sito web e della scrittura di codice competente.
Ciao, cari lettori del blog! Continuiamo la sezione "Creazione di un sito Web da zero", e in particolare l'argomento dei tag... E oggi esamineremo i tag presenti su qualsiasi pagina Internet - , e . C'è un altro tag che deve essere presente in ogni documento HTML e di cui ho già parlato in uno degli articoli precedenti, quindi non lo toccheremo.
Negli articoli precedenti di questa sezione ho scritto sulla creazione di un file vuoto in formato html. In effetti, è stato utilizzato nell'articolo su (è lì che sono stati applicati i tag del titolo). Ora modificheremo direttamente questo file con le descrizioni complete.
E inizieremo l'articolo modificando il file creato. Personalmente l'ho chiamato index.html, ma il nome può essere qualsiasi cosa. Aprilo utilizzando qualsiasi editor di testo (è meglio usare Notepad++, poiché ha l'evidenziazione del codice e altri gadget utili). E aggiungeremo immediatamente i tag ad esso, esattamente nell'ordine in cui sono scritti. Non dimenticare di chiuderli, come mostrato nello screenshot. Il documento sarà simile al seguente:
Ora diamo un'occhiata al significato di ciascun tag separatamente. Non per niente sono presenti in ogni documento HTML.
Funzioni del tag Quindi, il tag è un contenitore (). Contiene tutto il contenuto visibile e invisibile di una pagina web (inclusi tag e ). Il tag di apertura viene immediatamente dopo la dichiarazione Doctype e il tag di chiusura viene posto alla fine del documento. Pertanto, rende chiaro al browser dove iniziare l'elaborazione del documento e dove terminarla.Teoricamente, lui stesso può capire cosa e come. Dopotutto ? Questo è un traduttore HTML ed è improbabile che inizi l'elaborazione dalla metà del documento e la finisca prima di raggiungere la fine. La questione è, ovviamente, controversa, ma ho sempre pensato (e ora non rinuncio alla mia opinione) che scrivere questo tag sia obbligatorio.
Anche tenendo conto del fatto che la funzione di questo tag è solo quella di indicare i confini del contenuto, ha i suoi attributi (che ora non vengono utilizzati affatto o vengono utilizzati estremamente raramente). Fonti diverse indicano attributi diversi, quindi non oso proporre la versione corretta.
L'unica cosa che posso dire con certezza è che la maggior parte degli attributi non sono supportati da HTML 4.01 o non sono desiderabili. Anche se darò ancora un esempio. — una descrizione comando in qualsiasi punto del documento. Ad esempio, quando passi il mouse sopra un'immagine, potresti vedere apparire del testo. Anche nel caso di questo tag:
Ecco cosa vedrai quando passi il mouse su un documento con questo contenuto:
È preferibile utilizzare l'attributo title non nel tag, ma in eventuali altre aree specifiche della pagina. In primo luogo, è conveniente e, in secondo luogo, i motori di ricerca tratteranno meglio il tuo sito. Questo tag non influisce direttamente sull'ottimizzazione delle risorse. Andiamo avanti.
Funzione tag Il prossimo nella riga è il tag. Contiene tutte le informazioni tecniche sulla pagina, che servono ad aiutare il browser e i motori di ricerca. Il tag è contenitore e viene subito dopo, solo che a differenza di quest'ultimo il tag di chiusura non viene alla fine del documento, ma prima del tag di apertura.In quali informazioni è possibile visualizzare? Ma nessuno. Tutto ciò che è all'interno di questo tag è accessibile all'occhio umano solo visualizzando il codice sorgente della pagina. Tutto il contenuto di questo tag è destinato ai motori di ricerca e ai browser. L'unica cosa che puoi vedere in qualche modo è il tag, che è responsabile del titolo della finestra della pagina web. Ecco un esempio:
Il testo dopo l'icona è il contenuto del tag. Adesso guardiamo il contenuto, che non possiamo vedere, ma che è una parte molto importante nella creazione e promozione di un sito. Prima di tutto, questa è la linea
Questo è un meta tag responsabile del tipo di contenuto della pagina (Content-Type). In questo caso, si tratta di codice html con codifica UTF-8 (content="text/html; charset=UTF-8"). Poi arriva il tag del titolo descritto sopra. Poi ci sono le righe che iniziano con il tag. Indica un collegamento a un documento esterno. Ad esempio, la linea
indica che è collegato un file (rel="stylesheet") con (type="text/css") che si trova a questo o quell'indirizzo (per ridurre la lunghezza della riga ho sostituito metà dell'indirizzo con punti) . Dopo che il browser ha elaborato questa stringa, determinerà da dove ottenere i fogli di stile a cascata.
In generale, il tag head contiene molte informazioni di cui puoi parlare all'infinito. L'ultima cosa da notare (nello specifico nel caso di ) è la presenza di tag description, parole chiave e canonical. Utilizzo il plugin All in One SEO Pack, motivo per cui sono presenti al suo interno.
Si può notare che si compone di tre sezioni principali.
- – la radice di qualsiasi documento HTML in cui si trovano tutte le altre sezioni (questo tag deve essere in una sola copia e deve essere presente su ogni pagina).
- – un'intestazione che contiene informazioni sul servizio e istruzioni al browser per la visualizzazione dei contenuti.
- – la sezione principale in cui si trovano i contenuti, ovvero tutte le informazioni utili (testi, immagini, video). Oltre al contenuto, questa sezione contiene la griglia del sito, ovvero il suo layout: vengono descritte le posizioni delle sezioni principali del sito, come l'intestazione, il piè di pagina, il menu principale, le colonne laterali, ecc.
Il tag non è diverso, tranne che è l'elemento radice, un contenitore per tutti gli altri blocchi. Procediamo quindi a una considerazione più dettagliata della sezione.
Gli elementi di questa sezione non vengono visualizzati direttamente sulla pagina web. L'unico tag di questa sezione che visualizzerà le informazioni è il tag. Nel tag, sezione, è scritto il titolo della pagina web; questo testo verrà visualizzato nella barra del titolo della finestra del browser.
Il titolo verrà visualizzato nella barra del titolo del browser
Questo tag è l'unico tag richiesto nella sezione.
Oltre al tag, in questa sezione è possibile inserire i seguenti tag: , , , .
EtichettaQuesto tag indica al browser dove si trovano determinate risorse esterne, come gli stili esterni (CSS). Inoltre, utilizzando il tag e specificando l'attributo rel corrispondente, puoi specificare l'indirizzo del feed RSS, la favicon del sito e altre risorse esterne.
Etichetta
Questo è un tag generico che descrive i dati. Il tag fornisce metadati sul documento HTML al browser. I metadati non vengono visualizzati, ma vengono utilizzati solo per scopi ufficiali, dal motore del browser o dagli spider di ricerca. Gli elementi meta vengono generalmente utilizzati per descrivere una pagina ( descrizione), specificando le parole chiave ( parole chiave), indicazione dell'autore del documento ( autore), indicazioni sul tipo di contenuto e sulla sua codifica e altri metadati.
Etichetta
Usando questo tag, puoi dire al browser dove dovrebbe cercare gli script esterni:
oppure inserisci lo script direttamente in questa sezione:
document.write("Ciao mondo!")
EtichettaQuesto tag può essere utilizzato per impostare gli stili necessari solo per questa pagina e anche, se non è necessario includere un file di stile esterno, utilizzando il tag. È possibile specificare più di un tag
h1 (colore: rosso) p (colore: blu)
Queste sono tutte le informazioni che devi sapere sulla sezione. Successivamente, considereremo la sezione che conterrà il contenuto principale della pagina web.
