WebDev

Repositório criado para armazenar todos os arquivos de estudos em HTML, CSS e JS.

     

Estruturando layouts com semântica

✅ Tags Semânticas:

📌 <header> Cabeçalho da página. ex: Logotipo, formulário de busca, menu de navegação;

📌 <nav> Navegação principal, agrupamento de links de navegação;

📌 <footer> Representa o rodapé da página, utilizado geralmente para descrever informações de autoria;

📌 <main> Conteúdo principal da página, o de maior importância. É importante que a página tenha apenas uma tag main;

📌 <section> Seção da página, divide o conteúdo em blocos;

📌 <article> Ponto central do documento, conteúdo principal da página;

📌 <aside> Conteúdos a parte do conteúdo principal, ex: área de propaganda;

📌 <address> Todos os tipos de endereços da página, Ex: Telefone, email para contato.

---

📄 Tags de texto:

📌 <blockquot> Fazer uma citação grande;

📌 <q> Fazer uma pequena citação;

📌 <a> Inserir links;

📌 <strong> Conteúdo de muita importância;

📌 <b> Texto em negrito;

📌 <i> Texto itálico;

📌 <sup> Texto elevado acima;

📌 <sub> Texto abaixo;

📌 <pre> <code> Texto formatado como um código;

📌 <span> Destacar uma parte do texto;

📌 <address> Todos os tipos de endereços da página, Ex: Telefone, email para contato;

📌 <cite> Faz referência a algum conteúdo na página;

📌 <code> Escrever código.

---

📼 Tags de mídia:

📌 <img> Inserir imagens;

📌 <audio> Insere um áudio no site;

📌 <video> Insere um vídeo no site;

📌 <source> Permite colocar conteúdo source;

📌 <iframe> Inserir conteúdo de outra página;

📌 <figure> <figcaption> Um conteúdo que não precisa estar em algum lugar específico para fazer sentido;

📌 <picture> Um container com várias mídias dentro.

---

❎ Tags não Semânticas:

📌 <div> Criar blocos (não acrescenta semântica alguma).

Pseudo-classes:

https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes

Sites interessantes:

https://icomoon.io/

https://fonts.google.com/

https://css-tricks.com/

https://fontawesome.com/