Come configurare smartphone e PC. Portale informativo
  • casa
  • Windows 7, XP
  • Markup semantico: cos'è e perché è necessario. Cos'è la semantica in HTML?

Markup semantico: cos'è e perché è necessario. Cos'è la semantica in HTML?

Il markup semantico è uno degli strumenti più potenti ma, stranamente, usato raramente Ottimizzazione del motore di ricerca... In sostanza, è un modo per rendere più facile per i motori di ricerca estrarre ed elaborare i dati per una presentazione più informativa nei risultati di ricerca. Ciò aumenta il potenziale di click-through dei tuoi link nei risultati di ricerca.

Quando gli acquirenti cercano qualcosa su Google, Yandex o Bing, è probabile che ottengano un lungo elenco di annunci e risultati di ricerca organici. Se la tua pagina è ben posizionata per la ricerca di un prodotto specifico, nei risultati verrà visualizzato un collegamento ad esso. Ma questa è solo una parte del compito, perché qualcun altro deve fare clic sul collegamento.

Il markup semantico rende i risultati di ricerca più informativi

Un modo per distinguersi nell'elenco dei risultati di ricerca è aggiungere informazioni più pertinenti, come valutazioni dei prodotti, prezzi, recensioni e disponibilità.

Nell'immagine qui sotto, puoi vedere il risultato di ricerca di Google per il 20 giugno 2016. Questo è il cosiddetto frammento - breve descrizione pagine del sito nei risultati di ricerca. Come puoi vedere, il ferro arricciacapelli PHILIPS ProCare su Rozetka.com.ua è stato valutato da quattro acquirenti, assegnando loro cinque stelle. Il prezzo del prodotto è di 999 grivna ed è disponibile.

Questo risultato di ricerca di Google fornisce dati strutturati.

Google lo capisce e lo visualizza Informazioni aggiuntive grazie al markup dei dati strutturati su questo pagina specifica merce. Questo lavoro extra, che è stato fatto su Rozetka.com.ua, non influenzerà direttamente i risultati della classifica. Ma se una pagina finisce nei risultati di ricerca per un utente come questo, ha una probabilità molto più alta di ottenere un clic. Pertanto, alla fine, il markup semantico migliora la posizione della pagina nella SERP.

Markup semantico e vocabolario dei microdati

Quindi c'è un certo standard markup semantico Dati sulla rete Schema.org, creata congiuntamente da Google, Bing e Yahoo nel 2011. È uno schema di markup semantico coerente che consente ai motori di ricerca di capire cosa fare con le informazioni sul tuo sito.

Il vocabolario di Schema.org viene utilizzato insieme ai microdati, uno standard web per il markup semantico per le pagine HTML che consente di descrivere il significato delle informazioni negli elementi HTML utilizzando speciali attributi leggibili da una macchina. In altre parole, aggiungi tag speciali al codice HTML delle loro pagine - e diventa chiaro ai motori di ricerca cosa c'è su di loro in questione, e cosa farne.

Affinché il motore di ricerca riconosca i tuoi dati di prodotto aggiuntivi, contrassegna le pagine corrispondenti secondo gli schemi Prodotto, Offerta e Valutazione aggregata.

L'applicazione di un dizionario di microdati Schema.org a una pagina di prodotto in un negozio online inizia con elemento esterno inquadrare le informazioni sul prodotto. In questo esempio, stiamo usando un div.



Utilizzando l'attributo itemscope, aggiungiamo ulteriori informazioni sul prodotto.


Qualche prodotto interessante




È solo un ottimo prodotto. Sarai molto contento.
123456789


Markup semantico e JSON-LD

Di recente, Google ha iniziato a dare più preferenza JSON for Linking Data o JSON-LD, non microdati. Ci sono infatti diversi vantaggi nel formato JSON-LD. Ad esempio, non è necessario includere HTML nel corpo della pagina per utilizzarlo. È sufficiente inserire lo script in. Per prima cosa, impostiamo il tipo:

