HTML5 - Sintassi

Il linguaggio HTML 5 ha una sintassi HTML "personalizzata" che è compatibile con i documenti HTML 4 e XHTML1 pubblicati sul Web, ma non è compatibile con le caratteristiche SGML più esoteriche di HTML 4.

HTML 5 non ha le stesse regole di sintassi di XHTML dove avevamo bisogno di nomi di tag minuscoli, citando i nostri attributi, un attributo doveva avere un valore e chiudere tutti gli elementi vuoti.

HTML5 offre molta flessibilità e supporta le seguenti funzionalità:

Nomi di tag maiuscoli.
Le virgolette sono facoltative per gli attributi.
I valori degli attributi sono facoltativi.
La chiusura degli elementi vuoti è facoltativa.

Il DOCTYPE

I DOCTYPE nelle versioni precedenti di HTML erano più lunghi perché il linguaggio HTML era basato su SGML e quindi richiedeva un riferimento a un DTD.

Gli autori HTML 5 userebbero una sintassi semplice per specificare DOCTYPE come segue:

<!DOCTYPE html>

La sintassi precedente non fa distinzione tra maiuscole e minuscole.

Codifica dei caratteri

Gli autori di HTML 5 possono utilizzare una sintassi semplice per specificare la codifica dei caratteri come segue:

<meta charset = "UTF-8">

La sintassi precedente non fa distinzione tra maiuscole e minuscole.

Il tag <script>

È pratica comune aggiungere un attributo di tipo con un valore di "text / javascript" agli elementi di script come segue:

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 rimuove le informazioni aggiuntive richieste e puoi usare semplicemente la seguente sintassi:

<script src = "scriptfile.js"></script>

Il tag <link>

Finora stavi scrivendo <link> come segue -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 rimuove le informazioni aggiuntive richieste e puoi semplicemente utilizzare la seguente sintassi:

<link rel = "stylesheet" href = "stylefile.css">

Elementi HTML5

Gli elementi HTML5 vengono contrassegnati utilizzando tag di inizio e tag di fine. I tag sono delimitati utilizzando parentesi angolari con il nome del tag in mezzo.

La differenza tra tag di inizio e tag di fine è che quest'ultimo include una barra prima del nome del tag.

Di seguito è riportato l'esempio di un elemento HTML5:

<p>...</p>

I nomi dei tag HTML5 non fanno distinzione tra maiuscole e minuscole e possono essere scritti in maiuscolo o in maiuscolo, sebbene la convenzione più comune sia quella di restare con le minuscole.

La maggior parte degli elementi contiene alcuni contenuti come <p> ... </p> contiene un paragrafo. Alcuni elementi, tuttavia, non possono contenere alcun contenuto e questi sono noti come elementi nulli. Per esempio,br, hr, link, meta, eccetera.

Ecco un elenco completo di elementi HTML5 .

Attributi HTML5

Gli elementi possono contenere attributi utilizzati per impostare varie proprietà di un elemento.

Alcuni attributi sono definiti globalmente e possono essere utilizzati su qualsiasi elemento, mentre altri sono definiti solo per elementi specifici. Tutti gli attributi hanno un nome e un valore e hanno l'aspetto mostrato di seguito nell'esempio.

Di seguito è riportato l'esempio di un attributo HTML5 che illustra come contrassegnare un elemento div con un attributo denominato class utilizzando un valore di "example" -

<div class = "example">...</div>

Gli attributi possono essere specificati solo all'interno dei tag di inizio e non devono mai essere utilizzati nei tag di fine.

Gli attributi HTML5 non fanno distinzione tra maiuscole e minuscole e possono essere scritti in maiuscolo o in maiuscolo, sebbene la convenzione più comune sia quella di restare con le minuscole.

Ecco un elenco completo degli attributi HTML5 .

Documento HTML5

I seguenti tag sono stati introdotti per una migliore struttura:

section- Questo tag rappresenta un documento generico o una sezione dell'applicazione. Può essere utilizzato insieme a h1-h6 per indicare la struttura del documento.
article - Questo tag rappresenta una parte indipendente del contenuto di un documento, come un post di blog o un articolo di giornale.
aside - Questo tag rappresenta una parte di contenuto che è solo leggermente correlata al resto della pagina.
header - Questo tag rappresenta l'intestazione di una sezione.
footer - Questo tag rappresenta un piè di pagina per una sezione e può contenere informazioni sull'autore, informazioni sul copyright, ecc.
nav - Questo tag rappresenta una sezione del documento destinata alla navigazione.
dialog - Questo tag può essere utilizzato per contrassegnare una conversazione.
figure - Questo tag può essere utilizzato per associare una didascalia ad alcuni contenuti incorporati, come un'immagine o un video.

Il markup per un documento HTML 5 sarebbe simile al seguente:

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

Produrrà il seguente risultato: