/HtmlCssLaboratory

Este repositório é um espaço dedicado ao estudo e desenvolvimento utilizando HTML e CSS. Aqui você encontrará scripts, protótipos de projetos e ferramentas úteis, todos organizados de forma clara e concisa.

Primary LanguageHTML

Considerações Gerais

Propriedades "Display"

Determina como o elemento será exibido na página. Os dois valores mais comuns para essa propriedade são block e inline.

Elementos com "display: block" são elementos de bloco que ocupam toda a largura disponível do contêiner pai. Eles geralmente são usados para criar estruturas como seções, parágrafos, títulos e divs. Além disso, esses elementos começam em uma nova linha e podem ter margens, preenchimento, largura e altura especificados.

Elementos com "display: inline" são elementos de linha que ocupam apenas o espaço necessário para exibir seu conteúdo, sem iniciar uma nova linha. Eles são comumente usados para texto e imagens em linha e não têm margens, preenchimento, largura ou altura definidos.

É importante ressaltar que existem outras opções de valores para a propriedade "display", como "inline-block", "flex", "grid", entre outros, que podem ser usados para criar diferentes layouts e efeitos visuais em sua página. É importante conhecer as diferenças entre esses valores e quando usá-los para criar páginas web eficientes e atraentes.

Tags de Seção

São elementos HTML usados para dividir o conteúdo de uma página em seções distintas e semânticas. Essas tags são importantes porque ajudam a estruturar o conteúdo da página, tornando-o mais legível para os usuários e mais fácil de ser interpretado pelos mecanismos de busca e outras tecnologias de leitura de tela.

Algumas das tags de seção mais comuns são:

  • <div>: é uma tag genérica usada para agrupar elementos de uma página em uma seção comum. Ela não possui nenhuma semântica específica, mas é amplamente usada para criar layouts e estruturas de páginas.

  • <span>: é uma tag genérica usada para agrupar elementos de uma página em uma seção comum. Assim como a tag <div>, ela não possui nenhuma semântica específica, mas é usada para agrupar elementos em um contexto comum.

  • <section>: é uma tag semântica usada para representar uma seção lógica do conteúdo da página. Ela pode ser usada para dividir o conteúdo em capítulos, partes, tópicos, etc. Cada seção deve ter um cabeçalho identificando seu título ou assunto.

  • <article>: é uma tag semântica usada para representar um conteúdo completo e independente dentro da página. Ela pode ser usada para artigos, postagens de blog, notícias, etc. Cada artigo deve ter um cabeçalho identificando seu título e, opcionalmente, um rodapé com informações adicionais.

  • <header>: é uma tag semântica usada para representar o cabeçalho de uma seção ou da página inteira. Ela pode conter um título, uma logo, uma navegação e outras informações importantes.

  • <footer> é uma tag semântica usada para representar o rodapé de uma seção ou da página inteira. Ela pode conter informações de contato, direitos autorais, links de redes sociais e outros conteúdos importantes.

Em geral, é importante usar as tags de seção apropriadas para cada tipo de conteúdo, para que a página seja bem estruturada e semântica. As tags semânticas ajudam a melhorar a acessibilidade e a usabilidade da página, além de serem importantes para a otimização do mecanismo de busca e para a interpretação correta do conteúdo em diferentes plataformas.

Fontes