🖥 Esse repositório tem como objetivo reunir as principais tags "estruturais" do HTML5 e explicá-las de uma forma simples.

  • By Leticia 'levxyca'
  • Last update: Oct 15, 2022
  • Comments: 2

📄 Principais TAGS "Estruturais" do HTML5

O objetivo desse site é facilitar a compreensão e uso de algumas tags do HTML5 que considero importantes quando vamos "estruturar" um projeto.

Entrando no site você consegue visualizar como ficaria uma estruturação base de uma página com HTML e ler o que significa cada tag. A intenção é mostrar um exemplo, não uma regra.

✍🏻 TAGS Utilizadas

<header>

<aside>

<nav>

<main>

<section>

<article>

<footer>

Github

https://github.com/levxyca/tags-estruturais-html5

Comments(2)

  • 1

    Melhorias de css

    Objetivo

    Mudanças relacionadas à semântica, cobertura e consistência de código, remoção de duplicação de código e melhorias de estruturação.

    Mudanças efetuadas

    • Portabilidade de flexbox para Grid CSS quando necessário, visando a redução de código e a melhor manutenabilidade. (Código comentado para fins instrutivos).
    • Alteração semântica no HTML pra evitar aninhamento errôneo de tags (incluir links <a> dentro de links é proibido no HTML e resultava em um erro de parsing em que o link e o conteúdo ficavam um fora do outro (vide imagem).
    • Adição de variáveis CSS para fins de padronização de cores.
    • Externalização das media queries para um documento externo para ser executado apenas nos viewports corretos.
    • Reordenação semântica e estrutural no CSS para melhor legibilidade.
    • Deleção e limpeza de regras com pouca cobertura.

    Artefatos visuais

    • HTML com erro de parsing por inserção de links dentro de links Nav renderizado fora da âncora por conter âncoras internas nele
  • 2

    Adicionando a tag nav

    Coloquei o exemplo com os links após o nav, pra ficar mais didático do que apenas inserir o "nav". Mas qualquer coisa posso alterar. web: nav-web mobile: nav-mobile

Popular Tag

Related