Il concetto chiave per questo tipo di markup è il contesto (@contesto). Con esso, puoi, ad esempio, indicare che il markup utilizza la semantica schema.org:
{
"@Context": "http://schema.org/",
"@Tipo": "Prodotto",
"Nome": "Un bel prodotto",
"Immagine": "some-cool-product.png",
"Descrizione": "Questo è solo un ottimo prodotto. Sarai molto felice.",
"Sku": "123456789",
"Valutazione aggregata" :(
"@Type": "Valutazione aggregata",
"ValoreRating": "4",
"ReviewCount": "1.987"
},
"Offerte": (
"@Tipo": "Offerta",
"Prezzo in valuta": "UAH",
"Prezzo": "999",
"Disponibilità": "http://schema.org/Available"
}
}

Il markup semantico, che si tratti di microdati o JSON-LD, ti consentirà di rappresentare meglio i tuoi prodotti nei risultati risultati di ricerca, aumentando così in modo significativo la loro percentuale di clic e, di conseguenza, le loro vendite.

Nell'articolo di oggi sarà su un argomento piuttosto banale discusso a lungo su molti forum, blog e altri siti. Come dimostra la nostra pratica, oltre il 50% dei proprietari di siti non comprende cosa sia il markup dei dati semantici ea cosa serva. Lo usano o con errori, o semplicemente per esserlo. Puoi leggere i tipi di markup semantico.

Cos'è il markup semantico?

Non sono riuscito a trovare una definizione adatta su Internet, quindi ho deciso di inventarla dalle 4 definizioni più adatte.

Il markup semantico è un modo per formalizzare i valori usando standard diversi(dizionari) su una varietà di entità (eventi, organizzazioni, persone, prodotti e così via) utilizzando la sintassi (un modo di utilizzare un dizionario) nelle pagine web delle risorse.

Si è rivelato un po 'complicato ... Tuttavia, da questa definizione comprendiamo che il markup semantico è un tipo di regole che obbediscono a determinati standard o vocabolari. Che, a loro volta, sono progettati per aiutare i motori di ricerca (e non solo) a comprendere il contenuto delle pagine dei siti.

Elenchiamo gli standard più famosi (dizionari) e soffermiamoci più in dettaglio solo su due di essi, ma ne parleremo più avanti.

Tipi di markup dei dati

    Vocabolario dei dati- lo standard di markup dei dati che ha sviluppato Google fino a giugno 2011.

    Lo sviluppo dello standard è stato sospeso a causa della creazione del dizionario Schema.org. Ricerca google robot può utilizzare i dati ottenuti utilizzando questo markup, ma le raccomandazioni si riducono alla modifica dello standard su Schema.org.

    Dublin Core, o Dublin Coreè uno standard sviluppato nel 1995. La semantica del Dublin Core è stata creata da un gruppo internazionale e interdisciplinare di bibliotecari e professionisti museali, informatica... È un insieme di meta tag, 15 proprietà di base e 3 aggiuntive.

    Segni di utilizzo dei dati di questo standard in motori di ricerca ah non trovato

    FOAF, o amico di un amico- "a vicenda" - uno standard creato da Libby Miller e Dan Brickley nel 2000. Utilizzato principalmente per home page e social network. Risolve il problema di costruire connessioni tra le persone e di unirle.

    Microformati o microformati- uno standard creato nel 2005 dalla comunità di appassionati interessati da WC3.

    Questo standard era molto popolare prima dell'avvento di Schema.org ed è ancora utilizzato su molti siti. Al momento della stesura di questo articolo, Yandex supporta i seguenti microformati: hCard - un formato per contrassegnare i contatti (indirizzi, numeri di telefono, ecc.); hRicetta - formato descrizione ricette culinarie; hReview - rivedi il formato del markup.

Sembra che abbiamo deciso lo standard e anche la sintassi.

Per prima cosa, decidiamo qual è lo scopo principale del markup. Se leggi l'articolo che con il markup ti viene garantito un posto nella top 10, allora non è così. L'obiettivo del micro-markup è migliorare la comprensione del sito agli occhi del robot, inviare informazioni alla knowledge base dei motori di ricerca, aumentare il CTR del tuo snippet (che può indirettamente aumentare il tuo traffico e le tue posizioni). Ma dobbiamo capire che questi sono tutti indicatori indiretti. I siti web con e senza micro-markup sono classificati allo stesso modo.

Ora diamo un'occhiata a quali dati sul sito devono essere contrassegnati e cosa è supportato dai motori di ricerca su questo momento(poiché ci sono sempre più entità supportate ogni giorno).

Diamo un'occhiata più da vicino ai tre esempi più comuni:

Markup della scheda del prodotto Schema.org

Schede prodotto: le contrassegniamo con l'entità Prodotto. L'implementazione di questo tipo ci aiuterà a ottenere il seguente frammento in Yandex:

Da non confondere con lo snippet del prodotto nei risultati di ricerca Yandex ottenuti utilizzando il file .yml di Yandex.Market o il servizio "Prodotti e prezzi" del webmaster Yandex.

Come posso ottenere questo frammento?

Che ha problema simile sui siti culinari, potresti avere lo stesso motivo. Ogni volta sono convinto che l'aiuto sia il nostro tutto.)) Vorrei anche notare la qualità del supporto Yandex, per esprimere la mia gratitudine per le risposte tempestive: la corrispondenza è avvenuta quasi in tempo reale.

Passiamo ora all'implementazione del markup per i siti culinari.




40 minuti

Nome della ricetta



Porzioni 6


…………………… Ecc. Ingredienti ……………………………



La Torta Tartaruga non è difficile da preparare, inoltre, diventerà senza dubbio una delle torte preferite dai vostri bambini, visto che ha l'aspetto di una simpatica tartaruga.











2100




.....




Su Google, il nostro bellissimo snippet:

Pubblicheremo uno screenshot dello snippet in Yandex quando le informazioni verranno aggiornate (circa tra due settimane).

AGGIORNAMENTO dal 06/05/2017: Come promesso, aggiungiamo una schermata di Yandex:

Risorse utili su schema.org

  1. Validatori di micro-markup:
    • Validatore di Yandex https://webmaster.yandex.ru/tools/microtest/
    • Validatore di Google https://search.google.com/structured-data/testing-tool/
  2. Standard e formati Yandex supportati: https://yandex.ru/support/webmaster/site-content/data-transmit.xml
  3. Lo strumento "" ti aiuterà a velocizzare la visualizzazione delle informazioni taggate su Google.
  4. Guarda come appare pagina specifica nei risultati della ricerca, l'operatore del sito ti aiuterà: l'URL della pagina da controllare. Funziona sia su Google che su Yandex.
  5. Anche da Google c'è un ottimo strumento "Structured Data Markup Wizard" - https://www.google.com/webmasters/markup-helper/?hl=ru
  6. Per lo standard Open Graph di Facebook:

Uno degli argomenti più acuti e urgenti tra i programmatori web e i proprietari di risorse Internet oggi è l'ottimizzazione seo. Affinché il sito arrivi alle prime pagine query di ricerca"Yandex" o Google, è necessario svolgere un lavoro colossale sulla sua creazione e promozione.

A cosa serve il markup semantico?

È possibile adattare la risorsa per un utente normale utilizzando l'attuale e contenuto interessante... Ma affinché l'utente possa trovare questa risorsa, è necessario ottimizzare il sito per il motore di ricerca. Come farlo?

A differenza di una persona, non può riconoscere di cosa tratta il sito Web senza determinati suggerimenti. Analizza i contenuti, individua determinati schemi, individua le parole chiave, ma senza l'intelligenza umana non riesce a capire il significato di ciò che è scritto. Per renderlo più facile, i programmatori hanno inventato semantica o micro-markup per Yandex e Google. Proprio come l'ipertesto dice alla macchina cosa posizionare e dove, il markup semantico spiega chi o di cosa tratta una risorsa. Grazie a questa comprensione, il sito si posiziona meglio tra i concorrenti e ha maggiori possibilità di arrivare alle prime righe delle query di ricerca.

Un esempio di markup semantico

Il micro-markup "Yandex" e Google è particolarmente efficace nell'influenzare la promozione di siti commerciali che offrono beni e servizi. Il seguente esempio lo spiegherà più chiaramente.

È necessario creare un micro-markup per un sito Web di biglietti da visita per la fornitura di servizi di parrucchiere per cani. Apparirà così:

Tipo di oggetto - Barbershop,

Nome: un parrucchiere per cani.

La prima riga contiene l'area operativa del sito e la seconda - oggetto specifico... Una pagina con uno script di questo tipo sarà più in alto nella scala di ricerca rispetto a una simile senza di essa, poiché il motore di ricerca la considererà più pertinente al concetto di "barbiere per cani", e non solo "barbiere".

Il micro-markup creato con l'aiuto di Yandex.Webmaster ti consente di prescrivere molti parametri: luoghi di vendita, orari di apertura, contatti, brief o servizi e molto altro.

Dove viene utilizzato il markup semantico?

Sempre più risorse si stanno sforzando di fornire all'utente materiale lavorato di alta qualità. Più il significato sarà vicino a quello desiderato, maggiore sarà l'efficienza del sito. Pertanto, oggi il micro-markup viene utilizzato attivamente:

  • Siti commerciali per la promozione di beni e servizi.
  • Libri di riferimento online ed enciclopedie per creare collegamenti multilivello tra gli articoli.
  • Social media per dettagliare profili, eventi e altri contenuti.

Schrema.org standard uniforme

La creazione di markup semantico ha portato a ciò che era richiesto standard uniforme per tutti i motori di ricerca. È il micro-markup "Yandex" e Google - schrema.org. Semplifica il processo di creazione di una breve descrizione (snippet) che vediamo quando la pagina viene visualizzata nei risultati di ricerca. Queste informazioni possono includere Informazioni importanti sul sito, che aiuterà l'utente a decidere se accedere o meno a questa pagina.

A proposito, il numero di elementi e dizionari in schrema è enorme, quindi può essere utilizzato per siti di quasi tutti gli argomenti.

Standard grafico aperto

Oltre alla ricerca Sistemi di Google e Yandex, il micro-markup di beni, servizi, contenuti multimediali e informativi è richiesto anche dai social network. Per loro, Facebook ha inventato un singolo Standard aperto Grafico. Questo markup ti consente di controllare come verrà presentato il sito in feed di notizie rete sociale. E oggi per creare bellissimi link può essere utilizzato non solo su Facebook, ma anche su Google+, VKontakte, Twitter. Per una bella visualizzazione di quest'ultimo, tra l'altro, vengono utilizzate anche le Twitter Card.

Quale micromarkup scegliere?

In effetti, né Yandex né Google danno più preferenza a qualsiasi standard quando si classifica un sito. Il caso d'uso classico è schrema.org, che è il più completo, moderno e in continua evoluzione.

Dizionari di micro-markup

Abbiamo definito cos'è il micro-markup Yandex. Come farlo apparire in esso informazione necessaria? Per questo, viene utilizzato un concetto come un dizionario di micro-markup. Questo è un insieme di elementi, tag e sintassi, con l'aiuto del quale l'attenzione viene focalizzata su qualcosa. motore di ricerca.

Ogni standard ha i propri vocabolari ed elementi. Ce ne sono diversi parole chiave arey con la sua enorme gerarchia e tipi di visualizzazione. Ad esempio, il dizionario Thing consente di rappresentare le informazioni in 3 proprietà principali:

  • alternateName - per l'alias (alias) dell'oggetto;
  • descrizione - per descrizione del testo oggetto;
  • immagine - per un'immagine o un collegamento ad essa.

O il Dizionario delle buone relazioni, che sarà particolarmente utile per i mercati online. Ti consente di pubblicare dati su prezzi, luoghi di acquisto, disponibilità e altro.

Dizionario FOAF - micro-markup per i contatti Yandex e Google. Questo è un questionario che hai compilato milioni di volte su vari siti: il tuo nome, le coordinate, la pagina in nei social network, mail, data di nascita, ecc. Questa conoscenza persuaderà l'utente a seguire il link, offrendogli qualcosa che potrebbe interessarlo. Pertanto, il traffico del sito Web può essere aumentato.

Per descrizione dettagliata informazioni audio e video - artista, nome dell'album, durata - viene utilizzato il micro-markup VideoObject.

C'è anche il markup per messaggi di posta, consentendo all'utente, senza passare da un'altra pagina, di accettare un incontro o di lasciare un commento sotto l'articolo, ad esempio.

Cos'è un validatore

