Articolo originale: What is HTML – Definition and Meaning of Hypertext Markup Language

HTML, o Hypertext Markup Language, è un linguaggio di markup per il web che definisce la struttura delle pagine web.

È uno degli elementi costitutivi di ogni sito web, ed è quindi un linguaggio fondamentale da imparare per intraprendere una carriera nello sviluppo web.

In questo articolo, ti illustrerò in dettaglio di cosa tratta l'HTML e come viene impiegato sulle pagine web; inoltre, toccheremo anche una parte davvero interessante dell'HTML: l'HTML semantico.

Cos'è l'HTML?

Per capire pienamente il significato di "HTML", diamo un'occhiata a ogni parola che compone l'acronimo:

Hypertext: testo (spesso anche con incorporamenti come immagini) organizzato in modo da collegare elementi correlati

Markup: una guida di stile per la composizione di qualsiasi cosa da stampare in formato cartaceo o digitale

Language: una lingua che un computer comprende e utilizza per interpretare i comandi.

L'HTML determina la struttura delle pagine web. Ma questa struttura da sola non è sufficiente per rendere una pagina web graficamente piacevole e interattiva. Quindi è necessario usare altre tecnologie, come CSS e JavaScript, rispettivamente per agire sull'estetica dell'HTML e per aggiungere interattività.

Per farti capire meglio, suddividiamo le tre tecnologie - HTML, CSS e JavaScript - in questo modo: sono come parti del  corpo umano.

  • HTML è lo scheletro,
  • CSS è la pelle,
  • e JavaScript è il sistema circolatorio, digestivo e respiratorio che dà vita alla struttura e alla pelle.

Puoi anche guardare HTML, CSS e JavaScript in questo modo: HTML è la struttura di una casa, CSS è l'arredamento interno ed esterno, mentre JavaScript comprende l'elettricità, il sistema idrico e molte altre caratteristiche funzionali che rendono la casa vivibile.

Tag HTML

Poiché l'HTML definisce il markup per una particolare pagina web, è desiderabile che il testo, le immagini o altri contenuti incorporati appaiano in determinati modi.

Ad esempio, potresti volere che un testo sia grande, altro testo piccolo e dell'altro in grassetto, corsivo o come un punto di un elenco.

L'HTML ha dei "tag" che ti consentono di farlo. Ci sono tag per creare: intestazioni, paragrafi, parole in grassetto, parole in corsivo e altro ancora.

L'immagine seguente descrive l'anatomia di un tag HTML:

anatomia-di-un-tag-html
I tag HTML di apertura (a sinistra) sono costituiti da parentesi angolate contenenti il nome del tag. I tag di chiusura (a destra) contengono anche una barra obliqua.

Elementi HTML

Un elemento è costituito dal tag di apertura, un carattere, il contenuto e un tag di chiusura. Alcuni elementi sono vuoti, ovvero non hanno un tag di chiusura ma hanno invece una fonte o un collegamento al contenuto da incorporare nella pagina web.

Un esempio di elemento vuoto è <img>, usato per incorporare immagini in una pagina web.

Gli elementi HTML sono spesso usati in modo intercambiabile con i tag, ma c'è una piccola differenza tra i due. Un elemento è la combinazione del tag di apertura e di chiusura e quindi del contenuto tra di essi.

Ho creato un'altra immagine per aiutarti a visualizzare l'anatomia di un elemento HTML:

anatomia-di-un-elemento-html
Elemento = tag di apertura + contenuto + tag di chiusura

Attributi HTML

I tag HTML accettano anche quelli che vengono chiamati attributi. Questi attributi vengono inseriti nel tag di apertura e vanno da style e id fino a class. Assumono valori, che trasmettono più informazioni sull'elemento e aiutano a fare cose come definire lo stile e la manipolazione con JavaScript.

Nell'infografica qui sotto, il tag di apertura contiene un attributo class con un valore di “text”. Questo può essere utilizzato per definire lo stile dell'elemento o selezionarlo con JavaScript per l'interattività.

attributo-1

Ecco l'anatomia di una pagina HTML di base:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>
  <body>
    <!--Il contenuto della pagina, come testo e immagini, va qui-->
  </body>
</html>

Diamo un'occhiata alle parti importanti del codice qui:

<!Doctype html>: specifica che stiamo usando HTML5 in questo codice. Prima dell'introduzione di HTML5, dovevi indicare esplicitamente quale versione di HTML stavi usando con il tag <!Doctype>. Ad esempio, HTML4.0, 3.2 e così via. Ma ora non ne abbiamo più bisogno. Quando "html" è scritto nel codice, il browser presuppone automaticamente che tu stia usando HTML5.

<html></html>: il "root", o elemento di primo livello di ogni documento HTML. Ogni altro elemento deve essere racchiuso al suo interno.

