As palavras são importantes. Eles têm significado, e colocar certas palavras lado a lado nos permite transmitir informações a outras pessoas. O mesmo se aplica à pontuação. Uma frase bem pontuada é muito mais fácil de entender do que uma sem pontuação.
Passei a me interessar por gramática e pontuação-o que pode ser chamado de”semântica”. Como desenvolvedor de front-end, estou tão interessado na pontuação da web-ou seja, usando as tags corretas para marcar páginas-quanto na exibição de informações.
Nossas páginas da web são documentos. Eles contêm um título principal, representado por um elemento h1. Se eles tiverem seções dentro deles, cada um terá um elemento h2, e se qualquer uma dessas seções tiver uma subseção adicional, cada uma dessas subseções será intitulada por um elemento h3.
Se estivermos olhando para o elemento principal navegação do site, esperamos que um ul seja colocado dentro de um elemento nav. Uma barra lateral provavelmente estará dentro de um elemento à parte (embora nem todos concordem que atualmente é o melhor elemento a ser usado).
Todos nós conhecemos essa semântica geral da web. No entanto, existem muitos elementos HTML disponíveis para marcarmos nossas páginas da web, e será um grande serviço saber sobre eles. Você pode encontrar uma lista completa de elementos HTML no Mozilla MDN Web Docs .
Usando tags HTML5 para SEO e acessibilidade
Por que você deve saber sobre essas tags? Se você se preocupa com acessibilidade (você se preocupa!), Você deseja que sua página seja o mais compreensível possível para o maior número possível de usuários. Se você se preocupa com SEO, você vai querer ter certeza de que os bots podem entender, indexar e retornar seu conteúdo nos resultados de mecanismos de pesquisa, mas também em postagens de mídia social (como cartões do Twitter).
Basicamente, ter um “[site] semântico” significa um site onde, como Tim Berner Lees diz , “as informações têm um significado bem definido, permitindo que os computadores e as pessoas trabalhem em cooperação”.
Vamos dar uma olhada em alguns dos elementos menos usados, que nos ajudarão a faça uma web mais semântica.
Tags HTML importantes que você deve usar
A tag HTML
Você pode ser perdoado por pensar no elemento
é usado apenas para adicionar um endereço a um site. Ele pode ser usado para esta finalidade, mas mais especificamente é usado para fornecer”informações de contato”para oFornecimento de informações de contato para o autor de uma postagem no blog. Certifique-se de colocá-lo dentro de seu elemento
Nas redes sociais, você pode contatá-lo via Twitter e LinkedIn .
Você pode incluir as informações de contato de sua empresa no rodapé do seu site:
O elemento
pode ser ótimo para ajudar as pessoas a encontrar sua localização, número de telefone, etc., nas páginas de resultados do mecanismo de pesquisa. Ignore-o por sua conta e risco.Usando
O elemento
Esse é um exemplo básico de usar o elemento tempo. Geralmente é usado com um atributo datatime, que será facilmente lido pelas máquinas. Você pode usar qualquer formato legível por máquina para este atributo, como um carimbo de data/hora Unix.
Você também pode usar o elemento de tempo para descrever duração, como quanto tempo pode levar para ler a postagem do blog.
Tempo de leitura
Você pode usar o tempo elemento de várias maneiras para deixar claro para as máquinas o que você quer dizer. Vamos fingir que há uma conferência de front-end chegando:
LogRocketBlogConf acontecerá em totalmente online.
As palestras começarão às e a cada hora daí em diante até , dando a você de pura felicidade de frontend.
Usando para abreviações
O elemento ajuda a informar às máquinas que o item que você está falando sobre é uma abreviatura de outra coisa, mas ainda mais para um público que pode não estar totalmente familiarizado com as siglas do seu setor.
Se a abreviatura for bem conhecida, por exemplo, NASA ou EUA, então você não precisa colocá-lo em uma tag . Mas se não for, esta tag é sua melhor amiga. O que é ainda melhor é que ele também tem um atributo de título opcional, que você pode usar para fornecer a renderização completa de sua frase.
Estou cansado de discutir se HTML e CSS são linguagens de programação. Vamos continuar a partir disso.
Também é perfeitamente normal colocar o texto completo embutido. Nesse caso, você pode deixar de fora o atributo title, desta forma:
JavaScript ( JS ) é a linguagem de programação da web.
O tag HTML
O elemento cria um relacionamento legível por máquina (ou “tradução”, como é chamado no MDN) para uma parte específica do conteúdo. Por exemplo, se você possui uma loja de camisetas e vende uma camiseta em três cores e três tamanhos, são nove variações.
Cada uma dessas variações terá um SKU ou ID de produto individual. Você pode representar identificadores exclusivos com o elemento de dados (não o atributo de dados), como:
- Camiseta Log Rocket: Verde, Pequeno
- Camiseta Log Rocket: verde, médio
- Camiseta Log Rocket: verde, grande
- Camiseta Log Rocket: azul, pequena
- Camiseta do Log Rocket: azul, médio
- Camiseta Log Rocket: azul, grande
- Camiseta Log Rocket: vermelha, pequena
- Camiseta Log Rocket: vermelha, média
- Log Rocket T-camisa: Vermelha, Grande
Usando para realçar
A tag é usada para realçar o texto. É diferente de usar itálico ou negrito porque o texto marcado por esta tag não é feito pelo autor original. Você pode pensar nisso como o uso de um marcador para destacar o texto de um livro que você está lendo.
O autor original do livro não faz isso. Em vez disso, você faz isso porque há algo nesse texto que você deseja destacar especificamente para si mesmo.
Acho que é útil ao criar páginas da web e preciso me lembrar de adicionar algo a uma página, então não não se esqueça depois (não é exatamente o que se pretende, visto que sou o autor, mas é muito útil). Freqüentemente, ao escrever uma postagem no blog, posso ter algo assim:
Veja a caneta
Foguete de registro Amostra de blog-elemento de marca por Mark Conroy ( @markconroy )
em CodePen .
Um exemplo do uso da tag pode frequentemente ser visto nas páginas de resultados de pesquisa onde a frase que você pesquisou é destacado pelo mecanismo de busca, não pelo autor original. O texto destacado neste caso é importante apenas neste contexto de pesquisa.
Veja a caneta
Foguete de registro Amostra de blog-marcar elemento 2 por Mark Conroy ( @markconroy )
em CodePen .
Usando e para texto bidirecional
Use o tag quando você deseja ter texto bidirecional em seu documento. Isso é útil se você estiver escrevendo em um idioma da esquerda para a direita, mas precisa citar outro idioma que seja um idioma da direita para a esquerda (como o árabe).
Veja a caneta
Log Rocket Blog Sample-bdo por Mark Conroy ( @ markconroy )
em CodePen .
Lá é uma tag correspondente à tag chamada . Esta tag é para conteúdo bidirecional que deve ser considerado isoladamente do texto ao seu redor. Use se estiver injetando texto dinamicamente em seu documento, mas não souber em que idioma o texto será injetado.
Usando para quebras de palavras
Já já teve uma longa sequência de texto que causa rolagem horizontal, como um URL longo que não cabe em uma linha? Bem, a tag
Então, se você tiver um URL como https://example.com/this/is/a/long/url que não vai caber em uma linha (em um telefone, por exemplo), você pode sugerir ao navegador para dividir a palavra em certos pontos.
Você pode fazer isso assim: https://example.com/.
como texto idiomático
Tenho a sensação de que você pode estar usando o elemento . Mas também tenho a sensação de que você o está usando para ícones como este: , em vez de uma maneira de colocar o texto em itálico. Você usa isso em situações como quando você quer dar o nome de um livro que você leu.
Eu gosto de Cem anos de solidão de Gabriel Garcia Márquez.
, que ficará assim: Gosto de ler Cem Anos de Solidão, de Gabriel Garcia Marquez. Vamos tentar usar este elemento corretamente, para que os leitores de tela possam nos entender, em vez de permitir que as pessoas sequestrem nossa semântica para seus próprios usos.
Conclusão
Este é um resumo rápido de alguns HTML elementos que eu acho que poderiam ser usados de forma muito mais ampla e contribuiriam para uma web mais semântica, melhor acessibilidade e aprimoramento de SEO. Eu recomendo fortemente que você dê uma olhada em todos os elementos disponíveis no MDN docs website para se familiarizar com o que está disponível.
