Como semântica X / HTML pode economizar tempo quando vamos escrever CSS?

Question

Como Semantic X / HTML mark-up pode economizar tempo -

1. quando vamos escrever CSS para website
2. e se quaisquer alterações de design vem de cliente no futuro.
3. e layouts por base tabela vai levar mais tempo sempre em ambos condição

Hoje eu tenho que explicar essas coisas para os estudantes.

Eu tenho alguns exemplos, mas eu quero ainda mais bom exemplo e idéias para explicar bem.

eu quero explicar o que são benefícios mark-up Semantic X / HTML de desenvolvedores ponto de vista.

Agradecemos antecipadamente

Update:

Os benefícios de usar a semântica mark-up :

1. Será legível em boa forma para as pessoas vendo o documento em uma ambiente onde CSS não pode ser aplicada.
2. Será muito mais fácil para os desenvolvedores web para manter o código, e separar o conteúdo (HTML) a partir de apresentação (CSS).
3. marcação semântica pode reduzir as necessidades de grupo css seletores em alguns casos.

Answer 1

Da minha experiência de trabalho: Eu tive por várias vezes agora a olhar para marcação legado do meu predecessor ou de completamente outras pessoas (e realmente uma ou duas vezes de mim também). Às vezes eu tinha apenas o que veio ver a fonte em um navegador. Meus resultados até agora foram:

• Se o autor usou semântica marcação na medida do possível, juntamente com nomes clara e lógica de classe, foi realmente fácil e divertido para descobrir a estrutura da página e, por exemplo, código de um novo widget ou reestruturar o layout de coluna ou coisas

• Se o autor usou tabela com base layout, e eu também tinha coisas a partir do final dos anos 90 para olhar, é uma bagunça completa. Você tem que descobrir, que linha da tabela faz o que, qual célula tabela pertence onde e se você começar a pensar que você deseja obter um aperto, você tenha esquecido um rowspan="3" 300lines de marcação antes. Mesmo em Firebug você pode se tornar louco com tanta sopa de uma tag.

  Como adicionar coisas novas aqui pode se tornar bastante aventureiro. Se você adicionar conteúdo a uma célula da tabela, e não reparar completamente a largura e altura do novo material, você pode encontrar-se com desagradável lacunas toda a página, e esquecendo-se de <td>s abrir ou fechar algum lugar (com 200 erros de validação no a página original que são susceptíveis de perder alguma coisa em algum lugar) pode levar a uma visão completamente ferrado.

• Se o autor usou divs e spans em todo o lugar, mas não o fez fazer marcação semântica (isto é, escrevendo <div class="header1"/> vez de <h1/>), ainda é melhor do que maneiras de mesa layout (no máximo, por causa do mencionado rowspan e colspan e porque você hav a chance de que a página não poderia explodir totalmente para cima, se houver uma </div> faltando em algum lugar), mas você ainda pode ir louco sobre marcação como

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

  Além disso, se eu tivesse uma folha de estilo de acompanhamento, a maioria era uma completa bagunça também. Diferenciação entre .header, .header1, div.header_level1 e forças #middle .h1-lhe saltar para trás e para frente entre estilo e marcação.

Answer 2

A principal vantagem, além de código mais confiável e controlável, para os desenvolvedores é o código claro. Com escrevendo XHTML semântico você pode evitar escrever vaga código que será difícil de decifrar por outros desenvolvedores ou a si mesmo no futuro.

IE. <address> é melhor para listar um endereço de usar um <div> (o que acontece muito ...), apesar de terem a mesma flexibilidade, estilo e melhorar a legibilidade.

Answer 3

1. vamos escrever CSS primeira vez para o site

Cada site tem diferentes olhar / layout, você tem que css escrita por ele, pela primeira vez, a menos que a sua é alguma semelhança entre seus layouts.

2. e se quaisquer alterações de design vem do cliente no futuro.

Você pode fazer seus sites usando padrão de projeto MVC, isso vai elevar uma série de mudanças para o design do seu site.

3. E por layouts tabela baseada levará mais tempo sempre em ambos condição

Devido a sua marcação é projetado de forma que você tem que escrever mais enquanto em div layouts baseados usamos clara e flutuador principalmente que fazem grande trabalho de criação rapidamente os layouts .