ūüĖ• 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