Strutturazione XHTML 2: Caso di studio: Struttura dei tag strutturati di W3school

In qualsiasi caso, non saltare questa sezione. La lettura di questo capitolo migliorerà le tue competenze, farà dimagrire il tuo sito web e ti farà avere una visione più chiara delle differenze tra marchi e design. Le idee presentate in questo capitolo sono facili da imparare ma possono migliorare notevolmente le prestazioni del sito, nonché la facilità di progettazione, creazione e aggiornamento del sito.

In questa sezione, imparerai come scrivere marchi logici e compatti, che ti permetteranno di ridurre il traffico di banda di circa il 50%, riducendo contemporaneamente il carico e la pressione del server e riducendo il tempo di caricamento del sito. Rimuovendo quegli elementi di presentazione e cambiando quelle cattive abitudini che non portano alcun beneficio, possiamo raggiungere gli obiettivi sopraindicati.

Queste cattive abitudini affliggono molti siti web, specialmente quelli che combinano codice CSS con layout basati su tabelle. Questo metodo è ingombrante ed economicamente inefficiente, anche per designer che hanno esperienza in altri campi. Inoltre, la probabilità di incorrere in questo problema è uguale, sia per i siti che scrivono manualmente il codice, sia per quelli che utilizzano strumenti di editing visivo, come Dreamweaver e GoLive.

Questa sezione affronta questi errori comuni, in modo che tu possa riconoscerli e prevenirli, e imparare come correggerli. Spieghiamo in dettaglio l'attributo identificatore univoco (id) e mostriamo come ti permette di scrivere codice XHTML estremamente compatto, sia che crei un layout misto o un layout puramente CSS.

Ogni elemento deve essere strutturato?

Come abbiamo spiegato nella sezione precedente, ogni elemento può essere strutturato, CSS può rendere una lista ordinata o non ordinata una barra di navigazione completa, con anche l'effetto di inversione dei pulsanti. Il contenuto del documento può essere etichettato con elementi comuni, che indicano il ruolo semantico che essi interpretano nel design del sito tramite attributi strutturati specifici.

Abbiamo creato la prima versione di test in cinese di CodeW3C.com nel 2006, abbiamo usato CSS per il layout sin dall'inizio e XHTML per strutturare il documento. Ogni elemento all'interno è strutturato, dai titoli alle liste, fino ai paragrafi. Puoi vedere i pulsanti di homepage con effetto di inversione e i pulsanti di menu di secondo livello su ogni pagina di CodeW3C. Ecco il codice XHTML di questi due componenti:

<div id="header"><h1><a href="/">codew3c tutorial online</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Script del server">Script del server</a></li>
<li id="d"><a href="/d.asp" title="Tutorial dot net">Tutorial dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorial multimediale">Tutorial multimediale</a></li>
<li id="w"><a href="/w.asp" title="Manuale di costruzione del sito">Manuale di costruzione del sito</a></li>
</ul>
</div>

div, id e altri aiuti

Se utilizzato correttamente, div può diventare un ottimo aiuto per la markup strutturata, mentre id è uno strumento sorprendente che ti permette di scrivere XHTML estremamente compatto e di utilizzare CSS in modo elegante, aggiungendo comportamenti complessi e raffinati al sito tramite il modello oggettuale del documento standard (DOM).

W3C definisce così l'elemento div nel modello di struttura XHTML del suo ultimo draft XHTML2:

L'elemento div, combinato con attributi come id, class e role, fornisce un meccanismo universale per aggiungere struttura aggiuntiva al documento. Questo elemento non definisce lo stile di presentazione del contenuto. Pertanto, i creatori possono utilizzare questo elemento insieme a fogli di stile, xml:lang e altri attributi per adattare XHTML alle loro esigenze e preferenze.

Div è l'abbreviazione di division. Divisione significa segmentazione, area, gruppo. Ad esempio, quando si combinano una serie di link, si forma una divisione del documento.

Determinare il meccanismo universale per la struttura

Tutti coloro che scrivono HTML sono familiari con elementi comuni come paragrafi e titoli, ma qualcuno potrebbe non essere così familiare con div. Nella descrizione di W3C possiamo trovare la chiave per comprendere l'elemento div, "un meccanismo universale per aggiungere struttura."

Nella pagina iniziale di questo sito, abbiamo racchiuso l'elenco delle categorie dei manuali in un div, perché l'elenco delle categorie non fa parte di alcun elemento del testo. Gli elementi h2 indicano il titolo di ogni manuale, mentre l'elenco ul indica la lista dettagliata di ogni manuale. Ma in un senso più ampio, questa categoria dei manuali gioca un ruolo strutturato, ossia quello di componente di navigazione di secondo livello. Per enfatizzare questo ruolo, utilizziamo l'id navsecond per annotare questo div.

