Repositório criado para demonstrar diferentes propostas de layouts utilizando HTML5 Semântico, servindo como material de apoio para alunos e desenvolvedores que desejam compreender a estruturação de páginas web modernas.
Cada exemplo apresenta uma organização visual diferente, simulando cenários reais encontrados no mercado de desenvolvimento web.
Acesse os exemplos publicados através do GitHub Pages:
👉 https://profgregorio.github.io/ExemplosDeLayoutsHTML5/
- Praticar HTML5 Semântico;
- Compreender diferentes estruturas de layout;
- Desenvolver boas práticas de organização de páginas;
- Criar bases para aplicação de CSS e JavaScript;
- Servir como referência para projetos futuros.
Estrutura comum para empresas, escritórios, escolas e negócios locais.
- Header
- Menu de navegação
- Seções de conteúdo
- Footer
Modelo inspirado em portais de conteúdo e blogs pessoais.
- Articles
- Sections
- Sidebar
- Organização de postagens
Modelo utilizado em sistemas administrativos e painéis de controle.
- Sidebar
- Área principal de conteúdo
- Cards informativos
- Estrutura administrativa
Inspirado em grandes portais de notícias.
- Destaques principais
- Notícias secundárias
- Organização por categorias
- Hierarquia visual da informação
Estrutura focada em apresentação visual e destaque de conteúdo.
- Banner principal
- Chamada de destaque
- Conteúdo promocional
- Estrutura institucional moderna
Modelo inspirado em lojas virtuais.
- Catálogo de produtos
- Cards de produtos
- Organização comercial
- Experiência de navegação
Estrutura semelhante a serviços de streaming de vídeo.
- Exibição em cards
- Organização por categorias
- Layout horizontal
- Destaque para conteúdo visual
Durante a construção dos layouts são utilizados elementos semânticos do HTML5:
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>/
├── index.html
├── 1/
│ └── index.html
├── 2/
│ └── index.html
├── 3/
│ └── index.html
├── 4/
│ └── index.html
├── 5/
│ └── index.html
├── 6/
│ └── index.html
├── 7/
│ └── index.html
└── favicon.png
git clone https://github.com/ProfGregorio/ExemplosDeLayoutsHTML5.gitindex.html
Utilize o menu principal para acessar cada proposta de layout.
Este projeto tem como foco o estudo da estruturação de páginas utilizando HTML5.
Ao analisar cada layout, procure observar:
- A organização dos elementos;
- A utilização correta das tags semânticas;
- A hierarquia dos conteúdos;
- A disposição visual dos componentes;
- As possibilidades de estilização utilizando CSS.
Além disso, experimente:
- Alterar as cores;
- Criar novas seções;
- Adaptar os layouts para dispositivos móveis;
- Adicionar animações e interatividade com JavaScript.
👉 Valide sempre seus documentos utilizando o W3C Validator:
Os layouts apresentados servem como base para:
- Sites Institucionais
- Blogs
- Portais de Notícias
- Dashboards Administrativos
- E-commerces
- Plataformas de Streaming
- Landing Pages
Gregorio Queiroz
Professor de Desenvolvimento Web e Fullstack
Um bom layout não é apenas bonito. Ele organiza a informação, melhora a experiência do usuário e facilita a manutenção do projeto.