Qual é o significado real de separação de conteúdo e apresentação?

Question

Qual é o significado real de separação de conteúdo e apresentação?

É apenas significar evitar CSs embutidos?

Isso significa que o design deve ser capaz de manipular sem alterar o HTML?

Podemos realmente fazer alguma mudança no design apenas do CSS?

• Se quisermos alterar o tamanho das imagens, teremos que ir no código HTML
• Se quisermos adicionar mais uma quebra de linha no parágrafo, novamente teremos que ir no código HTML
• Se quisermos adicionar mais um separador em algum lugar, então novamente teremos que ir no código HTML

Qual tag x/html devemos evitar usar para manter a separação de conteúdo e apresentação?

A separação de conteúdo e apresentação também é útil para usuários de acessibilidade/leitor de tela? ... e para programador/desenvolvedor/designer?

Answer 1

Ao definir o que é conteúdo e apresentação, consulte seu documento HTML como um contêiner de dados. Em seguida, pergunte a si mesmo o seguinte em cada elemento e atribui:

• O atributo/elemento representa uma entidade significativa em meus dados?
  Por exemplo, são as palavras entre <b> A tag está em negrito simplesmente para fins de exibição ou eu queria adicionar ênfase a esses dados?

• Estou usando o atributo/elemento adequado para a propriedade representa o tipo de dados que quero representar?
  Como quero acrescentar ênfase nessa seção em particular, devo usar <em> (Isso não significa itálico, significa ênfase e pode ser ousado) ou <strong> Dependendo do nível de ênfase desejado.

• Estou usando o atributo/elemento apenas para fins de exibição? Se sim, o elemento pode ser removido e o elemento pai em estilo CSS?
  Às vezes, uma tag de apresentação pode ser simplesmente substituída pelas regras CSS no elemento pai. Nesse caso, a tag de apresentação precisa ser removida.

Depois de fazer essas três perguntas simples, você geralmente pode tomar uma decisão bastante informada. Um exemplo:

Código original: <label for="name"><b>Name:</b></label>

Verificando o <b> marcação...

O atributo/elemento representa uma entidade significativa em meus dados?
Não, a tag não representa um nó de dados. Existe puramente para a apresentação.

Estou usando o atributo/elemento adequado para a propriedade representa o tipo de dados que quero representar?
<b> é usado para a apresentação de elementos em negrito.

Estou usando o atributo/elemento apenas para fins de exibição? Se sim, o elemento pode ser removido e o elemento pai em estilo CSS?
Desde <b> é a apresentação e estou usando -o para apresentação, sim. E desde o <b> elemento afeta todo <label>, pode ser removido e o estilo é aplicado ao <label>.

O objetivo do HTML semântico não é simplificar o design e redesenhar ou evitar o estilo embutido, mas ajudar um analisador a entender o que essa tag em particular representa em seu documento. Dessa forma, os aplicativos podem ser criados (isto é: mecanismo de pesquisa) para decidir de forma inteligente o que seu conteúdo significa e classificá -lo de acordo.

Portanto, faz sentido usar a propriedade CSS content: Para adicionar citações em torno do texto localizado em um <q> Tag (não tem valor para os dados contidos no seu documento. Outra apresentação), mas não há sentido para usar a mesma propriedade CSS para adicionar um © símbolo no rodapé, pois ele possui um valor em seus dados.

O mesmo se aplica a atributos. Usando o width e height atributo em um <img> tag representando um ícone no tamanho 16x16 faz sentido semântico, pois é importante entender o significado do <img> tag (um ícone pode ter representações diferentes, dependendo do tamanho em que é exibido). Usando os mesmos atributos em um <img> A tag representando uma miniatura de uma imagem maior não.

Às vezes, você precisará adicionar elementos não semânticos para poder alcançar sua apresentação desejada, mas geralmente esses são evitáveis.

Não há elementos errados. Existem usos errados de elementos específicos. <b> não deve ser usado ao adicionar ênfase. <small> deve ser usado para o subtexto legal, para não diminuir o texto (ver HTML5 - Seção 4.6.4 Para o porquê), etc ... Todos os elementos têm um cenário de uso específico e todos representam dados (menos elementos de apresentação, mas têm utilidade em alguns casos). Nenhum elemento deve ser anulado.

Atributos são uma coisa diferente. A maioria dos atributos é de natureza de apresentação. Atributos como <img border> e <body fgcolor> Raramente têm significado nos dados que você está representando, portanto, você não deve usá -los (exceto nesses casos raros).

---

Os mecanismos de pesquisa são bons exemplos sobre o motivo pelo qual os documentos semânticos são tão importantes. Microformatos são um conjunto predefinido de elementos e classes que você pode usar para representar dados quais mecanismos de pesquisa entenderão de uma certa maneira. As informações do preço do produto nas pesquisas do Google é um exemplo de semântica no trabalho.

