Uma olhada na semântica adequada de HTML5
Se você planeja cuidadosamente a estrutura de seus documentos HTML, você pode ajudar os computadores a compreender o significado do seu conteúdo. A sintaxe correta é importante, com certeza, mas basicamente fornece apenas analisadores, mecanismos de pesquisa e tecnologias de assistência com um grupo de dados sem sentido..
Se você melhorar seu fluxo de trabalho de front-end com atenção à semântica, poderá criar um conteúdo de maior qualidade que atraia mais visitantes. Semântica é o estudo do significado, em um contexto mais amplo é um ramo da lógica e lingüística.
No mundo do desenvolvimento web, falamos sobre conteúdo semântico quando os computadores entendem a estrutura de um documento, e o papéis dos elementos dentro dele. Se queremos criar semântica adequada, precisamos profundamente entender a estrutura do nosso conteúdo e do capacidades de tecnologias frontend.
Então, quais são os benefícios tangíveis? Semântica adequada significa um conteúdo mais pesquisável isso leva a um melhor ranking do motor de busca. Também aumentamos a acessibilidade, como tecnologias assistivas, como leitores de tela podem interpretar melhor o significado do nosso conteúdo.
Existem muitas técnicas de desenvolvimento de front-end diferentes que permitem aos desenvolvedores alcançar uma estrutura de página semântica. Este post irá fornecer-lhe uma breve introdução às tags HTML semânticas e o conceito do esboço do documento.
Tags HTML semântico e não-semântico
O conceito de semântica não é tão novo quanto parece, existia bem antes da era do HTML5. O termo da web semântica foi criado em 2001 por Sir Tim Berners-Lee. Debaixo “web semântica” ele quis dizer uma teia de dados que pode ser processada por máquinas.
Isso significa principalmente que elementos HTML separados precisam ter seus papéis estruturais distinguíveis. De acordo com a definição do W3C “um elemento semântico descreve claramente seu significado para o navegador e o desenvolvedor”.
Elementos semânticos antes de HTML5
Elementos semânticos existiam antes do HTML5 também, na maioria dos casos os desenvolvedores não sabiam que algumas das tags que eles usaram eram realmente semânticas. Basta pensar sobre o ou o
Seus papéis são claros para nós e para o agente do usuário: simplesmente contém um formulário, assim como
o
Pedido e listas não ordenadas, parágrafos, tags de título h1-h6 são todos os elementos semânticos que precederam o HTML5.
Elementos não-semânticos
Elementos não-semânticos não têm nenhum significado especial, as relações hierárquicas entre eles são meramente ilusórias. Os exemplos mais utilizados de tags HTML não semânticas são os e a Tag.
Se o seu site já pegou a doença horrível de divite, Você sabe do que eu estou falando. Sim. Divs não são necessariamente erradas, mas divite precisa ser travada se quisermos escrever um código HTML sustentável, modular e significativo.
A Smashing Magazine explica de forma maravilhosa qual é o problema real com o uso excessivo e irracional do Não há relação entre os dois, assim como no caso do Não entre em pânico se ainda se sentir ligado a O HTML5 introduziu muitos novos elementos semânticos que possibilitam uma organização fácil do conteúdo. Eles não apenas ajudam você a organizar o conteúdo no nível do documento inteiro (veja os detalhes na próxima seção), mas também dentro de blocos de texto, como tags inline. Provavelmente, as tags semânticas de nível de texto mais populares são Veja esta lista para todos os elementos semânticos de nível de texto que estão atualmente em uso. O esboço do documento é a estrutura de um documento HTML. Mostra como os elementos estão relacionados entre si. O esboço do documento foi gerado apenas por elementos de mapeamento, como cabeçalhos, títulos de tabelas, títulos de formulários e outros nas versões anteriores de HTML, como HTML4.01 e XHTML.. Em HTML5, o algoritmo de delineamento foi aprimorado por novos elementos de seção, a saber: Há um quinto elemento de seção no HTML5, mas não é novo, é o Se quisermos criar um esboço de documento bem estruturado, precisamos prestar atenção às seguintes regras: 1. O elemento de corte mais externo é sempre o 2. Seções em HTML5 podem ser aninhadas. 3. Cada seção tem sua própria hierarquia de títulos. Cada um deles (até mesmo a seção aninhada mais interna) pode ter um 4. Enquanto o esboço do documento é definido principalmente pelos 5 elementos de seção, ele também precisa de títulos apropriados para cada seção. 5. É sempre o primeiro elemento de título (seja h1 ou uma tag de título de classificação inferior) que define o título da seção dada. As seguintes tags de cabeçalho dentro da mesma seção precisam ser relativas a isso. (Se o primeiro cabeçalho for um h3 dentro de um elemento de corte, não coloque um h3 depois disso.) 6. As seções definidas pelo 7. Cada seção (corpo, seção, artigo, aparte, nav) pode ter seus próprios Vamos ver um exemplo para um esboço de documento semântico para ver como isso funciona. Nosso código de exemplo resultará na seguinte estrutura do documento: E aqui está o código com seção semântica adequada: Aqui é o nosso logotipo e slogan. Parágrafo 1 na primeira seção Parágrafo 2 na primeira seção Parágrafo 1 na segunda seção Parágrafo 2 na segunda seção Se você der uma olhada no snippet de código acima, verá que os cabeçalhos e rodapés são opcionais, podemos escolher livremente se queremos usá-los ou não, mas é É altamente recomendável incluir sempre um título para cada seção, caso contrário, a seção será “Sem título” no esboço do documento. Felizmente, existem muitas ferramentas excelentes em toda a Internet que nos permitem verificar o esboço do documento, desta vez vamos usar a ferramenta Outliner de html5.org. Se inserirmos nosso snippet de código no formulário fornecido pelo delimitador, clique no “Esboce isso!” botão, vamos ver o seguinte resultado: Isto é o esboço do documento do nosso código de amostra, É assim que os mecanismos de pesquisa o veem e os leitores de tela o leem para os usuários com deficiência visual. É semântico, bem estruturado, e não há desagradável “Sem título” seções nele. Se você quer olhar como uma seção Untitled se parece no Outliner basta excluir algumas das tags de título no código de exemplo. Tags de HTML semântico e contornos de documentos são apenas uma pequena parte da semântica da web. O conteúdo de uma página da Web pode ser ainda mais significativo com a ajuda do protocolo de acessibilidade WAI-ARIA e dados estruturados que podem ser usados em conjunto com o protocolo RDFa, microdados ou a marcação JSON-LD. tag que funciona da mesma maneira, apenas no nível inline.-s embora, como você não precisa abandoná-los completamente. Eles ainda são a melhor opção para agrupar conteúdo apenas para fins de estilo e em outros casos de último recurso. Semântica de texto em HTML5
e , mas eles também existiam antes do HTML5. Entre os novos elementos semânticos em linha, podemos encontrar, por exemplo, , tag para datas-horas legíveis por humanos, e para texto destacado.Esboço do documento em HTML5
para seções agrupadas em torno de um tema específico para composições completas ou independentes como uma postagem no blog ou um widget para blocos de navegação para conteúdo complementar, como sidebars. tag. o As tags também são novas, mas não geram novas seções em um documento, elas dividem o conteúdo dentro das seções. Isso significa que cada elemento de corte (corpo, artigo, seção, nav e lado) pode ter seu próprio cabeçalho e rodapé.Dicas para Conteúdo Estruturado Semanticamente
tag.h1 tag., e a as tags não pertencem ao esboço principal do documento HTML, elas geralmente não são renderizadas inicialmente por tecnologias assistivas. tags, que define o cabeçalho (como logotipo, nome do autor, datas, meta-informação, etc.) e o rodapé (copyright, notas, links, etc.) dessa seção.Exemplo: um esboço semântico
Bem-vindo ao nosso site!
Título do artigo
Subtítulo do artigo
Primeira parte lógica (por exemplo, "Teoria")
Algum outro subtítulo na primeira seção
Segunda parte lógica (por exemplo, "prática")
Outros aspectos da semântica da Web