<div id="navsecond">
<h2>Manuale HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Manuale HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Manuale XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Manuale CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Manuale TCP/IP">TCP/IP</a></li>
</ul>
<h2>Manuale XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Manuale XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="Linguaggi XSL">XSL</a></li>
... ...
... ...
</div>

Puoi utilizzare qualsiasi nome. "Gladys" e "orangebox" sono completamente conformi alle regole di nomina XHTML. Ma i nomi semantiche o meta-strutturali sono i migliori (cioè quelli che spiegano la funzione degli elementi all'interno).

Quando il cliente decide di utilizzare il blu, pensi che chiamare una parte del sito orangebox (quadro arancione) sia molto stupido. In questo caso, sentirai di essere ancora più stupido, quando mancano solo sei mesi alla consegna finale, inizi a regolare le tabelle di stile, ma non riesci a ricordare cosa rappresenta "Gladys" (nome femminile) se è la sezione di navigazione, la barra laterale o il riquadro di ricerca.

Quindi, etichettare id come "menu", "content" o "searchform" ti aiuterà a ricordare. Inoltre, il markup non è uguale al design, una pagina ben strutturata può essere formattata nel modo che desideri. Il risultato di questo è che, sia che tu utilizzi un layout CSS puro o un layout misto, puoi cambiare completamente l'abitudine di pensare e creare utilizzando markup di presentazione.

id vs. class

l'attributo id non è nuovo per l'XHTML; l'attributo class o l'elemento div sono ugualmente. Entrambi possono essere tracciati all'epoca dell'HTML. L'attributo id assegna a un elemento un nome unico. Ogni nome può essere utilizzato solo una volta nella pagina assegnata. (Ad esempio, se la tua pagina contiene un div con id 'content', nessun altro div o altro elemento può utilizzare questo nome. Al contrario, l'attributo class può essere utilizzato più volte nella pagina (ad esempio, cinque paragrafi nella pagina possono utilizzare il nome class 'small' o 'footnote'). I seguenti tag aiuteranno a chiarire la differenza tra id e class:

<div id="searchform">I componenti del modulo di ricerca vanno qui. Questo
una sezione della pagina è unica.</div>
<div class="blogentry">
   <h2>Post del blog di oggi</h2>
   <p>Il contenuto del blog va qui.</p>
   <p>Ecco un altro paragrafo di contenuto del blog.</p>
   <p>Esattamente come possono esserci molti paragrafi su una pagina, così anche
   può esserci molte voci in un blog. Una pagina di blog potrebbe utilizzare
   Ci possono essere molte istanze della classe "blogentry" (o qualsiasi altra
   class).</p>
</div>
<div class="blogentry">
   <h2>Articolo di blog di ieri</h2>
   <p>Infatti, qui siamo all'interno di un altro div di classe
   "blogentry."</p>
   <p>Si moltiplicano come conigli.</p>
   <p>Se ci sono dieci articoli di blog su questa pagina, ci potrebbe essere
   ci sono dieci div di classe "blogentry" pure.</p>
</div>

In questo esempio, il div chiamato 'searchform' viene utilizzato per incapsulare la regione della pagina che contiene il modulo di ricerca, mentre il div class='blogentry' viene utilizzato per incapsulare ogni ingresso dell'articolo nel blog. C'è solo un modulo di ricerca nella pagina, quindi abbiamo scelto di etichettarlo con un ID per questo componente unico. Tuttavia, il blog ha molti ingressi (articoli), quindi l'attributo class viene applicato in questo caso. Allo stesso modo, i siti di notizie di solito hanno molti div, i cui class possono essere chiamati 'newsitem' o altro.

Tuttavia, non tutti i siti necessitano di div. I siti blog possono utilizzare semplicemente i titoli h1, H2 e h2 e i paragrafi <p>. Anche i siti di notizie sono così. Mostriamo il div con classe 'blogentry' non per incoraggiarti a riempire il tuo sito di div, ma solo per illustrarti questo principio: utilizzare più classi in un singolo documento HTML, ma solo un ID.

Teoria degli adesivi adesivi

Pensare all'attributo ID come a un adesivo adesivo può essere utile. Metto un adesivo sulla mia frigorifero per ricordarmi di comprare latte, e anche uno sul telefono per ricordarmi di chiamare un cliente che ha pagato in ritardo. C'è anche uno sulla copertina del libretto dei conti per ricordarmi che devo pagare le bollette prima del 15 di questo mese.

L'ID etichetta anche aree speciali all'interno del documento, per ricordarti quali aree necessitano di trattamenti speciali. In questo senso, l'attributo ID è simile agli adesivi adesivi. Per implementare il cosiddetto trattamento speciale, devi scrivere alcune regole speciali in un foglio di stile o aggiungere alcune righe di codice in un file JavaScript. Ad esempio, ci sono alcune regole specifiche nel tuo file CSS che si applicano solo agli elementi all'interno del div con ID 'searchform'.

When an id attribute is used as a magnetic thing (magnet) for a series of specific CSS rules, it is called a CSS selector. There are manyCreate selectorsmethod, but id is easy to use and has many uses.

The power of id

The id attribute is incredibly powerful. It has the following capabilities:

  • As a selector in style sheets, enabling us to create compact and minimized XHTML.
  • As the target anchor of hyper text, replacing the outdated name attribute.
  • As a method to locate specific elements from script based on DOM.
  • As the name of an object element.
  • As a tool for general purpose processing (in the examples of W3C, 'used as a domain identification tool when extracting data from HTML pages to databases, or converting HTML documents to other formats, etc.').

Rules for id

The id value must start with a letter or underscore; it cannot start with a number. Although W3C validation will not catch this error, XML parsers will. At the same time, if you use id with JavaScript in a form, the id name and value must be valid JavaScript variables. Spaces and hyphens, especially hyphens, are not allowed. Moreover, using underscores in class or id names is not a good idea, due to the limitations in CSS2.0 (and some browsers).

Semantic markup and accessibility

Now, we have discussed the widely used XHTML elements (especially div and id), let's look at some examples on the homepage of this site. First, let's review the menu located at the header position:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Script del server">Script del server</a></li>
<li id="d"><a href="/d.asp" title="Tutorial dot net">Tutorial dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorial multimediale">Tutorial multimediale</a></li>
<li id="w"><a href="/w.asp" title="Manuale di costruzione del sito">Manuale di costruzione del sito</a></li>
</ul>
</div>

Abbiamo sette link, ciascuno dei quali è assegnato un id per corrispondere al contenuto corrispondente: ad esempio, l'id 'h' corrisponde alla guida HTML, ecc. Questi link sono racchiusi all'interno dell'elemento elenco chiamato 'menu', l'id 'menu' indica la funzione di questa lista - una lista di menu, mentre il div più esterno chiamato 'navfirst' viene utilizzato per indicare questa sezione nella pagina, distinguentelo da elementi come il contenuto principale (maincontent), la barra laterale (sidebar) e il piè di pagina (footer).

Gli elementi 'div' e 'ul' forniscono una struttura reale, indicando la funzione del contenuto (navigazione) e la sua posizione nel documento (posizione del header della pagina). Al contrario, la layout tradizionale delle tabelle non fornisce alcuna informazione semantica sui dati e consuma facilmente tre volte più banda.

Notate che questi markup non contengono tag 'img', quindi non sono coinvolti attributi come width, height, background o border, ecc. Non utilizzano nemmeno le celle delle tabelle, evitando così una serie di attributi correlati. Sono molto puliti e piccoli, fornendo tutte le informazioni necessarie per comprenderli.

Grazie alla collaborazione con CSS, questi markup forniscono agli utenti del sito una layout affidabile e veloce da caricare. Allo stesso tempo, offrono la possibilità di creare un aspetto più flessibile e vario per gli utenti. E anche senza CSS, i nostri markup ben strutturati possono fornire tutti i contenuti senza confusione.

Lettori acuti forse hanno notato che il testo contenuto nell'elemento 'a' non viene visualizzato dal browser, il che è dovuto alla perfetta collaborazione tra markup strutturato e CSS, che ci permette di definire un meccanismo di attivazione con poche regole CSS. Quando l'utente utilizza un browser grafico, vedrà bellissimi pulsanti di navigazione, mentre l'utente che utilizza un lettore di testo può ottenere tutto il testo. In questo modo, per tutti gli utenti, il contenuto è lo stesso.

E dato che i tag non contengono immagini e celle di tabella, questo componente di navigazione può essere richiamato da qualsiasi pagina all'interno del sito senza modificare la struttura, contemporaneamente conferendo un diverso aspetto visivo. In breve, modulando il codice, abbiamo migliorato la riutilizzabilità del codice.