Elementos semânticos HTML
Ao contrário disso, elementos não semânticos apresentam apenas o conteúdo, em vez de defini-lo. como e tags. Tendo em vista a importância dos elementos semânticos HTML, compilamos este guia que apresenta a lista de elementos semânticos HTML e seu uso.
Elementos semânticos HTML
A seguir, são apresentados vários elementos semânticos HTML amplamente utilizados
- : O conteúdo principal do documento HTML é descrito usando esta tag e recomenda -se usar apenas uma vez em todo o documento.
- : Este elemento semântico mostra que o artigo será definido usando esta tag e usada para escrever postagem no blog, artigos de notícias etc ..
- : Ele adiciona uma nova seção em sua página que também pode conter várias outras tags.
- : Este elemento define a parte do cabeçalho do seu conteúdo e pode ser usado para o cabeçalho da seção, cabeçalho do artigo.
- : Como o nome direciona, ele é usado para adicionar um rodapé a qualquer conteúdo da sua página da web.
- : Este elemento é usado para adicionar detalhes extras ao conteúdo e o espectador pode ocultar/mostrar que os detalhes de acordo com sua necessidade.
- : Este elemento define o conteúdo descrito em tag. Isso cria um título e, ao clicar nesse cabeçalho, o conteúdo dos detalhes pode ser visto.
- : Como o nome mostra, esse elemento permite adicionar uma imagem à sua página da web usando o elemento embutido .
- : Este elemento é praticado para adicionar uma legenda a qualquer figura e é usado dentro do elemento.
A partir das informações indicadas acima, você teria obtido a descrição preliminar de vários elementos semânticos HTML. Nos próximos exemplos, fornecemos o uso de alguns elementos semânticos em vários cenários.
Exemplo 1: Usando e
E são elementos semânticos HTML interligados e o código a seguir é usado para representar seu uso.
Linuxhint
Ele fornece conteúdo para usuários do Linux, usuários do Windows, desenvolvedores
Na tag acima, um elemento é declarado no qual a tag está incorporada.
Saída:
Todo o conteúdo é fechado usando a tag e a tag é usada para definir um título para esse conteúdo.
Exemplo 2: Usando e
As seguintes linhas de código apresentam o uso e elemento semântico.
Fig1: Linuxhint logotipo
O código acima é descrito como,
- O elemento contém e tags
- é usado para vincular a figura colocada em nosso computador e a legenda da figura sendo importada.
- A tag define o estilo de borda e a largura do elemento.
Saída:
Exemplo 3: Usando e
O código a seguir exerce várias tags no elemento.
Primeira sessão
Segunda seção
O código acima é descrito como,
- Um artigo usando tag é definido que contém duas seções
- A borda de está definida como sólida e o preenchimento de 4px é definido
- Cada seção tem uma borda pontilhada e uma margem de 2px.
Observação: Os estilos de fronteira, margem e preenchimento são usados apenas para diferenciar o espaço ativo de cada elemento.
Saída:
A área dentro da borda sólida está contida, enquanto as fronteiras pontilhadas mostram o espaço ocupado por cada elemento.
Exemplo 4: Usando e
O AND geralmente são usados para definir o cabeçalho e o rodapé de uma página ou um elemento também podem conter. O código a seguir descreve como o cabeçalho e o rodapé são declarados:
Cabeçalho
Este código representa o uso de cabeçalho e rodapé
Rodapé
O código é descrito da seguinte maneira,
- Um cabeçalho e rodapé são definidos usando e tag
- Um parágrafo é declarado entre o cabeçalho e o rodapé
- Cor de fundo e estilo de fronteira de cabeçalho e rodapé são definidos na tag
Saída:
A partir dos exemplos declarados acima, você teria entendido a funcionalidade de vários elementos semânticos.
Conclusão
Os elementos semânticos html que seus eus contêm o objetivo de seu uso, como ,