Qualsiasi promozione su Internet richiede un'analisi approfondita e approfondita della sua efficacia. Puoi controllare il micro-markup Yandex usando il validatore - Software che riconosce i metadati sulle pagine web. È possibile verificare la correttezza di documenti di qualsiasi formato: HTML, XHTML, RSS, XML, in qualsiasi lingua.

Il micro-markup Yandex è controllato da qualsiasi validatore che supporti i formati di microdati Schema.org, HTML, Open Graph, RDF.

Come controllare il micro-markup di Google

Scopri quanto costa il tuo sito ricerca Google può essere fatto in diversi modi. Per utente esperto chi è fluente impostazioni nascoste i webmaster "Google", il Rich Snippet Tool, disponibile solo dal link, andrà bene.

Un altro modo è installare Plugin SEO di Yoast. È facile da usare e sarà disponibile dopo l'installazione in pannello superiore webmaster.

Il terzo modo: sul sito di Google Developers nella barra degli strumenti, seleziona "Altre risorse", fai clic su "Strumento di convalida dei dati strutturati" e specifica pagina html vuoi controllare. Quando il robot calcola lo script dato, riceverai un rapporto dettagliato con eventuali errori e spiegazioni.

Come controllare il markup Yandex

Con questo motore di ricerca, tutto è un po' più semplice. Il validatore di micro-markup Yandex si trova negli strumenti dei webmaster, nella scheda "I miei siti". Qui è necessario fare clic sul pulsante "Verifica markup" e inserire l'URL del sito e il validatore inizierà a calcolare gli errori. In pochi minuti riceverai una delle tre opzioni di risposta:

  • Microdati non trovati.
  • Ci sono errori.
  • Il micromarkup è pienamente conforme allo standard.

In quali casi vengono visualizzate informazioni sul markup errato?

Yandex.Webmaster, un validatore di micro-markup, visualizza un messaggio di errore in due situazioni:

  • Quando non riconosce il markup.
  • Quando il micro-markup non soddisfa lo standard.

In ogni caso, il programma visualizzerà i dettagli dell'errore, dai quali si può giudicare quale campi richiesti sono stati omessi nel markup o quale attributo era mancante.

Potrebbe anche dare un messaggio: "non è stato possibile caricare la pagina". Indica un errore del server o una pagina inesistente.

Se il micro-markup Yandex viene eseguito con errore sconosciuto o non sai come risolverlo, puoi sempre contattare Yandex.Webmaster per assistenza.

Dopo il completamento della convalida, nuovo markup apparirà entro 2 settimane.

In che modo il micro-markup influisce sul posizionamento di un sito?

Hai contrassegnato la tua risorsa secondo tutte le regole e il validatore di micro-markup Yandex ha mostrato che tutto è stato fatto senza errori. Di quanti punti il ​​tuo sito salirà nella scala di ricerca?

Il markup semantico influisce solo indirettamente sulla pertinenza e non puoi dire il numero esatto di posizioni a cui aumenterà il sito. Tuttavia, il micro-markup è uno dei fattori chiave influenzare l'attrazione dell'attenzione dell'utente. Un frammento interessante e attraente porterà Di più visitatori e la posizione del sito crescerà. Il resto dipenderà dal contenuto e dalla pertinenza della risorsa.

Vantaggi del micro-markup

Oltre alla visibilità della risorsa, il micromarkup aumenta notevolmente il peso e la qualità del sito tra i concorrenti. Vale la pena evidenziare seguenti vantaggi marcatura:

  • Aumenta la credibilità dei motori di ricerca, robot di ricercaè più facile evidenziare gli elementi principali della pagina, il che significa che diventa più facile per loro indicizzarci. Se descriviamo questo processo in un modo molto semplificato, allora possiamo dire che il motore di ricerca è contento che gli apriamo il cuore del sito, i nostri segreti interni e la sua fiducia in noi aumenta.
  • Agli occhi del consumatore, i siti con snippet sembrano non solo più evidenti, ma anche di qualità superiore. Di conseguenza, tali risorse vengono cliccate più spesso, il che significa che il CTR nei risultati di ricerca o la percentuale di clic aumenta.
  • Il proprietario ha opportunità unica mostrare informazioni che verranno notate anche se l'utente non si è recato sul sito.
  • Le informazioni sullo snippet possono sempre essere modificate e ciò non influirà sulla posizione della risorsa nell'elenco.

