In che modo X/HTML semantico può risparmiare tempo quando scriveremo CSS?

Question

Come il markup semantico X/HTML può far risparmiare tempo -

1. Quando scriveremo CSS per il sito Web
2. E se qualche modifica del design proviene dal cliente in futuro.
3. E perché i layout basati su tabelle impiegheranno più tempo sempre in entrambe le condizioni

Oggi devo spiegare queste cose agli studenti.

Ho qualche esempio, ma voglio qualche altro buon esempio e idee da spiegare bene.

Voglio spiegare quali sono i vantaggi del markup semantico X/HTML dal punto di vista degli sviluppatori.

grazie in anticipo

Aggiornamento:

I vantaggi dell'utilizzo del markup semantico:

1. Sarà leggibile in buona strada per le persone che vedono il documento in un ambiente in cui i CS non possono essere applicati.
2. Sarà molto più semplice per gli sviluppatori Web mantenere il codice e separare il contenuto (HTML) dalla presentazione (CSS).
3. Il markup semantico può ridurre le esigenze dei selettori del gruppo CSS in alcuni casi.

Answer 1

Dalla mia esperienza lavorativa:Ho dovuto esaminare diverse volte il markup ereditato dal mio predecessore o da persone completamente diverse (e in realtà una o due volte anche da me stesso).A volte avevo solo ciò che proveniva dalla visualizzazione del sorgente in un browser.I miei risultati finora sono stati:

• Se l'autore ha utilizzato marcatura semantica per quanto possibile, insieme a nomi di classi chiari e logici, è stato davvero facile e divertente scoprire la struttura della pagina e, ad esempio, codificare un nuovo widget o ristrutturare il layout delle colonne o cose del genere

• Se l'autore ha utilizzato basato su tabella layout, e avevo anche cose della fine degli anni '90 da guardare, è un completo disastro.Devi capire quale riga della tabella fa cosa, quale cella della tabella appartiene a dove e se inizi a pensare che avresti preso il controllo, hai trascurato un rowspan="3" 300 righe di markup precedenti.Anche in Firebug puoi impazzire con una simile zuppa di tag.

  Aggiungere nuove cose qui può diventare piuttosto avventuroso.Se aggiungi contenuto a una cella di tabella e non fissi completamente la larghezza e l'altezza del nuovo contenuto, potresti ritrovarti con spiacevoli spazi vuoti in tutta la pagina e dimenticare di aprire o chiudere <td>s da qualche parte (con 200 errori di convalida nella pagina originale è probabile che ti manchi qualcosa da qualche parte) può portare a una visualizzazione completamente rovinata.

• Se l'autore ha utilizzato div e span dappertutto, ma non ha fatto markup semantico (cioè scrivendo <div class="header1"/> invece di <h1/>), è ancora molto migliore del layout della tabella (al massimo a causa del rowspan e del colspan menzionati e perché hai la possibilità che la pagina non esploda completamente, se c'è un </div> manca da qualche parte), ma puoi comunque impazzire con markup come

  </div></div>
  </div>
     </div>
    </div>
  </div></div>
    </div>
  

  Inoltre, se avessi avuto un foglio di stile di accompagnamento, sarebbe stato anche un disastro completo.Differenziare tra .header, .header1, div.header_level1 E #middle .h1 ti costringe a saltare avanti e indietro tra il foglio di stile e il markup.

Answer 2

Il principale vantaggio, oltre che il codice più affidabile e controllabile, per gli sviluppatori è il codice chiaro. Con la scrittura XHTML semantico si può evitare di scrivere codice vago che sarà difficile da decifrare da altri sviluppatori o da soli in futuro.

IE. <address> è meglio messa in vendita di un indirizzo che utilizzare un <div> (il che accade molto ...), pur avendo la stessa flessibilità, stile e migliorando la leggibilità.

Answer 3

  

  
1. scriveremo CSS prima volta per il sito web
  

Ogni sito ha un aspetto diverso / layout, è necessario scrivere i CSS per esso per la prima volta a meno che la loro è una certa somiglianza tra i layout.

  

  
2. e se eventuali modifiche al progetto proviene da cliente in futuro.
  

È possibile rendere i siti web utilizzando design pattern MVC, questo sarà elevare un sacco di modifiche al design del sito.

  

  
3. E perché i layout tabella basata avrà più tempo sempre in entrambe le   Condizioni
  

Dato che il loro margine di profitto è stato progettato in modo che si deve scrivere di più, mentre nei layout div basato usiamo Cancella e float principalmente che fare grande lavoro di creare rapidamente i layout .