Elementi semantici in HTML5

Elementi semantici in HTML5  descrivono in modo più chiaro il significativo e lo scopo del materiale iin loro rachiuso sia per il browser sia per motori di ricerca e anche per gli sviluppatori  Web.

Prima dell'arrivo di HTML5 il markup di una pagina si faceva con aiuto di semplici div  <div>, ai quali venivano assegnati o classi o identificatori in forma di id  con rispettiva segnalazione gia nel id  a cosa serve rispettiva parte del codice  (ad esempio, <div id = "header">). Con loro utilizzo in HTML documento venivano creati blocchi laterali varie menu  e molto altro ancora.

 

Standard HTML5 ha fornito nuovi elementi alla struttura, per raggruppamento del contenuto e marcatura del contenuto testuale. I nuovi elementi semantici migliorato la struttura della pagina web, aggiungendo il significato dal contenuto in esso racchiuso  (quello che  era <div id = "header">, diventato il <header>). Per visualizzazione  l'aspetto di questi elementi non è stata predefinita  alcuna regola, quindi gli elementi possono avere qualsiasi aspetto regolato dagli stili.

Nuovi  HTML5 elementi.

1. Elementi sezionali

1.1. Elemento <header>

Raggruppa gli elementi di ingresso e di navigazione, non è obbligatorio. Può contenere intestazioni, indice della pagina o  casella di ricerca, logo, raggruppare il titolo principale o  un gruppo di titoli, che a sua volta possono essere  avvolti da  elemento <hgroup>. In un documento HTML possono esser ci  più di un elemento <header> e possono essere ubicati in qualsiasi parte della pagina.

<header>
  <hgroup>
    <h1>...</h1>
    <h2>...</h2>
  </hgroup>
</header>

Elemento <header>  non può essere collocato all'interno del elementi <footer>, <address>, o in un altro elemento <header>.

Elemento header rappresenta una introduzione al contenuto del suo più vicino antenato - sezione o sezioni (article, aside, nav, section ) o del elemento radice della sezione (body, blockquote, fieldset, figure, details, td ).
Se l'antenato più vicino della sezione o di un altro elemento dove e stato usato il tag header  è il tag  dody allora elemento header rappresenta  intestazione dell'intera pagina.
Cioè, l'elemento header si trova al interno della sezione o capitolo per cui genitore più vicino è elemento body.

1.2. Elemento <hgroup>

Usato per raggruppare gli elementi <h1> - <h6> nel caso in cui l'intestazione ha una struttura complessa, per esempio, sotto tittoli , titoli alternativi, ecc

<hgroup>
 <h1>...</h1>
 <h2>...</h2>
</hgroup>

1.3. Elemento<Nav>

Progettato per creare navigazione per una pagine Web o per sito intero, non deve necessariamente essere all'interno del <header>. La pagina può avere diversi elementi <nav>. Non sostituisce il tag <ul> o <ol>, ma  semplicemente li avvolge. Non tutti i gruppi di link sulla pagina dovrebbero essere avvolti nel <nav>, questo tag è destinato principalmente per le sezioni che comprendono  grandi blocchi di navigazione.

<nav>
  <ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
  </ul>
</nav>

Come  voci di  un menu non è necessario utilizzare elementi di elenchi  :
  <nav>
  <p><a href="/">...</a></p>
  <p><a href="/">...</a></p>
</nav>

Inoltre è possibile aggiungere intestazioni all'interno dell'elemento:

 <nav>
  <h2>...</h2>
    <ul>
      <li><a>...</a></li>
      <li><a>...</a></li>
      <li><a>...</a></li>
    </ul>
</nav>

1.4. Elemento <article>

E 'utilizzato per raggruppare varie  pubblicazioni, articoli, blog, commenti. Rapresenta  un'unità separata indipendente, progettata  per l'uso ripetuto, di solito inizia con un'intestazione. Puo essere duplicato su altre pagine del sito e contenere altri elementi <article> all'interno, che nel contenuto sono strettamente correlati al contenuto di articolo esterno. Se sulla pagina c'e un solo articolo  con un titolo e il contenuto testuale, allora esso non ha bisogno di un elemento di involucro <article>.

 <article>
  <header>
    <h2>...</h2>
  </header>
  <p>...</p>
  <footer>
  Pubblicato in categoria<a href="/?cat=2" > Musica</a>.
    <a href="/?p=17#respond">0 commenti</a>
  </footer>
</article>

1.5. L'elemento <section>

Elemento rappresenta una  sezione universale di un documento. Raggruppa  il contenuto tematico non si utilizza  ristrettamente e di solito contiene il titolo. Non è un blocco-involucro per questi scopi meglio  utilizzare tag <div>. Come contenuto di tag <section> possono  essere  contenuto diviso in capitoli, capitoli di  pubblicazioni scientifiche, programma dell'evento. La home page del sito anche essa può  essere suddivisa in sezioni -  blocco d'informazione d'introduzione , notizie e contatti.

 <article>
  <h1>...</h1>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <p>...</p>
</article>

<Article> è al interno di  <section>

È possibile creare elementi genitori <section>con  elementi annidati <article>, dove  è uno o più elementi del <article>. Non tutte le pagine devono essere strutturate  in questo modo, ma è un valido metodo di annidamento d'elementi. Ad esempio, l'area principale del contenuto della pagina contiene due blocchi di articoli su argomenti diversi. Si può fare su questo un  accento, ponendo ogni contenuto di un argomento in un elemento <section>

 <section>
  <h1>Appunti di natura </h1>
    <article>
      <h2>...</h2>
      <p>...</p>
    </article>
    <article>
      <h2>...</h2>
      <p>...</p>
    </article>
