Guida HTML

Introduzione

HTML è il principale linguaggio di pubblicazione di pagine Web, oltre che uno strumento sempre più utilizzato per la realizzazione di contenuti e applicazioni mobile.
HTML è l’acronimo di HyperText Markup Language (“Linguaggio di contrassegno per gli Ipertesti”) e non è un linguaggio di programmazione ma di markup (di ‘contrassegno’ o ‘di marcatura’), che permette di indicare come disporre gli elementi all’interno di una pagina.

Queste indicazioni vengono date attraverso degli appositi marcatori, detti tag (‘etichette’), che hanno la caratteristica di essere inclusi tra parentesi angolari <tag>

Storia

Nel 1990, Tim Berners-Lee al CERN inventa il www (World Wide Web).
E ha definito la prima versione del linguaggio, fino ai giorni nostri, HTML ha continuato ad evolversi fino a maturare nello standard HTML 5.

Nel 1995 nasceva il W3C: World Wide Web Consortium l’organizzazione fondata dallo stesso Berners Lee con CERN e MIT, che oggi vede coinvolti numerosi istituti universitari e i più importanti attori tecnologici sulla scena mondiale come Apple, Microsoft, Google, Facebook, IBM, Adobe, e moltissimi altri.

Il W3C si occupa di traghettare lo standard attraverso la versione 3.2 (1997) fino alla definizione di HTML 4 nel 1998 e HTML 4.01, la versione che ha sostenuto la crescita del Web di tutti gli anni 2000 arrivando allo standard attuale HTML 5.

HTML 5: Web e Mobile

La versione attuale è l'HTML 5 che è anche la versione che nasce appositamente per uscire dal solo ambito Web e diventare piattaforma per la creazione di applicazioni, anche desktop e mobile.

La specifica HTML5 infatti si compone della definizione di:

  • una sintassi per il markup più efficace e adatta alle esigenze più moderne, con l’introduzione di specifici controlli per i form o degli attributi “data-” da arricchire i tag di informazioni specifiche;
  • una serie di API che consentono di gestire, a livello approfondito aspetti come network, multimedia, e hardware dei dispositivi. In altre parole dalla gestione del video e dell’audio al monitoraggio delle batterie di un device.

Questo sviluppo dello standard ha dato il via alla generazione delle cosiddette App mobile ibride, che sfruttano sia HTML5, per creare app che si possono distribuire, come quelle native, sui marketplace dei dispositivi più comuni (come Google Play per Android ad esempio).

Struttura del HTML

HTML è un linguaggio interpretato dal browser (Chrome, Firefox, Safari ecc.) e per essere visualizzato correttamente il file deve avere l'estensione .html.
La struttura del file è seguente:

<!doctype html> <html lang="it">   <head>    <title> Ciao Mondo! </title>    <meta charset="utf-8">    <meta name="description" content="descrizione della pagina">    <meta name="viewport" content="width=device-width, initial-scale=1.0">   </head>   <body>    <h1> Ciao Mondo! </h1>    <p> Questa è una pagina HTML! </p>   </body> </html>

Elementi e tag in HTML

In una pagina HTML tutti gli elementi sono connotati da tag (letteralmente “etichette”). Si tratta di marcatori che evidenziano non tanto l’aspetto, quanto il senso, il ruolo, o l’organizzazione che vogliamo assegnare ai contenuti.

Questa visione “semantica” degli elementi è fondamentale, ci aiuta a non perdere di vista il fatto che una pagina deve essere un luogo ordinato di informazioni, soprattutto sul Web. Un tag è una keyword del linguaggio racchiusa tra parentesi angolari < tag >

Elementi inline e block

I tag HTML possono rappresentare oggetti (come ad esempio le immagini) o servire a suddividere la pagina in aree (come i <div> o le <section>). Ci sono diverse tipologie di tag e conoscerle diventa determinante per usare il tag giusto al posto giusto e per applicare in seguito le regole CSS.

Le principali tipologie di visualizzazione in cui si dividono gli elementi sono:

  • Block - Elementi che costituiscono un blocco attorno a sé. Non fanno parte di un testo e di conseguenza mandano a capo, come i paragrafi i div o le section.
  • Inline - Elementi che non vanno a capo e possono essere integrati nel testo, come i link, le immagini, oppure gli span
  • Liste - Liste numerate o non numerate. Sono simili agli elementi blocco con una struttura particolare, ideali per definire elenchi o menu

Gli Attributi

I tag HTML possono essere corredati di uno o più attributi, che servono per meglio specificare la funzione o la tipologia dell’elemento, per memorizzare dati o per arricchire di significato il contenuto.

Un tag con attributi si scrive in questo modo:

<tag attributo1="valore1" attributo2="valore2">

Ecco un esempio pratico:

<input type="email" name="email" placeholder="Scrivi il tuo indirizzo email...">

Quindi sono coppie chiave-valore separate dal carattere = (uguale), i valori sono tipicamente racchiusi tra virgolette "", ma è possibile anche utilizzare gli apici ''. Si scrivono lasciando almeno uno spazio dopo il nome dell’elemento nel tag di apertura (o nell’unico tag nel caso di elementi non contenitori).

Gli attributi data-

Lo standard HTML5 ha introdotto i cosiddetti "data-attributes", ovvero degli attributi inseriti nei tag allo scopo di ritenere alcune informazioni utili alla gestione del layout o a supporto dell’interfaccia utente.

In pratica possiamo definire un attributo con il prefisso data-, seguito dal nome (es. data-cognome) e assegnare ad esso un valore proprio come facciamo con gli altri attributi.

