Curso de HTML5 - 18 - Semântica em HTML5 - by Gustavo Guanabara

EXTRA! Download GRÁTIS dos pacotes para as aulas:

Como usar as tags SECTION, ASIDE e FOOTER. O HTML5 possui algumas tags que dão significado ao conteúdo da página.

SECTION: Cria uma sessão que vai poder conter vários artigos (ARTICLE) ou objetos.

ASIDE: São conteúdos periféricos, que estão diretamente relacionados ao conteúdo do artigo principal.

FOOTER: É o rodapé da página ou do conteúdo específico.

Para configurar essas tags e utilizar o posicionamento correto, utilizaremos o CSS3 com os modificadores DISPLAY: BLOCK e o FLOAT para gerar uma flutuação.

Caso seja necessário interromper a flutuação, utilizaremos o modificador CSS CLEAR:BOTH para eliminá-la.

Curso em Vídeo

Patrocínio

Estude pelo nosso site e tire certificado de 40 horas. Curso completo em:

[LuuuKz]

NOVIDADES:

A tag <section> serve para representar uma seção GENÉRICA, geralmente com um título, quando não há uma tag semântica mais específica para representar um elemento.
section = seção

A tag <aside> serve para representar uma seção de conteúdo SECUNDÁRIO àquele que é PRINCIPAL. Ou seja, pode ser uma notícia ligeiramente relacionada ao tema principal, um glossário, avisos, etc.
aside = de lado/ao lado = conteúdo lateral/secundário

A tag <footer> serve para representar uma seção de RODAPÉ.
*É importante enfatizar que não é apenas a PÁGINA PRINCIPAL que têm rodapé. Seções como: <section>, <aside>, <nav>, <figure>, <article> também podem ter o seu próprio rodapé. Estes rodapés normalmente contém informações sobre o autor, contato, direitos autorais ou links para conteúdos relacionados.
footer = rodapé

A propriedade float: serve para fazer com que um elemento FLUTUE dentro do seu container (bloco). Um elemento que flutua faz com que os outros elementos dentro do mesmo container (bloco) posicionem-se ao seu lado. Você pode definir em QUAL LADO ele irá flutuar através destes valores:
float: left; (o elemento irá flutuar à esquerda do bloco)
float: right; (o elemento irá flutuar à direita do bloco)
float: none; (o elemento não irá flutuar (valor padrão))

A propriedade clear: serve para fazer com que um elemento NÃO SEJA INFLUENCIADO pela propriedade float: de outros elementos. Ou seja, o clear: irá anular o efeito do float:. Ex:
clear: left; (não sofrerá influência de float: left;)
clear: right; (não sofrerá influência de float: right;)
clear: both; (não sofrerá influência de ambos lados)
*Recomendo assistir o vídeo com o título: "Curso de CSS3 #34 - Propriedades float e clear" do CFBCursos que ele explica e ilustra muito bem tanto o float: quanto o clear:.

[felipefontoura]

Ano de 2020, aprendendo HTML5 com esse excelente professor!

[henrique-d]

Recomendo que primeiro façam o curso completo, pausando e se exercitando com o conteúdo da aula, e dps de concluído as videoaulas e o site, use o html criado como base pra criação de sites seus para exercício, e tbm recomendo que usem o Brackets, editor perfeito e gratuito.

[wesleytuck]

Hoje em dia achar um curso desses de graça é difícil, muito obrigado professor!!

[fernandovideos]

Minutagem
00:00 Intro
00:26 Apresentação
02:55 Início Aula 18
04:42 Delimitando a Section, Aside e Footer
07:04 Formatando a Section, Aside e Footer
08:07 float
09:57 Rodapé e clear
12:15 Divisórias
14:09 Formatando o Footer
16:44 Encerramento

[reneiltonaragao]

Para quem está com problema com a imagem, eu tive que fazer tudo isso para ajustá-lá ao texto, pois ela ficava cobrindo, isso resolveu meu problema...

/* Formatação de imagens com legendas */

figure.foto-legenda{
position: relative;
border: 8px solid white;
box-shadow: 1px 1px 4px black;
width: auto;
height: auto;

}

figure.foto-legenda img {
width: 100%;
height: auto;
}

figure.foto-legenda figcaption {
opacity: 0;
position:absolute;
top:0px;
background-color: rgba(0, 0, 0, .4);
color: white;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
transition: opacity 1s;
}

figure.foto-legenda:hover figcaption {
opacity: 1;
}

[Antonioalvesjr]

O ano é 2019 e estou fazendo o curso de HTML5 do Guanabara!

[jorgesantiago]

Pra quem não conhece, uma técnica bastante usada que pode ajudar é colocar background-color nessas tags (section, aside e footer). cada uma com uma cor diferente, para melhor enxerga-las posiciona-las. quando estiverem nos lugares certos removam os backgrounds.

[Xxvinicius]

Estamos no FINAL DE 2019 e ainda estou aprendendo #HTML, CSS E JAVASCRIPT com esse monstro!

[wilkermizael]

Ano de 2022, aprendendo HTML5 com esse excelente professor!

[juanrossi]

Fala Guanabara, tô aprendendo muito contigo, muito obrigado mesmo por esse conteúdo todo de tão alto nível, excelente o teu trabalho, conhecimento e didática, abração!!!

[andrelima]

Esse seu Método de ensino é sensacional, você consegue transforma qualquer leigo em um verdadeiro EINSTEIN!!! rs. 

[danielrodrigues]

Professor Parabéns Otimas aulas, Deus lhe abençoe você e sua familia.

[brunoassis]

É incrível como o cérebro ja vai memorizando as tags e suas funções e vou e faço a tag antes mesmo do Guanabara terminar de falar, valeu Gustavo!

[robsonrobinhocross]

O ano é 3000 e estou aqui aprendendo com esse excelente professor. Pronto, agora chega !

[andrelsa]

Caso alguém esteja com dúvidas sobre como configurar o footer, fiz da seguinte maneira.

footer#rodape p{
clear: both;
border-top: 1px solid #606060;
text-align: center;
padding-top: 10px;
}

Esta funcionando corretamente. =D

[sarinha]

Otima aula de HTML5! Em 2016 as vagas de emprego do sit da trainning diminuíram demais!Que Deus abençoe q as coisas melhorem e que volte a ter milhares de vaga de TI e de outras áreas !

[daristoncleber]

Gustavo Guanabara, queria aqui diante deste comentário dizer a você que eu era um zero a esquerda no desenvolvimento web, e seus videos abriu minha mente para grandes ideias, com suas dicas diante deste tema que você esta criando, eu estou desenvolvendo meu próprio site, stylizando ele da maneira que eu quero e dando aquele style que você esta me ensinando.

continue formando novos programadores e desenvolvedores você é um excelente professor.

[MrCaninha]

CADA AULA QUE EU ASSISTO, EU ME EMPOLGO MAIS AINDA, AMO ESSA LINGUAGEM!