Heading tags (titoli, sottotitoli) nei Forum: quello che c'è da sapere

Giulio_M

Dopo aver parlato di Immagini nei Forum: quello che c'è da sapere, vediamo ora un altro tema importante, gli Heading Tags. Chi ha un minimo di pratica di HTML sa di cosa sto parlando e vediamo cosa significa per il Markdown nei Forum (tramite simbolo cancelletto):

questo è un h1 (titolo principale)

sintassi: # titolo

questo è un h2 (titolo secondario, ad esempio il titolo di un paragrafo)

sintassi: ## titolo

questo è un h3 (sottotitolo di un paragrafo, sotto-classificazione di sottotitoli di un paragrafo che ha titolo h2)

sintassi: ### titolo

[... continua con h4,h5,h6]

questo è un h6 (e chi lo usa? ahah 😅 )

sintassi: ###### titolo

Questo è un paragrafo, "testo normale"

Fatta questa premessa: nei Forum come anche qui, facendo uso del Markdown usiamo questa sintassi, alcune scelte stilistiche possono essere ottenute anche con il BBCode nel complesso però più datato e obsoleto, non sempre supportato.

Cosa accade quando creiamo una discussione?

(l'ho scritto tramite h2 🙂)

il tag title (titolo della scheda pagina) è il titolo da noi impostato, così come l'URL si genera in questo modo
il titolo della discussione, all'interno della pagina, tendenzialmente dovrebbe essere un h1, vedo che viene trattato come h2 (poco cambia dai)
la meta description è la descrizione del testo della domanda (non i successivi commenti), poi viene ovviamente tutto il contenuto della pagina

In generale, non è un obbligo ma se ha senso creare una struttura di titoli e sottotitoli (title e h1 sono già creati, se nella nostra discussione abbiamo una suddivisione in paragrafi, come titolo dei vari paragrafi può avere senso usare un h2 (ovvero come abbiamo visto: ## testo).

Una cosa importante: struttura è diverso da stile! (questo dovrei quasi scriverlo tramite h1, per restare in tema ahah). Ovvero i benefici di strutturare il testo tramite heading tags offre anche ai motori di ricerca un'indicazione di quelli che sono i titoli e sottotitoli, parole chiave e quindi posizionamento. È solamente una piccola parte, certo, ma per capirci è differente dall'effetto grafico creato con [size=...]testo[/size], appunto BBCode, che va bene in termini grafici, di stile, ma appunto come detto, se vogliamo avere consapevolezza della struttura, è bene considerare gli heading tags (almeno sapere che esistono).

Spero sia utile! Cosa ne pensate? Volete aggiungere qualcosa? 🙂

𝕴𝖑_𝕻𝖊𝖓𝖘𝖆𝖙𝖔𝖗𝖊_

Giulio_M

ok

molto interessante

<article>Grazie<article> boh😂😂👍

Giulio_M

Dato che abbiamo parlato di heading tags e HTML, vediamo un approfondimento (html.it):

Evoluzione da HTML 4 ad HTML 5: i tag semantici

Cosa sono i tag semantici?

Il web si evolve, anche per una migliore comprensione per i motori di ricerca con il nuovo standard HTML 5 sono stati introdotti nuovi tag, detti tag semantici (Wikipedia), che << descrivono espressamente il proprio significato >>

Quali sono i tag semantici?

Ad esempio abbiamo: <header>, <footer>, <article>, <aside>, <section>, <details>, <nav>, <picture>, <figure>, ecc (una lista più completa su html.it)

Tag semantici: e noi qui (insomma, nella pratica a cosa servono? 😅 )

Come per tutte le cose, l'introduzione di un nuovo standard significa andare (in questo ambito) verso una migliore comprensione, accessibilità, usabilità del web. Obbligatorio no, così come gli altri tag non saranno obsoleti da un giorno all'altro. Ma se abbiamo una galleria di immagini, ha più senso racchiuderle in un tag <figure> piuttosto che il solito <div> che viene utilizzato per tutto.

La questione tag semantici meriterebbe un approfondimento a parte, come detto prima non è indispensabile usarli tutti e dimenticarci del classico e generico <div> per esempio, ma consideriamo l'importanza che hanno e la direzione che si vuole seguire. I motori di ricerca comprendono meglio il contenuto della pagina, lo classificano meglio e ci premiano (con un migliore posizionamento, più pertinente e rilevante, nel complesso questa maggiore chiarezza porta benefici a tutti).

Giulio_M

𝕴𝖑_𝕻𝖊𝖓𝖘𝖆𝖙𝖔𝖗𝖊_ ahah certo, i primi tag che hai scritto hanno proprio generato gli heading tags, da h1 fino ad h6. Questo è appunto il Markdown, sintassi per un Forum, mentre i tag che hai messo alla fine (ad esempio <article>) non hanno implementazione qui, si tratta di tag HTML! Non un linguaggio da inserire in un Forum che viene successivamente convertito in HTML (non so se mi sono spiegato... tu qui hai usato il simbolo cancelletto # come ho infatti indicato nella guida, mentre in una pagina HTML scriveresti direttamente <h1>titolo</h1> e così via 🙂).
La cosa importante da capire, riguardo all'ultimo aggiornamento che ho messo ovvero i tag semantici, è che essi servono per una migliore comprensione del web (ripeto, non necessario ma è chiaramente preferibile rispetto ad usare una serie di <div> annidati tutti uguali che di per sé non dicono nulla del contenuto).

Per avere una panoramica migliore di tutti questi nuovi tag, a cosa servono: Guida HTML 5

Quindi questa direzione semantica del web e del nuovo standard di HTML (nuovo per modo di dire, HTML 5 è nato a fine 2014, casomai siamo noi ad essere rimasti "indietro" 😁 ) non è puramente codice, non è puramente SEO, da questo è proprio nato un corso del grande Giorgio Taverniti Corso HTML per SEO (oltre 8 ore di video YouTube, molto utile e interessante).