<head></head>: una delle parti più cruciali del documento HTML. I web crawler guardano all'interno dei tag head per ottenere informazioni importanti sulla pagina. Contiene informazioni come il titolo della pagina, fogli di stile, meta dati per SEO e molto altro.

<meta />: questo è un elemento vuoto che trasmette meta-informazioni sulla pagina. Tali informazioni possono includere l'autore, il tipo di codifica utilizzato (quasi sempre UTF-8), la responsività, la compatibilità e molto altro. I web crawler guardano usano i tag meta per ottenere informazioni sulla pagina web, che svolgerà un ruolo cruciale nella SEO.

<title></title>: definisce il titolo della pagina web. Viene sempre visualizzato nella scheda del browser.

<body></body>: tutto il contenuto del documento HTML si trova all'interno del tag body. Può esserci un solo tag <body> su tutta la pagina.

Cos'è l'HTML semantico?

HTML semantico significa che i tag HTML trasmettono il significato effettivo di ciò per cui sono utilizzati.

La semantica è stata parte integrante dell'HTML sin dal suo inizio nei primi anni '90. Ma non ha mai acquisito particolare rilevanza fino alla fine degli anni '90, quando il CSS ha iniziato a funzionare nella maggior parte dei browser.

Con l'HTML semantico, tag semanticamente neutri come <div> e <span> vengono accantonati poiché vengono preferiti tag semanticamente più descrittivi come <header>, <nav>, <main>, <section>, <footer>, <article>.

Un notevole vantaggio dell'utilizzo dei tag semantici è che i web crawler sono in grado di indicizzare facilmente la pagina web o il sito web, migliorando in cambio la SEO.

Inoltre, un sito web che utilizza la semantica diventa più informativo, adattabile e accessibile a coloro che utilizzano lettori di schermo o tecnologie assistive per accedere al web.

Tag semantici importanti e cosa fanno

Diamo un'occhiata ad alcuni dei tag HTML semantici più comunemente usati:

<header>: l'elemento <header> definisce la sezione introduttiva di una pagina web. Contiene elementi come il logo, la navigazione, il selettore di temi e la barra di ricerca.

<nav>: l'elemento<nav> specifica gli elementi di navigazione della pagina come home, contatti, informazioni, FAQ e così via.

<main>: l'elemento <main> è trattato convenzionalmente come l'immediato discendente del tag. Contiene le sezioni principali del documento HTML oltre a <header> e <footer>. Idealmente, dovrebbe essercene solo uno nell'intero documento HTML.

<section>: l'elemento <section> definisce una particolare sezione della pagina web. Questa può essere la sezione vetrina, la sezione informazioni, la sezione contatti o altro. Puoi utilizzare numerose sezioni in un singolo documento HTML.

<article>: l'elemento <article> rappresenta una certa parte di una pagina web che trasmette alcune informazioni particolari. Tali informazioni potrebbero essere una combinazione di testo, immagini, video e contenuti incorporati. Considera questo elemento come un post autonomo di un blog in una pagina contenente estratti di altri post di blog.

<aside>: come suggerisce il nome, rappresenta una barra laterale su una pagina web. Di solito è una parte della pagina web che non è direttamente correlata al contenuto principale.

<footer>: l'elemento<footer> ospita elementi come collegamenti rapidi, informazioni sul copyright o qualsiasi altro dato relativo all'intero sito web o pagina web.

Inoltre, poiché gli elementi semantici trasmettono il significato effettivo di ciò fa un particolare contenuto (come nav per la navigazione, aside per una barra laterale e così via), questi elementi non vengono posizionati automaticamente dove dovrebbero essere. La loro posizione deve essere stabilita nel CSS.

Un documento HTML semantico super semplice ha questo aspetto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>

  <body>
    <header>
      <h1 class="logo">LOGO</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>FAQs</li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="about-me">
        <article>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
          est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
          nesciunt, nisi inventore assumenda earum repellat labore ratione
          architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
          soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
          voluptatem quam at officia beatae!
        </article>
      </section>
      <section class="contact-me">
        You can find me on
        <a href="https://twitter.com/koladechris">Twitter</a> You can find me on
        <a href="https://Instagram.com/koladechris">Instagram</a>
      </section>
      <aside class="address">My Address</aside>
    </main>
    <footer>© 2020 All Rights Reserved</footer>
  </body>
</html>

Ecco come appare nel browser:

semanticHTML-4

Puoi notare che il contenuto all'interno del tag <aside> non è nella barra laterale e il contenuto all'interno del  tag <nav> non è automaticamente disponibile come barra di navigazione. Questo è il motivo per cui devi dare le istruzioni per farli apparire correttamente all'interno del CSS.

Conclusione

Spero che questo articolo ti abbia aiutato a imparare le basi dell'HTML e a cosa serve. Ora puoi iniziare a imparare tecnologie più avanzate come CSS e JavaScript, e quindi iniziare a formare le conoscenze necessarie per avere una solida carriera nello sviluppo web.

Grazie mille per aver letto e buon divertimento.