Qual è il vero significato della separazione tra contenuto e presentazione?

StackOverflow https://stackoverflow.com/questions/2260391

Domanda

Qual è il vero significato della separazione tra contenuto e presentazione?

E 'solo significa evitare CSS in linea?

Vuol dire che il design dovrebbe essere in grado di manipolare senza modificare il codice HTML?

Possiamo davvero fare alcun cambiamento nel design dal CSS solo?

  • Se vogliamo cambiare le dimensioni del immagini allora dovremo andare in Il codice HTML
  • Se si wan per aggiungere un altro interruzione di linea al punto poi di nuovo ci sarà andare al codice HTML
  • Se vogliamo aggiungere un altro separatore in qualche luogo poi di nuovo avremo per andare in codice HTML

Quali X / tag HTML dovremmo evitare di utilizzare per mantenere la separazione tra contenuto e presentazione?

è la separazione di contenuto e presentazione anche utile per utenti che utilizzano l'accessibilità / schermo? ... e per il programmatore / sviluppatore / designer?

È stato utile?

Soluzione

Quando si definisce ciò che è contenuto e presentazione, consultare il documento HTML come un contenitore di dati. Poi chiedetevi quanto segue su ogni elemento e l'attributo:

  • Il l'attributo / elemento rappresentano un'entità significativa nei miei dati?
    Ad esempio, sono le parole tra tag <b> sono in grassetto semplicemente per scopi di visualizzazione o Volevo aggiungere enfasi su tali dati?

  • sto utilizzando l'attributo / elemento proprio alla proprietà rappresentare il tipo di dati che voglio rappresentare?
    Dal momento che voglio aggiungere enfasi su quella particolare sezione, dovrei usare <em> (non significa corsivo, significa enfasi e può essere reso in grassetto) o <strong> a seconda del livello di enfasi voluto.

  • Sto usando l'attributo / elemento solo per scopi di visualizzazione? Se sì, può l'elemento essere rimosso e l'elemento principale in stile con i CSS?
    A volte un tag di presentazione può essere semplicemente sostituita da regole CSS per l'elemento padre. In questo caso, il tag di presentazione deve essere rimosso.

Dopo chiedendo queste tre semplici domande, si sono di solito in grado di prendere una decisione abbastanza informato. Un esempio:

  

Codice originale:   <label for="name"><b>Name:</b></label>

     

Verifica del tag <b> ...

     

Il l'attributo / elemento rappresentano un'entità significativa nei miei dati?
  No, il tag non rappresenta un nodo di dati. E 'lì esclusivamente per la presentazione.

     

sto utilizzando l'attributo / elemento proprio alla proprietà rappresentare il tipo di dati che voglio rappresentare?
  <b> viene utilizzato per la presentazione di elementi in grassetto.

     

Sto usando l'attributo / elemento solo per scopi di visualizzazione? Se sì, può l'elemento essere rimosso e l'elemento principale in stile con i CSS?
  Dal momento che è <b> di presentazione e lo sto usando per la presentazione, sì. E dal momento che l'elemento <b> colpisce l'intera <label>, può essere rimosso e lo stile da applicare alla <label>.

Semantic obiettivo di HTML non è quello di semplificare la progettazione e riprogettazione o per evitare lo styling in linea, ma per aiutare un parser capire che cosa quel particolare tag rappresentano nel documento. In questo modo, è possibile creare applicazioni (ad esempio .:. motore di ricerca) per decidere in modo intelligente ciò che il vostro contenuti significano e classificare di conseguenza

Pertanto, ha senso utilizzare la content: proprietà CSS per aggiungere le virgolette attorno testo che si trova in un tag <q> (non ha alcun valore ai dati contenuti nel documento altro che la presentazione), ma non ha senso per l'utilizzo dello stesso CSS proprietà per aggiungere un simbolo © a piè di pagina in quanto hanno un valore nei dati.

