Questa è una pagina HTML perfetta, va bene sia per siti, blog e forum, se fatti con altri linguaggi il codice html interpretato dal browser così è ottimo.
Leggendo "la pagina perfetta" potreste pensare che dico una fesseria, ma non è così questa è una pagina html che va bene a tutti, dagl'utenti perchè semplice, ed è ottimizzata per i motori di ricerca perchè è semanticamente corretta, se si fa anche codice valido è meglio, ma qui non spiego quello ci sono guide ufficiali W3C e siti/forum appositamente dedicati.
Dichiarazione del documento ed head
Il primo pezzo della pagina html non è visibile all'occhio umano ma è molto importante per validare il codice e per l'ottimizzazione dei motori di ricerca.
Per far identificare un documento web come html e per poterlo validare bisogna dichiarare nella prima riga il !DOCTYPE opportuno, subito dopo si inserisce l'elemento <html> che dichiara che da li in avanti sarà codice html seguito dal tag .
Nel tag <head>, il primo elemento della pagina subito dopo aver "aperto l'html", s'inseriscono le direttive per i motori di ricerca e che permettono di identificare la pagina, per la pagina html perfetta è essenziale che:
- Il meta
<title>sia al primo posto ed ogni pagina ne abbia uno diverso; - I meta essenziali (il minimo) per i motori di ricerca sono description e keyword, anche se il meta keyword google non lo segue, vanno inseriti sono il meta title e description;
- Sia incluso il link a CSS esterni ed ai Feed se presenti;
- Gli script vanno messi dopo tutto, vanno richiamarti tramite "src=" (link), non vanno messi nella loro interezza.
Il corpo della pagina
Appena chiuso il tag <head> va messo il tag <body> che è la vera e propria pagina web, anche qui ci sarebbe molto da dire, sia per l'ottimizzazione dei motori di ricerca e per l'usabilità qui mi riferisco solo al codice essenziale per pagina html perfetta.
La pagina perfetta dovrebbe cominciare con la navigazione, sarebbe nella prima parte del codice e nella parte alta della pagina, una navigazione chiara e semanticamente corretta è formata in questo modo:
<ul>
<li><a href="http://sito.com/pagina-1/"</a></li>
<li><a href="http://sito.com/pagina-2/"</a></li>
<li><a href="http://sito.com/pagina-3/"</a></li>
</ul>
Dopo il menu di navigazione del sito si può aprire un'altro <div> che è il contenuto della pagina, solitamente lo si chiama <content>, la pagina perfetta all'inizio ha sempre gl'argomenti più importanti, sia per gl'utenti che trovano subito quello che trovano che per le parole chiave che si vogliono ottimizzare nei motori di ricerca, giusto per questo gli si mette il tag <h1> che sia simile al nome della pagina ed al nome del dominio od una parte di esso se quello è una parola chiave che si vuole ottimizzare per i motori di ricerca, è importante che se ne usi solo uno per pagina.
Dopo aver detto ai motori di ricerca ed aver formattato con testo più grande per gl'utenti tramite l'<h1> qual'è l'argomento trattato nella pagina web, si cominciano le varie sezioni della pagina, ogni titolo di sezione dev'essere un tag <h2>, con un font un po più piccolo di quello dell'<h1> (pixel) ma non con il font del testo.
Le varie sezioni della pagina saranno tag <p>, dove si metterà il contenuto più importante per prima e si evidenzierà in grassetto quello che si vuol far risaltare ed in corsivo quello che si vuol far risaltare in un'altro modo.
Se ci sono molte sezioni (paragrafi o <p>), si mettono prima quelle più importanti taggate con l'<h2>, poi si può arrivare fino ad h6 in base l'importanza che hanno quelle sezioni nella pagina web.
Dopo aver scritto tutto quello che c'era da scrivere si chiude il tag del contenuto della pagina web (<body>) e si apre la parte finale della pagina, il footer, solitamente si mettono link alla privacy o link vari.
Come ho già detto ci sarebbe molto altro da dire ma non lo metto in un'unico post perchè sicuramente mi ometterei qualcosa per dimenticanza, come forse o fatto, sicuramente approfondirò in altri post.
Stay Tuned!