Ao usar as regras predefinidas nos padrões definidos para armazenar informações em seu documento, permite que programas de terceiros entendam o que parece ser uma parede de texto sem usar algoritmos de heurística que podem ser propensos a falhas. Também ajuda a tela leitores e outros aplicativos de acessibilidade para entender mais facilmente o contexto em que as informações são apresentadas. Também ajuda muito a manutenção da sua marcação, pois tudo está vinculado a uma definição definida.

Answer 2

O melhor exemplo é provavelmente o CSS Zen Garden.

O objetivo deste site é mostrar o que é possível apenas com o design baseado em CSS, com uma separação estrita de conteúdo do design. As folhas de estilo contribuídas por vários designers gráficas são usadas para alterar a apresentação visual de um único arquivo HTML, produzindo centenas de projetos diferentes. A marcação HTML em si nunca muda entre os diferentes projetos.

Em cada página de design, você teria um link para visualizar o arquivo CSS desse design.

Answer 3

Qual é o significado real de separação de conteúdo e apresentação?

É antes uma filosofia de design do que um tanto concreta. Em geral, isso significa que você deve preservar a semântica do conteúdo, pense no seu conteúdo como uma informação estruturada. E isso também significa que você deve manter todos os detalhes estéticos longe dessas informações estruturadas.

É apenas significar evitar CSs embutidos?

Como notado acima, os estilos embutidos não têm nada a ver com a semântica do seu conteúdo e devem ser evitados a todo custo. Mas não é apenas este.

Isso significa apenas se depois de escrever html de acordo com o design, se então que quisermos fazer alguma alteração no design, deve ser apenas com CSS, sem necessidade de html

Infelizmente, nem sempre é possível alcançar alguns objetivos estéticos concretos sem modificar a marcação subjacente; O CSS3 tenta que é melhor resolver esses problemas.

Qual tag x/html devemos evitar usar para manter a separação de conteúdo e apresentação?

Procure tags depreciadas em W3C HTML 4.01 / XHTML 1.0 Referência

A separação de conteúdo e apresentação também é útil para usuários de acessibilidade/leitor de tela?

Certamente. As melhores informações estruturadas geralmente permanecem legíveis, mesmo que certos navegadores renderizem estilos incorretamente (ou não os renderizem). Esse conteúdo também pode parecer mais adequado na mídia impressa (embora os estilos de impressão possam ser aplicados para obter uma estérica ainda melhor - eles, novamente, não têm nada a ver com a semântica do conteúdo).

A separação de conteúdo e apresentação também é útil para programador/desenvolvedor/designer?

É claro. A separação de conteúdo e apresentação leva suas raízes da filosofia mais geral, a separação de preocupações. Todo mundo se beneficia da separação: o fornecedor de conteúdo não precisa ser um bom designer e vice -versa.

Answer 4

Colocar quebras de linha em determinados pontos é inevitável, geralmente haverá alguma sobreposição de apresentação e conteúdo. Você deve sempre buscar a separação perfeita.

Pegue o outro extremo: uma página que contém cargas e cargas de tabelas usadas apenas para fins de layout. Este é o anti-padrão definitivo que deve ser evitado a todo custo. O conteúdo toca um segundo violino após o layout aqui; Muitas vezes, não está na ordem certa e, assim, dificilmente é legível por máquina. O conteúdo não legível pela máquina é ruim para a acessibilidade e ruim para a classificação do mecanismo de pesquisa da página.

Ao marcar o conteúdo sem preocupação com a apresentação, você é, antes de tudo, torná -lo legível à máquina. Você também está em posição de atender ao mesmo conteúdo para diferentes clientes em diferentes formatos, digamos em uma versão otimizada para dispositivos móveis. Você também pode alterar a apresentação facilmente sem ter que mexer com os arquivos HTML, digamos para uma grande reformulação.

Outro benefício que vem naturalmente separando o conteúdo e a apresentação (arquivos HTML - CSS) é que você tem menos a digitar e menos para manter, além de suas páginas podem ter um estilo consistente aplicado com muita facilidade. Contraste milhares de estilos embutidos vs. uma definição de estilo em um arquivo CSS, que é "naturalmente" aplicado a todos os elementos com o mesmo "significado" (marcação).

Idealmente, o seu (x) HTML consiste apenas de marcação semântica significativa e seu CSS de estilos usando essa marcação para seus seletores. No mundo real, você costuma misturar aulas e IDs em sua marcação que não adicionam significado extra, porque você precisa desses "ganchos" extras para estilizar tudo da maneira que deseja. Mas mesmo aqui há uma diferença entre class="blue right-aligned" e class="contact-info secondary". Sempre tente adicionar significado Para o conteúdo, não o estilo. Equilibrando isso é uma arte em si. :)