Se você observar a marcação HTML de qualquer página da Web hoje, verá elementos HTML contidos em outros elementos HTML. Esses elementos que estão "dentro" de outros são conhecidos como "elementos aninhados" e são essenciais para a criação de qualquer página da Web hoje.
O que significa aninhar tags HTML?
A maneira mais fácil de entender o aninhamento é pensar nas tags HTML como caixas que armazenam seu conteúdo. Seu conteúdo pode incluir texto, imagens, etc. As 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, além do próprio texto.
Exemplo: este é um frase de texto.
Esse texto é o que vamos usar como nosso exemplo. Aqui está como isso seria escrito.
Exemplo: esta é uma frase de texto. Porque você quer que a palavra "frase" seja em negrito, você adiciona abrindo e fechando marcas em negrito antes e depois dessa palavra.
Exemplo: este é um frase de texto. Como você pode ver, temos uma caixa (o parágrafo) que contém o conteúdo / texto de nossa sentença, além de uma segunda caixa (o par de marcas fortes), que tornará essa palavra em negrito. Quando você aninha tags, é extremamente importante fechar as tags na ordem oposta em que você as abriu. Você abre o primeiro, seguido do , o que significa que você reverte isso e fecha o e depois 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 parte interna antes de poder fechar a caixa externa ou contendo. E se você quiser apenas uma ou duas palavras para ser em negrito e outro conjunto para ser em itálico? Veja como fazer isso. Exemplo: este é um frase de texto e também tem alguns texto em itálico também. Você pode ver que nossa caixa externa, a , agora tem duas tags aninhadas dentro dele - o e a . Ambos devem ser fechados antes que a caixa contendo possa ser fechada. Exemplo: este é um frase de texto e também tem alguns texto em itálico também. Este é outro parágrafo. Neste caso, temos caixas dentro de caixas! A caixa mais fora é a O motivo número um que você deve se preocupar com o aninhamento é se você vai usar CSS. As folhas de estilos em cascata dependem de tags para serem aninhadas consistentemente no documento, de modo que ele possa dizer onde os estilos começam e terminam. Se você configurar um estilo que deve afetar todos os "links que estão dentro da divisão com uma classe de texto de" conteúdo principal "na página, o aninhamento incorreto dificulta que o navegador saiba onde aplicar esses estilos. Vamos ver um pouco de HTML: Exemplo: este é um frase de texto e também tem alguns texto em itálico também. Este é outro parágrafo. Usando o exemplo que acabei de afirmar, se eu quisesse escrever um estilo CSS que impactasse o link dentro dessa divisão, e apenas esse link (em oposição a quaisquer outros links em outras seções da página), eu precisaria usar o aninhamento para escrever meu estilo, como tal: .main-content a { cor: # F00;}
Outros motivos incluem acessibilidade e compatibilidade com o navegador. Se o seu HTML estiver incorretamente aninhado, ele não será tão acessível para leitores de tela e navegadores mais antigos - e pode até quebrar completamente a aparência visual de uma página se os navegadores não puderem renderizar corretamente uma página porque os elementos e tags HTML estão fora do lugar. Finalmente, se você está se esforçando para escrever HTML completamente correto e válido, você precisará usar o aninhamento correto. Caso contrário, todos os validadores sinalizarão seu HTML como incorreto. Adicionando Tags Mais Aninhadas
Por que você deve se preocupar com aninhamento
