O conteúdo principal da página e o elemento principal
Em qualquer página, podemos encontrar o conteúdo principal. Vai variar de página para página, mas definitivamente não se repetirá. Por exemplo, como no site da Smashing Magazine.
A página “Nossos artigos sensacionais e encantadores” exibe uma lista de artigos, e na página “Maturidade em UX crescente: Encontrando um campeão de UX e demonstrando ROI (Parte 1)” já vemos o texto do artigo.
Mas há apenas uma seleção nas imagens, que é chamada de conteúdo principal ou conteúdo principal. Esta área deve ser marcada com o elemento principal.
Conteúdo adicional para o elemento principal e lateral
Além do conteúdo principal, pode haver áreas na página que tenham uma relação temática com ele. Eles complementam o conteúdo principal, mas se forem removidos da página, a clareza do conteúdo não será afetada.
Por exemplo, no site Lenta.ru na página com a notícia “O invicto Josué
aprenderá a afastar a juventude de Ronaldo” existe um bloco “Materiais relacionados”.
O bloco contém um artigo sobre Cristiano Ronaldo, que foi citado no texto do conteúdo principal, ou seja, é criado um link temático, para que o elemento possa ser marcado com um elemento à parte.
Também nesta página com o elemento ao lado, você pode marcar o bloco "Links relacionados", pois todos os links têm uma relação temática com o conteúdo.
Conteúdo agrupado por tema e o elemento de seção
O elemento de seção nos ajuda a destacar as seções da página. Uma seção neste contexto é um conteúdo agrupado por temas, cujo significado é determinado pelo título. Com base na definição, é importante explicar o termo cabeçalho. Um título é um texto que dá um "nome" às informações.
Para explicar melhor, darei alguns exemplos. Considere o bloco “Notícias” no site da BBC.
Em primeiro lugar, é importante encontrar o título. O bloco contém o texto “Notícias”, que “dá o nome” - “Notícias” para 3 notícias lado a lado. Portanto, essa estrutura é um ótimo exemplo de seção.
A seguir, vamos dar uma olhada nos blocos que exibem informações de preços no site do Patreon.
Agora precisamos encontrar o título. Neste exemplo, os itens “Lite”, “Pro” e “Premium” são títulos. Porque? Imagine que estou discutindo tarifas com alguém e digo: “Pro tarifa”, então meu interlocutor vai entender imediatamente de qual bloco estou falando e quais informações ele contém. Acontece que “Pro tarifa” é um “nome”.
Agora temos um título e informações, como no exemplo anterior, eles podem ser agrupados com um elemento de seção.
Vamos dar uma olhada no último exemplo no site PiterCSS, onde há um bloco com informações sobre o relatório.
Encontre o título novamente. Aqui está o título do relatório, que combina o resto das informações sobre o relatório e o orador. Em seguida, vou agrupá-lo e o título com um elemento de seção.
Espero ter conseguido passar minha regra para usar o elemento de seção. Procuramos o título e o conteúdo relacionado a ele e agrupamos com o elemento section. E é importante observar que uma seção não pode existir sem um título, portanto, o elemento de seção deve conter um dos elementos h1-h6.
Regiões de página independentes e o elemento de artigo
O elemento de artigo deve ser usado para selecionar áreas independentes na página que podem ser retiradas de seu ambiente lógico. Este elemento é freqüentemente confundido com o elemento section, então quero mostrar a diferença com exemplos.
No site da BBC Sport há um bloco com a classificação da segunda liga do campeonato da Inglaterra.
Agora irei deletar todas as informações ao redor.
Excluí tudo da página, mas ainda entendo o que o bloco está fazendo, que é mostrar a classificação. Acontece que a remoção de um elemento de seu ambiente lógico não o afetou de forma alguma.
Agora vou pegar o bloco com informações sobre o plano "Pro" do site do Patreon e deletar todos os elementos restantes.
Entendo que se trata de um bloco com informações sobre a tarifa "Pro". Multar. Mas essa é a tarifa de qual produto? O que eu deveria fazer com isso? Não está claro.
Acontece que a remoção de um bloco de seu ambiente lógico o afetou. Como usuário, parei de entender o que fazer com esse bloqueio. Se eu incorporar em outro site, parece "estrangeiro".
É aqui que reside a diferença essencial entre os elementos da seção e do artigo. Esta é uma linha muito tênue, mas o ponto é que se o elemento não for "perdido" quando o contexto circundante for removido, ele deve ser marcado com o elemento de artigo. E se for perdido, temos um elemento de seção.
Elemento de navegação e nav junto com elementos ol e ul
Para destacar a navegação na página, devemos usar o elemento nav. Mas isto não é o suficiente. Freqüentemente, precisamos agrupar itens usando uma lista. Os elementos ol e ul são adequados para essa tarefa. Mas como você escolhe entre eles?
Com base nessa pergunta, considerarei dois tipos de navegação, a saber, a ordem estrita de itens e a ordem não estrita de itens.
Ordem estrita de cláusulas e navegação junto com ol
Um exemplo popular de navegação em que a ordem dos elementos é estrita são as migalhas de pão no site Mvideo.
Por que estou chamando esta navegação com ordem de pontos estrita? Se você trocar os itens, a navegação deixa de corresponder à estrutura do site. Por exemplo, vou trocar os itens
"Casa" e "Smartphones e comunicações".
- Smartphones e comunicação
- o principal
- Smartphones
- Iphone
Ocorreu um erro. Temos que ir para a página inicial da página Smartphones e Comunicações, e isso não é possível. Com base nisso, concluo que a ordem dos itens é importante, e para uma lista contendo a ordem estrita dos itens, devemos usar o elemento ol.
Além da localização atual, a paginação pode ser atribuída a esse tipo de navegação.
Pedido de item solto e o elemento nav junto com o ul
Um exemplo dessa navegação é o menu do site Mvideo.
Vou trocar os itens novamente. Por exemplo, adicionarei os itens "Todas as promoções" e "Descontos até 80%" ao final da lista:
- Smartphones
- Aparelhos de TV
- Laptops
- Geladeiras
- Máquinas de lavar roupas
- Soluções inteligentes
- maçã
- Todas as promoções
- Descontos até 80%
Ok, os itens são exibidos em uma ordem diferente, e daí? A navegação funciona como antes. Acontece que alterar a ordem dos itens não afetou a navegação, portanto, o elemento ul é adequado aqui.
Introdução ao conteúdo e ao elemento do cabeçalho
Há uma opinião na Internet de que o elemento de cabeçalho deve ser usado para marcar o "cabeçalho" do site. Eu não gosto dessa definição, porque ela não reflete totalmente a imagem.
Sim, podemos usar o elemento header para marcar o "topo" do site, mas também podemos usá-lo dentro da seção, artigo, principal, elementos ao lado.
Elemento de cabeçalho dentro dos elementos principal, lateral, seção e artigo
Quando aninhamos um elemento de cabeçalho nos elementos principal, de lado, de seção e de artigo, ele começa a descrever as informações introdutórias para esse elemento.
Por exemplo, no site da Smashing Magazine, o elemento do cabeçalho descreve uma introdução ao conteúdo da página principal, que é marcada com um elemento principal.
O elemento agrupa o título “Nossos artigos sensacionais” e o texto introdutório. Isso nos dá uma introdução aos artigos que se seguem.
Na seção Postagens recentes da página inicial da Smashing Magazine, o elemento de cabeçalho pode ser usado para combinar a data da postagem, o título e o autor da postagem. Nesse caso, o elemento do cabeçalho está dentro do elemento do artigo.
Em um site de conferência PiterCSS, o elemento de cabeçalho pode ser usado para combinar o título e o texto do patrocinador dentro do elemento de seção.
Elemento do cabeçalho dentro do elemento do corpo
Além de introduzir elementos individuais, podemos marcá-lo para todo o site como um todo. Para fazer isso, precisamos aninhar o elemento do cabeçalho dentro do elemento do corpo.
Por exemplo, como na Smashing Magazine, onde os elementos do cabeçalho combinam logotipo, navegação e pesquisa.
Em geral, podemos usar com segurança o elemento header quando precisamos marcar uma "introdução" ao conteúdo do elemento body ou dos elementos principal, aparte, seção e artigo.
Informações de fundo e o elemento de rodapé
Parece-me que o elemento de rodapé é, infelizmente, um irmão do elemento de cabeçalho. Se o segundo for aconselhado a ser usado para o "cabeçalho", então o primeiro é para o "porão".
O elemento de rodapé é adequado para marcar informações de segundo plano que seguem o conteúdo do elemento. Tal como acontece com o elemento de cabeçalho, o elemento de rodapé pode ser usado de várias maneiras.
O elemento de rodapé dentro do artigo, elementos de lado e de seção
No site tutsPlus, o elemento rodapé agrupa informações sobre o autor, a data e a categoria da publicação. Nesse caso, o elemento de rodapé está dentro do elemento de artigo.
Elemento de rodapé dentro do elemento de corpo
Como eu disse acima, as informações básicas também existem para o site como um todo. Neste caso, esta área deve ser repetida em todas as páginas.
Por exemplo, na Smashing Magazine, o elemento de rodapé exibe hashtags, navegação secundária.
Informações de contato e o elemento de endereço
De acordo com minhas observações, este elemento é um dos menos utilizados, embora as informações de contato estejam em todos os sites. Usando o elemento de endereço, você pode marcar o endereço, número de telefone, links para redes sociais. redes, etc.
Por exemplo, no site Mvideo, o elemento de endereço deve marcar o bloco com o telefone e as redes sociais.
Conclusão
Espero ter conseguido mostrar pelo menos um pouco a variedade de casos em que podemos usar diferentes elementos HTML. Espero que você possa tentar usar este estêncil em seus projetos.
Se você gostar, use o elemento de endereço. Parece-me que ele foi esquecido sem merecimento. Também para aqueles que querem perguntar “Por que isso é necessário?” Eu tenho uma resposta - muito legal.
PS: Eu também escrevo tutoriais CSS / HTML no meu Patreon. Você pode encontrá-lo pelo link no meu perfil no Habré.