Mettiamo ad esempio di avere un’agenda e di voler mostrare l’indirizzo e il numero di telefono quando passiamo vicino ai nomi in un elenco. Possiamo associare tutte le informazioni che ci servono ad ogni elemento lista (<li>) grazie agli attributi “data-” e raggiungerli poi facilmente via JavaScript.

<ul id="elenco">   <li data-indirizzo="Piazza la lenza" data-telefono="3863535555">Luca</li> </ul>

Lista dei tag

Questa sezione contine la lista completa dei tag in HTML5

Structural Tags

Tag Descrizione
<a> Collegamento ipertestuale
<article> Testo di un articolo
<aside> Testo all'interno della spalla
<body> Rappresenta il corpo del documento
<br> Inserisce una singola andata a capo
<details> Raggruppa dettagli aggiuntivi che l'utente può vedere o nascondere tramite freccia
<div> Contenitore generico
<h1> .. <h6> Intestazioni
<head> Contenitore del titolo di un documento
<header> Rappresenta header del documento o sezione
<hr> Inserisce linea orizontale
<html> Root del documento html
<footer> Pie di pagina/documento html
<nav> Sezione per i link di navigazione
<p> Paragrafo
<section> Sezione generica del documentop (es: header, footer ecc)
<span> Contenitore inline
<summary> Intestazione per <details>

Metadata Tags

I tag di metadata non hanno la chiusura, il contenuto và inserito direttamente al suo interno.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Tag Descrizione
<base> Specifica la base URL per tutti gli URL relativi in un documento
<link> Richiama risorse esterne
<meta> Metadati
<style> Inserimento dei fogli di stile nel head del documento
<title> Definisce il titolo del documento html

Form Tags

Tag Descrizione
<button> Bottone cliccabile
<datalist> Raggruppa opzioni
<fieldset> Raggruppa elementi in un modulo
<form> Definisce un form/modulo
<input> Controllo per emmissione dati
<keygen> Genera chiavi doppie
<label> Etichetta per <input>
<legend> Didascalia per <fieldset>
<optgroup> Raggruppa opzioni in un elenco a discesa. Appare in grassetto
<option> Opzione in un elenco a discesa ( <select> )
<select> Elenco a discesa con opzioni
<textarea> Area di testo a righe multiple

Formatting Tags

Tag Descrizione
<abbr> Defines an abbreviated form of a longer word or phrase.
<acronym> Defines an acronym.
<address> Specifies the author's contact information.
<b> Displays text in a bold style.
<bdo> Overrides the current text direction.
<big> Displays text in a large size.
<blockquote> Defines a long quotation.
<cite> Indicates a citation or reference to another source.
<code> Specifies text as computer code.
<del> Specifies a block of deleted text.
<dfn> Specifies a definition.
<em> Specifies emphasized text. (italic style for SEO)
<i> Displays text in an italic style.
<ins> Defines a block of text that has been inserted into a document.
<kbd> Specifies text as keyboard input.
<mark> Represents text highlighted for reference purposes. hello world
<output> Represents the result of a calculation.
<pre> Defines a block of preformatted text.
<progress> Represents the completion progress of a task.
<small> Displays text in a smaller size.
<strong> Indicate strongly emphasized text. (SEO)
<sub> Defines subscripted text.
<sup> Defines superscripted text.
<tt> Displays text in a teletype style.
<var> Defines a variable.
<wbr> Represents a line break opportunity.

List Tags

Tag Descrizione
<dd> Specifies a definition for a term in a definition list.
<dl> Defines a definition list.
<dt> Defines a term (an item) in a definition list.
<li>> Defines a list item.
<ol> Defines an ordered list.
<menu> Represents a list of commands.
<ul> Defines an unordered list.

Table Tags

Tag Descrizione
<caption> Defines the title of a table.
<col> Defines attribute values for one or more columns in a table.
<colgroup> Specifies attributes for multiple columns in a table.
<table> Defines a data table.
<tbody> Groups a set of rows defining the main body of the table data.
<td> Defines a cell in a table.
<tfoot> Groups a set of rows summarizing the columns of the table.
<thead> Groups a set of rows that describes the column labels of a table.
<th> Defines a header cell in a table.
<tr> Defines a row of cells in a table.

Scripting Tags

Tag Descrizione
<noscript> Defines alternative content to display when the browser doesn't support scripting.
<script> Places script in the document for client-side processing.

Embedded Content Tags

Tag Descrizione
<area> Defines a specific area within an image map.
<audio> Embeds a sound, or an audio stream in an HTML document.
<canvas> Defines a region in the document, which can be used to draw graphics on the fly via scripting (usually JavaScript).
<embed> Embeds external application, typically multimedia content like audio or video into an HTML document.
<figcaption> Defines a caption or legend for a figure.
<figure> Represents a figure illustrated as part of the document.
<frame> Defines a single frame within a frameset.
<frameset> Defines a collection of frames or other frameset.
<iframe> Displays a URL in an inline frame.
<img> Displays an inline image.
<map> Defines a client-side image-map.
<noframes> Defines an alternate content that displays in browsers that do not support frames.
<object> Defines an embedded object.
<source> Defines alternative media resources for the media elements like <audio> or <video>.
<time> Represents a time and/or date.
<video> Embeds video content in an HTML document.

Conclusioni

È una buona abitudine quella di validare il codice HTML, per vedere se ci sono gli errori. Per farlo si utilizza validatore del W3C (che è il più noto)