Acredito que todo mundo conhece html e css, conhece a separação entre estrutura html e desempenho de css e conhece a semântica de html. Essas são palavras-chave populares nos últimos anos. O HTML semântico só começou a ser popular na China há um ou dois anos. Olhando para a estrutura do HTML discutida no grupo agora e para as perguntas da entrevista sobre a estrutura do HTML, o HTML semântico é responsável por uma grande parte. Então, por que usar HTML semântico? Quais são os benefícios do HTML semântico?
HTML fornece a estrutura contextual e o significado do conteúdo do documento da web; o próprio HTML não tem representação. Por exemplo, vemos que <h1> está em negrito, com um tamanho de fonte de 2em, e negrito <strong> está em negrito. acho que é o desempenho do HTML, esses são na verdade os estilos CSS padrão do HTML em funcionamento, então antes de tudo precisamos saber que o HTML não tem nada a ver com o desempenho da página, são questões de CSS. O papel do HTML na página é estrutura e significado. Em termos leigos, é dividir o conteúdo. O que colocamos aqui é o que colocamos.
A estrutura HTML semântica deve primeiro enfatizar a estrutura HTML
A estrutura HTML é o esqueleto da página. Uma página é como uma casa. A estrutura HTML são as paredes de aço e concreto. Se uma casa não tem paredes de aço e concreto, é apenas uma pilha de tijolos inúteis. não pode ser habitado ou usado para trabalho. CSS é um material decorativo. É um piso de madeira, mármore e tinta. Escusado será dizer que o poder do CSS não tem uma estrutura HTML. placas são pintadas juntas e não têm valor de uso real. CSS depende inteiramente do documento (X)HTML que o faz referência. Se você quiser aproveitar ao máximo o poder do CSS, é necessário fornecer ao HTML um conteúdo limpo e estruturado "HTML é a língua franca para publicação de hipertexto na Internet... HTML usa tags para estruturar o texto. ização” ( http://www.w3.org/MarkUp/ ).
Como escrever uma estrutura HTML semântica?
HTML é um método de adicionar estrutura e significado (ou "semântica") ao conteúdo do texto. Ele nos dirá: "Esta linha é um título, essas linhas formam um parágrafo. Essas palavras são uma lista de itens e essas palavras são um hiperlink para outro arquivo na Internet. É importante ressaltar que você não deve deixar HTML." nos diz: "Esses textos são azuis e esses textos são vermelhos. Esta parte do conteúdo é a coluna mais à direita e esta linha de conteúdo está em itálico." Ao desenvolver front-end, lembre-se: HTML nos diz o que é um conteúdo (ou seu significado), não sua aparência. Quando falamos em “marcação semântica”, o HTML de que estamos falando deve estar completamente separado das informações de apresentação, e as tags nele contidas devem definir semanticamente a estrutura do documento.
A estrutura semântica do HTML é realmente muito simples. Primeiro, entenda a semântica de cada tag em html. <div> é um contêiner; <strong> é uma lista não ordenada, etc. vendo o conteúdo Ao pensar sobre qual rótulo pode descrevê-lo melhor, use qualquer rótulo que seja.
Quais são os benefícios da estrutura HTML semântica?
Sabemos que o HTML5 tem novas tags, como <header> e <footer>. O HTML está se desenvolvendo em direção a uma estrutura HTML mais robusta e semântica. O xhtml2 não é tão avançado quanto o html5 nesse aspecto. morte do xhtml2. Também mostra que a estrutura semântica do HTML é a tendência de desenvolvimento do html.
1. Quando o estilo é removido ou perdido, a página pode apresentar uma estrutura clara:
O HTML em si não tem desempenho. Por exemplo, vemos que <h1> está em negrito, o tamanho da fonte 2em, negrito <strong> está em negrito. . Função, portanto, remover ou perder o estilo pode fazer com que a página apresente uma estrutura clara, o que não é uma vantagem da estrutura semântica do HTML. Porém, os navegadores possuem estilos padrão. html. Pode-se dizer que os estilos padrão do navegador e a estrutura semântica do HTML são inseparáveis.
2. Os leitores de tela (se o visitante for deficiente visual) “lerão” sua página com base inteiramente na sua marcação .
Por exemplo, se você usar marcação semântica, os leitores de tela “soletrarão” sua palavra em vez de tentar pronunciá-la por completo.
3. Dispositivos como PDAs e telefones celulares podem não ser capazes de renderizar páginas da Web como navegadores de computador comuns (geralmente porque esses dispositivos têm suporte fraco para CSS).
O uso de marcação semântica garante que esses dispositivos renderizem páginas da web de maneira significativa. Idealmente, o dispositivo de visualização tem a tarefa de renderizar páginas da web consistentes com as condições do próprio dispositivo.
A marcação semântica fornece ao dispositivo as informações relevantes de que ele precisa, evitando o trabalho de considerar todos os cenários de exibição possíveis (em dispositivos existentes ou novos no futuro). Por exemplo, um telefone pode optar por exibir uma seção marcada com um título. . O texto é exibido em negrito. Um computador portátil pode exibi-lo em uma fonte maior. Depois de marcar o texto como um título, você pode ter certeza de que o dispositivo de leitura exibirá a página adequadamente em seus próprios termos.
4. Os rastreadores de mecanismos de pesquisa também contam com tags para determinar o contexto e o peso de palavras-chave individuais.
No passado, você pode não ter considerado que os rastreadores de mecanismos de pesquisa também são “visitantes” do site, mas agora eles são, na verdade, usuários extremamente valiosos. Sem eles, os mecanismos de pesquisa não serão capazes de indexar seu site, e então será. difícil para usuários comuns virem visitar.
5. É muito importante que sua página seja fácil de ser entendida pelos rastreadores, porque os rastreadores ignorarão amplamente a marcação usada para desempenho e se concentrarão apenas na marcação semântica.
Portanto, se o título do arquivo da página for marcado em vez de marcado, a página poderá aparecer mais abaixo nos resultados da pesquisa. Além de melhorar a facilidade de uso, a marcação semântica facilita o uso correto de CSS e JavaScript porque ela própria fornece muitos ". Hook" para aplicar o estilo e comportamento da página.
O SEO depende principalmente do conteúdo do seu site e de links externos.
6. Facilitar o desenvolvimento e manutenção da equipe
O W3C estabeleceu um bom padrão para nós. Todos na equipe seguem esse padrão, o que pode reduzir muitas coisas diferenciadas, facilitar o desenvolvimento e a manutenção, melhorar a eficiência do desenvolvimento e até mesmo alcançar o desenvolvimento modular .
Se você tiver opiniões ou acréscimos diferentes, deixe uma mensagem para discussão.
Agradecimentos ao irmão Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar e CSS Forest Group pela discussão
Texto original: http://www.css88.com/archives/1668