Ma, naturalmente, durante la promozione seo, non dovresti soffermarti solo sullo sviluppo del micro-markup. È indispensabile avere un utile e contenuto unico, ma non solo. Ci sono molti più fattori che influenzano l'ascesa di un sito nella classifica dei motori di ricerca "Yandex" e Google.

Altri modi per promuovere il tuo sito

La promozione interna, che include il micro-markup "Yandex" e Google, ha diverse direzioni:

  • l'uso di parole chiave nel dominio e nelle intestazioni del sito;
  • la presenza di parole chiave nella pagina stessa, la loro distribuzione uniforme nel testo, la posizione nei sottotitoli, i tag;
  • corretto markup HTML privo di errori (verificato utilizzando gli strumenti Yandex Webmaster);
  • la presenza di megatag (parole chiave, descrizione, ecc.), che indicano l'essenza della pagina al motore di ricerca;
  • linking - ovvero link ad altre pagine del sito;
  • struttura del sito semplice che ti permette di passare alla pagina principale con un clic;
  • design memorabile e chiaro;
  • lavorare con i social network, la capacità di consigliare le informazioni che ti piacciono agli altri;
  • disponibilità della mappa del sito;
  • contenuti unici, interessanti e regolarmente aggiornati, utili e rilevanti per il lettore;
  • CMS ottimizzato per un caricamento delle pagine rapido e senza errori.