Lo stesso vale per gli attributi. Utilizzando il width e l'attributo height su un tag <img> che rappresenta un'icona a grandezza 16x16 senso semantico è importante comprendere il significato del tag <img> (un'icona può avere rappresentazioni diverse a seconda delle dimensioni viene visualizzato). Utilizzando gli stessi attributi su un tag <img> che rappresenta una miniatura di un'immagine più grande non lo fa.

A volte è necessario aggiungere elementi non semantici per essere in grado di raggiungere la presentazione ricercato, ma di solito quelli sono evitabili.

Non ci sono elementi sbagliati. Ci sono usi sbagliati di particolari elementi. <b> non deve essere usato quando si aggiungono enfasi. <small> deve essere utilizzato per legale sub-testo, non per rendere il testo più piccolo (vedi HTML5 - Sezione 4.6.4 per il motivo), ecc ... Tutti gli elementi hanno un particolare scenario di utilizzo e tutti rappresentano i dati (meno di presentazione elements, ma hanno un impiego in alcuni casi). Non ci sono elementi dovrebbero essere messi da parte.

Gli attributi sono una cosa diversa. La maggior parte degli attributi sono di presentazione in natura. Attributi come <img border> e <body fgcolor> raramente hanno significazione nei dati si rappresenta quindi non li dovrebbe usare (tranne in quei rari casi).

Motori di ricerca sono un buon esempio per spiegare perché i documenti semantici sono così importanti. Microformati sono un insieme predefinito di elementi e classi che è possibile utilizzare per rappresentare i dati che i motori di ricerca capirà In un certo modo. le informazioni sui prezzi del prodotto in Google Ricerche è un esempio della semantica a lavoro.

Utilizzando le regole predefinite in standard fissati per memorizzare le informazioni nel documento permette ai programmi di terze parti per capire quello che sembra essere un muro di testo senza usare euristiche algoritmi che possono essere soggette a guasti. Aiuta anche lettori di schermo e altre applicazioni di accessibilità per comprendere più facilmente il contesto in cui le informazioni sono presentate. Essa aiuta anche notevolmente la manutenibilità del markup come tutto è legato ad una definizione set.

Altri suggerimenti

L'esempio migliore è probabilmente il CSS Zen Garden .

L'obiettivo di questo sito è quello di mostrare ciò che è possibile con un design CSS-based solo, con una netta separazione del contenuto dalla progettazione. I fogli di stile hanno contribuito da vari grafici sono utilizzati per modificare la presentazione visiva di un singolo file HTML , producendo centinaia di disegni differenti. Il markup HTML in sé non cambia mai tra i diversi modelli.

In ogni pagina di design, si avrebbe un link per visualizzare il file CSS di quel disegno.

  

Qual è il vero significato della separazione tra contenuto e presentazione?

Si tratta piuttosto di una filosofia di progettazione di un po 'di cemento. In generale, ciò significa che si dovrebbe mantenere la semantica del contenuto, pensa al tuo contenuto come di un pezzo di informazioni strutturate. E questo significa anche che si dovrebbe tenere tutti i dettagli estetici lontano da questa informazioni strutturate.

  

E 'solo significa evitare CSS in linea?

Come notato sopra, gli stili inline non hanno nulla a che fare con la semantica del suo sito web e deve essere evitato a tutti i costi. Ma non è solo che.

  

è solo dire se dopo aver scritto html secondo il disegno allora se allora se vogliamo fare alcun cambiamento nel design allora dovrebbe essere solo con i CSS, senza bisogno di HTML

Purtroppo, non è sempre possibile raggiungere alcuni obiettivi estetici concreti senza modificare il markup sottostante; CSS3 prova è meglio per affrontare questi problemi.

  

Quali X / tag HTML dovremmo evitare di utilizzare per mantenere la separazione tra contenuto e presentazione?

Se vuoi inserire tag obsolete in W3C HTML 4.01 / XHTML 1.0 Riferimento

  

è la separazione di contenuto e presentazione anche utile per utenti che utilizzano l'accessibilità / schermo?

Sicuramente. Una migliore informazione strutturata rimane generalmente leggibile anche se alcuni browser rendono stili in modo non corretto (o non li rendono affatto). Tali contenuti possono anche guardare più adeguata sulla carta stampata (anche se gli stili di stampa possono essere applicati per ottenere aestherics ancora migliori - che, ancora una volta, non hanno nulla a che fare con la semantica dei contenuti).

  

è la separazione di contenuto e presentazione anche utile per il programmatore / sviluppatore / designer?

Naturalmente. La separazione del contenuto e presentazione prende le sue radici dalla filosofia più generale, la separazione degli argomenti. Tutti beneficiare dalla separazione:. Il fornitore di contenuti non deve essere un buon designer e viceversa

Mettere in interruzioni di riga in alcuni punti è inevitabile, ci sarà solitamente una certa sovrapposizione di presentazione e il contenuto. Si dovrebbe sempre puntare ad una perfetta separazione però.

Prendere l'altro estremo: una pagina contenente carichi e carichi di tabelle che vengono utilizzate solo a scopo di layout. Questo è l'anti-modello preciso che deve essere evitato a tutti i costi. Il contenuto gioca un secondo violino, dopo il layout qui; non capita spesso nel giusto ordine e, quindi, difficilmente leggibile dalla macchina. Non macchina di contenuto leggibile è un male per l'accessibilità e il male per il posizionamento dei motori di ricerca della pagina.

Con l'evidenziazione dei contenuti senza preoccupazione per la presentazione, si sono prima di tutto che lo rende leggibile dalla macchina. Sei poi anche in grado di servire lo stesso contenuto a diversi clienti in diversi formati, dice in una versione mobile ottimizzata. È inoltre possibile modificare la presentazione facilmente senza dover pasticciare con i file HTML, diciamo per una grande riprogettazione.

Un altro vantaggio che viene naturalmente separando contenuto e la presentazione (HTML - file CSS) è che si hanno meno di digitare e meno di mantenere, più le pagine possono avere uno stile coerente applicato molto facilmente. Contrasto migliaia di stili inline contro una definizione di stile in un file CSS, che è "naturalmente" applicato a tutti gli elementi con lo stesso "significato" (margine di profitto).

Idealmente il vostro (X) HTML è composto solo di significativo, markup semantico e il CSS di stili che utilizzano questo markup per i suoi selettori. Nel mondo reale si mescolano spesso le classi e gli ID nel tuo markup che aggiungono alcun significato in più, perché avete bisogno di questi "ganci" extra per lo stile tutto nel modo che si desidera. Ma anche qui c'è una differenza tra class="blue right-aligned" e class="contact-info secondary". Cercare sempre di aggiungere significa per il contenuto, non lo stile. Bilanciamento questo è abbastanza un'arte in sé. :)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top