</section>
<section>
  <h1>Appunti di storia./h1>
    <article>
      <h2>...</h2>
      <p>...</p>
    </article>
    <article>
      <h2>...</h2>
      <p>...</p>
    </article>
</section>

1.6. Elemento <aside>

Raggruppa  il contenuto associato con il contenuto circostante direttamente, ma che può essere considerato come separato (cioè, la rimozione di questa unità  non influenzerà la comprensione del contenuto). Molto spesso elemento viene posizionato come una colonna laterale (come nei libri o giornali ), e comprende un gruppo di elementi: <nav>, i dati digitali, le citazioni, le unità pubblicitarie, documenti d'archivio. Non adatto per i blocchi, semplicemente posizionati sui lati.

 <aside>
  <h2>...</h2>
  <p>...</p>
</aside>

 <aside>
  <h2>...</h2>
  <p>...</p>
  <blockquote>
    <p>...<cite>...</cite>...</p>
    <p>...</p>
  </blockquote>
</aside>

1.7. Elemento <footer>;

Ra presenta il blocco piu basso della sezione o della pagina. Di solito contiene informazioni circa l'autore, informazioni di copyright, ecc. Se usato come intestazione della pagina intera puo contenere    informazioni sui diritti d'autore, riferimenti alle condizioni di utilizzo, le informazioni di contatto, link a contenuti correlati, etc.

In un documento Web possono essere più elementi <footer>. Come ogni pagina, anche ogni elemento può avere un proprio elemento <footer>, inoltre tag <footer> può essere posizionato al interno del elemento  <blockquote>, per indicare la fonte della  citazione.

 <footer>
  <address>...</address>
  <small>@2014...</small>
</footer>

1.8. Elemento<address>

Utilizzato per determinare le informazioni di contatto dell'autore / proprietario del documento o un articolo. Per indicare l'autore del documento il tag viene posizionato all'interno dell'elemento <body>, per visualizzare l'autore di un articolo nel tag <article>. Nel browser, di solito il contenuto di questo tag viene visualizzati in corsivo.

2. Raggruppamento di contenuti

2.1. Elementi <figure> e <figcaption>

Elemento<figure> rappresenta un contenuto autonomo, eventualmente con intestazione <figcaption>, che rapresenta un elemento indipendente nel  flusso. L'elemento può essere spostato dal contenuto principale del documento nella barra laterale o applicazione, senza influenzando il flusso del documento. Con aiuto d'elemento <figure> è possibile aggiungere note alle illustrazioni, fotografie, diagrammi, frammenti di codice.

 <figure>
    <img src="/picture.jpg" alt="Autunno">
    <figcaption>Bosco autunnale </figcaption>
</figure>

L'elemento <figure> e un elemento di  blocco, come  larghezza occupa tutta la largezza del blocco esso continente  meno margine esterno:margin: margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em.

Elemento <figcaption> è un elemento di blocco, la larghezza è uguale alla larghezza dell'elemento <figure>, altezza è di 18px.

3. La semantica di contenuti di testo

3.1. Gli elementi a supporto lingue asiatiche <rp>, <rt> e <ruby>

 

Tag <rp> indica cosa visualizzare se il browser non supporta le annotazioni di tipografia orientale . Utilizzato in combinazione con i tag <ruby> e <rt>.

Il tag <rt> aggiungere annotazioni che spiegano la scrittura dei caratteri asiatici racchiusi in un contenitore <ruby>.

Il tag <ruby> spiega la scrittura dei caratteri.

3.2. Elemento <time>

Specifica il tempo (24 ore) o la data del calendario gregoriano, con una possibile indicazione del tempo e fuso orario. Il testo racchiuso in questo  tag, non ha nessun stile predefinitonel browser. Per tag e disponibile attributo datetime, come il contenuto di esso viene indicato quello che   l'utente vedrà sullo schermo del computer:

 <time datetime="2016-09-25"> 25 Setembre2016</time>

Che la data fosse riconoscuita e letta dal browser esso deve essere nel  formato YYYY-MM-DD . Tempo, che può anche essere indicato, è specificato nel formato HH: MM con l'aggiunta del prefisso di separazione  T (time):

<time datetime="2016-09-25T12:00"> 25 Settenbre2016</time>

3.3. Elemento <mark>

Testo inserito all'interno del tag <mark>,  per impostazione predefinita viene evidenziato dal colore  giallo (colore di sfondo e colore di caratteri possono essere modificati  tramite gli stili CSS ).Con aiuto di questo tag  è possibile evidenziare  il contenuto importante o parole chiave.

3.5. Elemento <wbr>

Tag singolo, indica al  browser dove visualizzare la rottura di un astringa troppo lunga se è necesario.

Poiché questi elementi sono chiamati semantica, quindi, posimo  fare riferimento alla traduzione del nome:
article - un articolo, paragrafo, rubrica;
section – sezione, capitolo

Di conseguenza, la section è un contenitore per oggetti piccoli - articoli. Ad esempio, prendere un giornale. Ha una colonna (sezione), come l'economia, la politica, gli eventi, che consistono di articoli (article). Cio è rappresenta una rubrica tematica e che è unica in tutto il giornale, e article in questo caso viene utilizzato spesso per raggruppare materiale, essendo da contenitore per  il titolo, data di pubblicazione, le immagini dell'autore e il testo stesso.

Per quanto riguarda l'uso di questi tag ritengo il loro uso giustificato per i blog. Per quanto riguarda i negozi on-line ne ho dubbi, in quanto la scheda della  merce con la sua descrizione difficilmente può essere definita come un  articolo.

P.S. elementi semantici del HTML5 come argomento sono abbastanza difficili da capire, per cio non si esclude il loro uso inappropriato o abusivo. Importante che il sito funzioni e svolge il suo compito.

Letto 694 volte
Altro in questa categoria: « HTML5 video Form in HTML. »

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso