Se você olhar para o HTML marcação para qualquer página da web hoje, você verá elementos HTML contidos em outros elementos HTML. Esses elementos que estão "dentro" de outros elementos são conhecidos como elementos aninhadose são essenciais para a construção de qualquer página da web hoje.
O que significa aninhar tags HTML?
A maneira mais fácil de entender o aninhamento é pensar em Tags HTML como caixas que armazenam seu conteúdo. Seu conteúdo pode incluir texto, imagens e mídia relacionada. Tags HTML são as caixas ao redor do conteúdo. Às vezes, você precisa colocar caixas dentro de outras caixas. Essas caixas "internas" estão aninhadas dentro de outras.
Se você tem um bloco de texto que deseja negrito dentro de um parágrafo, você terá dois Elementos HTML bem como o próprio texto.
Exemplo: esta é uma frase de texto.
Esse texto é o que usaremos como nosso exemplo. Aqui está como seria escrito em HTML:
Exemplo: esta é uma frase de texto.
Para fazer a palavra sentença negrito, adicione tags de abertura e fechamento antes e depois dessa palavra.
Exemplo: este é um sentença de texto.
Como você pode ver, temos uma caixa (o parágrafo) que contém o conteúdo da frase, mais uma segunda caixa (o Forte par de tags), o que torna essa palavra em negrito.
Ao aninhar tags, feche-as na ordem oposta à de abertura. Você abre o
primeiro, seguido pelo , o que significa que você inverte isso e fecha o e então o.
Outra maneira de pensar sobre isso é mais uma vez usar a analogia das caixas. Se você colocar uma caixa dentro de outra caixa, terá que fechar a caixa interna antes de fechar a caixa externa ou que contém.
Adicionando mais tags aninhadas
E se você só quiser que uma ou duas palavras sejam negrito e outro definido como itálico? Veja como fazer isso.
Exemplo: este é um sentença de texto e também tem alguns texto em itálico também.
Você pode ver que nossa caixa externa, o
, agora tem duas tags aninhadas dentro dele - o e a . Ambos devem ser fechados antes que a caixa que o contém possa ser fechada.
Exemplo: este é um sentença de texto e também tem alguns texto em itálico também.
Este é outro parágrafo.
Nesse caso, temos caixas dentro de caixas! A caixa mais externa é a
ou a. divisão. Dentro dessa caixa há um par de aninhados. tags de parágrafo, e dentro do primeiro parágrafo, temos um próximo. e par de tags.Por que você deve se preocupar com aninhamento
O principal motivo pelo qual você deve se preocupar com o aninhamento é se for usar CSS. Cascading Style Sheets dependem de tags para serem consistentemente aninhadas no documento para que ele possa dizer onde os estilos começam e terminam. O aninhamento incorreto torna difícil para o navegador saber onde aplicar esses estilos. Vejamos alguns HTML:
Exemplo: este é um sentença de texto e também tem alguns texto em itálico também.
Isso é outro parágrafo.
Usando o exemplo acima, se quiséssemos escrever um Estilo CSS que afetaria o link dentro desta divisão, e apenas esse link (em oposição a quaisquer outros links em outras seções da página), precisaríamos usar o aninhamento para escrever este estilo, como tal:
.main-content a {
cor: # F00;
}
outras considerações
A acessibilidade e a compatibilidade do navegador também são importantes. Se o seu HTML estiver aninhado incorretamente, não será tão acessível para leitores de tela e navegadores mais antigos - e pode até mesmo quebrar completamente o aparência visual de uma página se os navegadores não conseguirem descobrir como renderizar corretamente uma página porque os elementos HTML e as tags estão fora Lugar, colocar.
Finalmente, se você estiver se esforçando para escrever um HTML completamente correto e válido, você precisará usar o aninhamento correto. Caso contrário, todo validador sinalizará seu HTML como incorreto.