Oltre alla promozione interna, il lavoro dovrebbe essere svolto con fattori esterni... Un programmatore web dovrebbe monitorare regolarmente se i collegamenti al sito vengono visualizzati su altre risorse, quanto sia significativa e autorevole questa massa di collegamenti (questo processo è determinato utilizzando quelli tematici e ponderati. banner pubblicitari risorsa.

Secondo le ultime ricerche, una delle più modi efficaci promozione è la discussione o la menzione del sito sui social network. Il motore di ricerca vede il movimento attivo di queste informazioni e le percepisce come rilevanti e richieste, aumentando così il rating della risorsa.

Per i negozi online, è efficace utilizzare commenti e recensioni dei clienti, sia sul sito stesso che su forum tematici, portali con recensioni, ecc.

Invece di una conclusione

La promozione online è un processo complesso e multiforme che richiede un lavoro intenso su vari fattori esterni e interni. Questo non vuol dire che nessuno dei metodi di cui sopra sia assolutamente corretto, ed è lui che porterà il tuo sito in cima. Trova te stesso su linee superiori le query di ricerca sono possibili solo con un lavoro complesso su tutti gli aspetti promozione seo, in particolare, un ruolo enorme dovrebbe essere attribuito al micromarkup.

È molto importante comunicare al motore di ricerca che stai cercando in tutti i modi di semplificare la sua selezione e che lo stai facendo non solo per il bene di voto alto, ma anche per comodità dell'utente, più precisamente, in primo luogo, per una persona di trovare queste informazioni sulla rete.

Yandex e Google sono direttamente interessati alla ricezione dell'utente informazione necessaria, il che significa che più fedele è la tua risorsa, maggiori sono le sue possibilità di ottenere un posto in cima.

Non importa quale markup usi - OpenGraph, schrema.org o qualche altro, la cosa principale è che viene eseguito senza errori ed evidenzia punti chiave pagine di risorse. Controllare regolarmente con un validatore, eseguire scansione profonda ogni aspetto della tua attività, e poi grandi risultati ti aspettano!

L'array contiene stringhe, gli elementi dell'elenco. La stessa pagina HTML contiene un tag
    , per aggiungere elementi alla lista è necessario:
    1. creare elemento in modo programmatico< li>;
    2. aggiungi creato elemento HTML- codice contenuto;
    3. aggiungere un elemento all'elenco.

    A livello di programmazione, sarà simile a questo:

    var lista = document.getElementById ("lista"); per (var i = 0; i< items.length; i++) { var listItem = document.createElement("li"); listItem.innerHTML = items[i]; list.appendChild(listItem); }

    Pertanto, quando viene chiamata la funzione, verrà formato il contenuto della lista con id = "lista".

    È un po' più difficile formare un gruppo di collegamenti, perché oltre al testo del collegamento, l'elemento deve contenere l'indirizzo della transizione. Per fare ciò, abbiamo bisogno di un array della seguente forma:

    collegamenti var =; link = (nome: "primo", href: "document1.html"); link = (nome: "secondo", href: "document2.html"); link = (nome: "terzo", href: "document3.html"); link = (nome: "quarto", href: "document4.html");

    La pagina HTML definisce un contenitore

    ... La sequenza di aggiunta di un collegamento a un contenitore è simile alla seguente:

    1. creazione di un elemento a livello di codice ;
    2. impostazione del testo del collegamento;
    3. impostazione di un valore di attributo href;
    4. aggiungendo un collegamento al contenitore.

    Il seguente codice illustra implementazione del software la sequenza di azioni specificata:

    var nav = document.getElementById ("navigazione"); per (var j = 0; j

    Ovviamente è possibile generare contenuti non solo sulla base di array, nel corso di successive esercitazioni pratiche considereremo un esempio di generazione del contenuto di vari elementi basata sull'uso di data warehouse.

    Markup semantico

    Innanzitutto, occorre dire alcune parole sulla semantica in generale. Sfortunatamente, nell'ambito di questo corso, non possiamo permetterci una descrizione dettagliata di quest'area di conoscenza, quindi cercheremo di concentrarci solo sui punti chiave.

    La semantica, come disciplina scientifica, studia il significato delle unità linguistiche. In informatica, la semantica è intesa come la formalizzazione delle costruzioni dei linguaggi di programmazione.

    Proviamo a capire cosa significa già nel contesto dell'HTML e dello sviluppo web.

    Abbiamo detto che la maggior parte delle pagine Web viene creata secondo un determinato schema: intestazione del sito, barra di navigazione, blocco del contenuto principale, ecc.

    HTML5 fornisce una serie di tag che ti consentono di indicare esplicitamente che questo o quel contenuto appartiene a una determinata parte di una pagina web, o indicare qual è il contenuto (citazione, ora e data, ecc.).

    È ovvio che i "consumatori" di tale markup non sono utenti del sito, perché non vedono i tag. L'essenza del markup semantico è semplificare l'elaborazione automatica del contenuto del sito, ad esempio, per una migliore "comprensione" del sito robot di ricerca.

    Oltre a quanto già detto, si possono distinguere i seguenti vantaggi del markup semantico:

    • L'accessibilità aumenta come le pagine del sito non perderanno la loro struttura anche con CSS disabilitati o non supportati.
    • Il contenuto delle pagine del sito sarà comprensibile per le persone che leggono i siti utilizzando speciali lettori di schermo.
    • Il markup semantico ha un effetto positivo su motori di ricerca da non è difficile per i loro robot indicizzare le pagine e determinare il vero significato di certi frammenti di testo.
    • L'ulteriore supporto di un sito progettato in modo simile è notevolmente semplificato e i costi di riprogettazione sono ridotti.
    • Il peso delle pagine del sito diminuisce, la leggibilità del codice del sito aumenta grazie alla sua compattezza e aumenta la velocità di caricamento delle pagine del sito.

    Pertanto, i tag HTML possono essere suddivisi in tag semantici e di presentazione.

    I tag semantici sono tutti i tag che indicano l'essenza del loro contenuto. Ecco un elenco dei tag semantici più comuni:

    Tabella 14.1.
    Etichetta Descrizione
    un destinato a creare un collegamento o un'ancora
    abbr indica che il contenuto del tag è un'abbreviazione
    acronimo indica che il contenuto del tag è un acronimo (una specie di abbreviazione che non è scritta, ma come una parola)
    indirizzo contiene informazioni sull'autore
    la zona applicato all'interno del contenitore< mappa> per creare una mappa immagine. Definisce i parametri delle zone-collegamenti attive sulla mappa
    base indica pieno indirizzo di base documento. Si usa per comporre indirizzi relativi e per specificare la finestra di destinazione di tutti i collegamenti alle pagine
    bdo imposta la direzione dell'output del testo (da destra a sinistra, da sinistra a destra)
    citazione evidenzia una citazione (di solito lunga). Visualizzato con maggiore rientro
    corpo definisce i confini del corpo del documento. Tutti gli elementi responsabili del contenuto della pagina HTML si trovano all'interno del tag.
    pulsante crea un pulsante sul modulo
    didascalia crea un'intestazione per la tabella. Visualizza fuori dalla cornice sopra la tabella. Elemento da tavolo
    citare utilizzato per indicare la fonte di una citazione o il suo autore. Di solito in corsivo
    codice
    col ti permette di impostare proprietà generali per l'intera colonna della tabella in una volta
    colgroup ti permette di impostare proprietà comuni per più colonne di una tabella contemporaneamente
    dd
    e
    ... Specifica la definizione di un termine
    del indica il testo come cancellato. Può apparire come minuscolo o come elemento di blocco a seconda del contesto
    dfn evidenzia il termine nel testo
    div alloca un blocco logico. Uno degli elementi principali del layout dei blocchi
    dl utilizzato quando si crea un elenco di definizioni insieme a
    e
    dt utilizzato quando si crea un elenco di definizioni insieme a
    e
    em usato per enfatizzare l'attenzione
    fieldset destinato al raggruppamento di elementi del modulo
    modulo crea un modulo sulla pagina. Il modulo viene utilizzato per lo scambio di dati tra utenti e server
    h1, h2, h3, h4, h5, h6 usato per creare intestazioni
    testa titolo del documento, contiene informazioni sul documento corrente
    html un tag contenitore contenente tutto il contenuto della pagina, tranne doctype che deve essere posizionato prima del tag
    img aggiunge un'immagine alla pagina
    ingresso permette di creare elementi dell'interfaccia: pulsanti, caselle di testo, pulsanti di opzione e caselle di controllo. Il metodo principale per ottenere informazioni dall'utente (lettore) si basa su questo tag
    ins denota il testo aggiunto a nuova versione documento. Può fungere da elemento in linea o di blocco a seconda del contesto
    kbd indica il testo digitato sulla tastiera o le scorciatoie da tastiera
    etichetta ti permette di associare un elemento dell'interfaccia su un form con un'etichetta di testo e impostare i tasti di scelta rapida
    leggenda definisce un titolo per gli elementi del modulo raggruppati in un contenitore di tag
    li crea un elemento dell'elenco
    collegamento stabilisce un contatto con documenti esterni, il più delle volte con fogli di stile
    carta geografica un tag contenitore per creare una mappa immagine
    meta contiene metadati - descrizione tecnica documento come coppie nome-valore. Utilizzato per identificare le proprietà del documento (ad esempio autore, data di fine utilizzo, elenco di parole chiave, ecc.) e impostare i valori di queste proprietà
    noscript contiene testo che viene visualizzato dal browser
    oggetto utilizzato per incorporare vari oggetti nella pagina (di solito file multimediali)
    vecchio crea un elenco numerato
    optgroup contenitore di tag per i tag
    opzione imposta una singola riga della lista in un tag
    P destinato alla creazione di paragrafi
    pre definisce una parte di testo preformattata. Output con tutti gli spazi e interruzioni di riga
    Q evidenzia una citazione nel testo
    campione denota testo come codice di programma o formula
    sceneggiatura aggiunge uno script alla pagina
    Selezionare crea un selettore di valore
    span utilizzato principalmente per progettare e/o assegnare un identificatore univoco (id) a una determinata parte di testo
    forte evidenzia logicamente, rafforza il testo.
    stile specifica un foglio di stile
    tavolo definisce una tabella
    il corpo usato per raggruppare le stringhe per specificare la formattazione generale
    td imposta una cella di tabella
    area di testo definisce un campo di input multilinea.
    tpiede utilizzato per definire la riga da visualizzare in fondo alla tabella
    questo definisce la cella dell'intestazione della tabella
    thead utilizzato per definire la riga/righe da visualizzare nella parte superiore della tabella
    titolo definisce il titolo del documento
    vero definisce una riga della tabella
    ul crea un elenco puntato
    varia denota un nome di variabile

    Abbiamo dato incompleto

Principali articoli correlati