Nesta aula, exploramos a semântica do HTML5, destacando tags como header, nav, article, section e footer, e como elas ajudam SEO e acessibilidade.
Uma página HTML5 tem, de forma genérica, a estrutura doctype, elemento raiz, head com metadados e o body com o conteúdo. O uso de tags semânticas facilita a leitura por humanos e por máquinas (buscadores).
Exemplo mínimo (semântico):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exemplo Semântico</title>
</head>
<body>
<header><h1>Título</h1></header>
<main>
<section>
<h2>Seção 1</h2>
<p>Conteúdo.</p>
</section>
</main>
<footer>Rodapé</footer>
</body>
</html>Tags semânticas indicam o papel do conteúdo: cabeçalho (header), navegação (nav), conteúdo principal (main), artigos (article), seções (section), conteúdo suplementar (aside), rodapé (footer) e outros (figure, figcaption).
Exemplos práticos: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
Article representa conteúdo autônomo que pode ser redistribuído ou reutilizado independentemente (ex.: notícia, post, comentário).
Section agrupa conteúdo por tema dentro de uma página. Pode conter cabeçalhos, mas não precisa ser independente.
Exemplo prático:
<article>
<header><h2>Notícia A</h2></header>
<p>Conteúdo da notícia A...</p>
<footer>Fonte/Autor</footer>
</article>
<section>
<header><h3>Seção relacionada</h3></header>
<p>Conteúdo da seção</p>
</section>Use o DOCTYPE HTML5: <!DOCTYPE html>. A estrutura básica com cabeçalho, conteúdo e rodapé facilita a organização da página e a leitura por motores de busca e leitores de tela.
Tags semânticas ajudam leitores de tela a interpretar conteúdos de forma mais precisa. Manter uma ordem lógica de leitura (cabeçalho, conteúdo principal, rodapé) é essencial.
3 dicas rápidas:
- Use article para conteúdos independentes; use section para agrupamentos temáticos.
- Combine header com nav, e inclua um footer significativo.
- Evite excessos de marcação desnecessária; priorize clareza e escaneabilidade.
Qual é a função principal do elemento <header> em HTML5?
Resposta correta: C) Definir o cabeçalho da página ou seção, podendo incluir logo, título e navegação
Observação: o header pode conter elementos como logo, título, menu de navegação e outras informações introdutórias.
Qual é a maior diferença conceitual entre <article> e <section> em HTML5?
Resposta correta: A) Article representa conteúdo independente; Section agrupa conteúdo por tema
Observação: Use Article para itens que podem ser independentes/compartilhados; use Section para dividir conteúdo dentro de uma página por tema.
Por que a semântica em HTML5 facilita SEO e acessibilidade?
Resposta correta: C) Porque ajuda motores de busca e leitores de tela a entenderem a estrutura da página
Observação: semântica melhora indexação e acessibilidade, facilitando a navegação por usuários assistivos.
Considere uma página de notícias com várias peças independentes. Qual configuração semântica é a mais adequada?
Resposta correta: C) Use <article> para cada notícia, com <header> e <footer> internos; use <section> para agrupar conteúdos por tema
Observação: essa combinação ajuda a separar conteúdos independentes (notícias) e agrupar conteúdos relacionados por tema quando necessário.
Apenas de Apenas Olá a todos, espero que estejam todos bem.
Vamos dar início a mais com uma semana, da disciplina de fundamentos de Interrente Web.
E dessa vez nós vamos extender a aula da semana 4, vamos continuar falando sobre a TML.
Esta vez na versão mais enriquecente da TML, que é a TML versão 5.
Na aula vamos fazer uma introdução sobre o TML, falar especificamente da TML 5.
O que se ganha com essa nova versão da TML, relação a versão anterior, que é versão 4, no ponto de vista de que está melhor uma página na TML, novos elementos, uma coisa interessante que é a possibilidade de dividar, em forma mais natural com a questão da semântica do documento.
Essa semântica é especialmente semântica dos elementos.
Por que a TML 5? A gente viu na aula anterior na semana 4? A estrutura básica de uma página da TML, quando conseguir um país da TML, usando os elementos principais, os textos principais, com o conceito de tabelas, com o microfone antestual, com o modificar fonte, que é nativo, e o tamanho da fonte, que é nativo e próprio a TML.
Essas questões mais distil, vamos abordar na próxima semana que é a semana 6, que é a possibilidade de mudar toda a organização do bom divista, de cores, de formatação, de todo o conteúdo dos elementos.
Então, ao meu gatemari 4, a vantagem de relação 5, que é um traiz de diferenciar uma relação à semântica do corpo, que é nativo da TML 5.
O gatemari 5 vai facilitar uma manipulação de elementos, documento da TML, praticamente fica mais simples de estruturar uma página da TML, com o defesa de setorizar os conteúdos, ele se entrega mais facilmente ao CSE, a criação de fores de estilo, para formar um tamanho da pálida, e linguagem como já escreve por exemplo.
Que ele modifica a forma como escreveu uns códigos, organizamos informações na parte.
Então, é mais semântica, menos código, então, o trago é uma carga menor de código, vendo da própria estrutura na parte da TML, fazendo a mesma coisa e melhor com diferenciar o seu mântico.
Mais interatividade, sem instalação de brunguins, era muito comum em versões anteriores.
O gatemari era a divisação de brunguins, para executar áudio, vídeo, então era muito popular nos 8-10 anos, os anos dos de flash, que era para montar informações com conteúdo 1.
000.
Isso dava muito problema, porque não se integrava nativamente com o gatemari, então era muito comum se cargar um par de gatemari, e o conteúdo com flash não carregava, enfim.
Então, desenvolver o gatemari, permite, por exemplo, o que é o mesmo código, que executou num braço, o web, que é acessado, e acessado não que roda no notebook, que é o mesmo código, em poucas adaptações, pode ser executados em um material do celular, montable, enfim.
Então, a reutilização de informação em diversas plataformas.
Então, o universo de leta NL5, a historia básica de uma página no Nord, o Sala da Camila, vai obedecer as caminites desbols, com bloco de cabeça salho, fica com uma parte superior da página, um bloco de nota, de rodapê, onde generam outras informações do domínio, então, por exemplo, a função de onde você localiza o telefone, com interesse completa, faute comunicar, cedawus, um nétrubo, um tampo de fita, e de organizações, por exemplo, como o site de conteúdo, bastante conhecido, de um lado do Brasil.
Aqui, em geral, fica informações relacionadas a links, com o estúrreg de links que você tem na página, links para a própria página, e as informações, desenvolve seções dos artigos, do conteúdo, e divisa seções de artigos, então tem 3 específicas, para isso a gente vai tratar, nos próximos partos, e uma acessão, também que é bem parecida, com esses elementos, novos elementos, com o quadrilquia mais específico, que a site.
E fica mais fácil você desenvolver o quadrilquia da temer, uma vez que você tem a estrutura, bem definida de com a informação, que você quer, desejo colocar em qual bloco, então a estrutura tem um corpo base, que é o cabeçalho, as novas partes de roda P, e a parte que ainda fica uns links, e toda a parte relacionada ao conteúdo.
Então vamos, então, a gente vai utilizar uma uma, o que significa cada um das partes que eu apresentaria anteriormente, então o redder é o cabeçalho, que indica a introdução de um tema abordado na parte, então quanto mais no começo do código, ficar essa informação, mais relevante dos mecanismes de búsquios, então as informações que estão cunidas, no redder na parede da temer, que vão ser utilizados para os buscadores, para que tem informações naqueles sites, que vente produtos, como é que o buscador consegue indexar aqui, via mazena, e quando o usuário vai buscar uma influação muito site, como é se ele está na armazenada, no os datacentres do buscador.
A parte relacionada na, naqueles que é a bordo com uma série de links, desde que eles sejam blocos de negociação, principal, então, por exemplo, negocia primária do site, na vacinação seculdade, ou interna parte.
E o fúther pode ser utilizado dentro de uma tag, de sessão, de uma sessão do site também, ou de formes horólicos, como você me lembra, então, geralmente o fúther indica o final do contigo, no final da parte, que termina-me.
Analisando a página, por exemplo, curso do BEST, que é que o equivo fazer mais uma vez acessar a parte da tabda do Chrome, aqui estou mostrando o museiro, faz fox, deslobe o Chrome.
Como que eu code por trás de uma parte dessa, uma página dessa? É uma página simples, que está em HTML5, o sinal que você consegue verificar passando o link em cima do code, que eu vou mostrar agora, e identificar as sessões.
A ponto de BEST, ponto BR, então, digamos, é um subdomínio, logo é um subdomínio do domínio do universo, então, aqui fica toda a parte relacionada com a sessão conteúdo que está no raiz de cada um de BEST, no subdomínio do universo, para acessar a conteúdo relacionado a dados da nuvem, desbiotéicos, portal da luna, os HTML de trôme, o HTML e o álcool.
Então, veja, que eu tenho aqui, uma página, que é o som de simples, que tem alguns blocos de conteúdo.
Existe um comando, no caso do Chrome, a gente usa aqui o contrô, esquerda, chota, a gente vai ver, consegui navegar pelo código fonte dessa página.
É também interessante aprender o HTML, HTML5 também, no caso aqui, identificando como que alguns sites são construídos.
Então, eu recomendo vocês, avali, páginas, como é, são mais simples, tem menos conteúdo em HTML, então, digamos, é menos polvida, que a gente consegue ver as sessões.
Então, veja, quando eu passo mal, acima, consigo ver o que tem em cada conteúdo, em cada elemento, o conteúdo dele.
Veja, aqui o header, informação do header, a gente vai passar no modo, para cima, ele vai indicando, em outra coisa, então, o que tem a informação que eu tenho no header, então, eu tenho um elemento dívio, aqui a gente vai abordar isso daqui a pouco, depois, na classe, na parte principal, o que eu tenho dentro, a minha outra elemento dívio, então, veja, eu vou seccionando a página pro blocos, eu vou mostrando, a parte a parte, o que tem dentro de uma sessão, tanto dividindo, a página em sessões, dentro de uma sessão, uma outra divisão, que vou determinando, o tipo de tamanho, que está manho, que está escrito, escolhe se destino, destino, então, um bloco, que eu listo, alguns links, segundo bloco, enfim, veja, a facilidade, a gente entendeu o conteúdo, como o conteúdo é montado, e aqui, no meu caso, tem alguns elementos, para injetar código, para não negar temia, como pode, pode, já descrever, e, em caso, aqui, uma vez que essa sessão, de vende de tradução, a Web, e aí vocês vão aprender mais, de forma mais aprofundada, quando se implementa o desenvolvimento Web, mais adiante, né? Então, eu vejo aqui, consigo, seccionar a página, né? Veja que nessa página, por exemplo, eu havia comentado do FUTURE, né? Ela não tem elemento futeira aqui, né? Então, é o que eu vou ligar com essa sessão de ronda p aqui, uma parte que já pertence o domino, mas, para o outro lado, se eu futeira a sessão, o universo, só o universo, né? O Web, que eu vou lindificar, né? Então, é interessante você fazer sessão ao site e manter esta parte com código ao lado, né? Que uma vez que a informação é processado pelo Browser, essa parte do lado de retortizar, talvez que aqui já tenha uma nota de Vodap, onde está a V, aqui, eu vou procurar ele do lado, a gente vai me fazer muito mais conteúdo, muito mais divisão, né? Então, não seramente eu vou ter um elemento futeir, né? Mas o elemento que tem, vai ter merecinho, e uma coisa importante, que todo o código vai ter merecinho, né? Ele tem esse indicativo que está referência ao escalação do Octip, está em perda TME, está a escindir que é a parte, está escrito em perda TME, tem que ter merecinho.
Então, é o futeir, uma forma de desenvolver o conteúdo no modo API, mas é no meu obrigatório, é um caso que não tem, que evidi o futeir, ele está dentro do elemento bóri, né? E com os informações, por exemplo, aqui no caso, no USB, né? Formações universidades, a organização dela, a plataforma, a gente desculpa, tem um elemento futeir aqui, tá? Então, onde está o futeir, né? Então, se eu passar uma aula em cima aqui, tem essa parte em verde, né? E algumas informações, tá? Formações, por exemplo, de como que eu faço contar, a gente quantas vezes essa parte está sendo acessada, a educação para o link do Facebook, do Instagram, da universidade, e quem.
.
.
Então, pessoal, é muito importante de investigar isso, né? Então, é um outro.
Dá para entender e utilizar essa estrutura de desenvolvimento da página da universidade, para desenvolver seus próprios sites, tá? Então, eu vou ver como é que eu não vê esse estrutura de informação, como é uma página de universidade, mas pegando a ideia de como ela é estruturada, é possível, por exemplo, desenvolver um site, por exemplo, para a.
.
.
uma informação para a gente mais cola, né? Esse cola eu estou fazendo fonteiro, né, enfim, né? E algo mais, assim, digamos ser.
.
.
mais que é buscar, né? Por exemplo, uma página para postar informações de reales de produtos, enfim, né? Que eu não tenho uma interação com um banco de data, por exemplo, mas foi para a visualização, para um foto de carro, foto de brinquedos, para ir embora.
Ah, o conteúdo, e a fonte, o que ele vai ficar disponível, é definitivamente, é que tem a nova estrutura da primeira, tá? É uma sede, que ela faz referência ao conteúdo principal, que envolve, que envolve a parte, né? Como se.
.
.
É como se.
.
.
Na verdade, sim, faz referência ao conteúdo, né? Não é o conteúdo principal, mas faz referência a isso, tá? Faz referência aí, ele é disseminado com todo o principal, tá? É um contato dentro de um.
.
.
de um art, por exemplo, né? Pra ver a sede do art, ele faz referência a um assunto geral dele, então.
.
.
O próprio loga tem uma simples, se preocupou com isso, né? Então, quando eu.
.
.
uma sede está dentro do artigo, significa que eu estou fazendo referência ao assunto geral da par, não é o assunto exclusivo, né? Se tiver fora, ela é assinada ao conteúdo global do site, né? Então, ele pode estar dentro de uma.
.
.
uma barra.
.
.
lateral, por exemplo, tá? O artigo é um trat de uma área que define o conteúdo, principal da página, né? Se tiver uma composição de fomulares, por exemplo, né? Do artigo de notícia, né? Desde que seja um conteúdo, um conteúdo independente, tá? Então, quando você.
.
.
falar de algum conteúdo independente dentro da stroglobal do site, a gente usa a arte.
Tá? A sede só define uma sessão dentro de um determinado elemento, tá? Então, a sede só pode contar o próprio abessário, tá? Então, onde eu tenho o cabeçalho com a red? Da página principal, com a sede só o especifico, pra que ele.
.
.
pra que ela sessão, tá? Um fute, uma nova ordem de kit, isso necessário.
Não veja a questão semântica envolvida, né? Que eu posso ter uma informação específica dentro de uma sessão da página da TEMELE, não nela toda, né? Por exemplo, um indicador pode fazer referência a um metandado que tá para a espalha da sessão, tá? Não.
.
.
de todas as tede da TEMELE, tá? Pode ser utilizado na TEMELE, né? Pra separar notícia, ver, da gareza e de foto, tá? Então, aqui tem um exemplo de site, né? Que mostra os dissétimos, né? E isso tem também dentro do.
.
.
um tipo de curadelo de site, a diversa, a gente vai ver, tá? Aqui eu estou usando Firefox, com esses vocês podem usar o Chrome também, tá? E tal com a um do Compto Shift J.
Ok? Bom, qual diferencia entre o Article Sextion, tá? O Article deve conteúdo principal da página, tá? O Sextion pode ter qualquer tipo de conteúdo.
O Article pode ser combinado com o elemento, o Sextion, para formar a tação do conteúdo, tá? O Sextion é uma versão mais semântica, tá? Na dívida que a modra segue, tá? Que eu só posso fazer divisão dos conteúdos dentro de uma sessão dentro do Article, tá? O objetivo do Article é a grupal dos principais conteúdos da página, enquanto que o Sextion é marcar uma sessão da página, o grupo do conteúdo é o mesmo assunto.
Então, quando eu quero a grupal com o seu uso, o mesmo assunto é o Sextion, tá? Quando quero a grupal dos principais conteúdos e o uso, tá? Aqui um exemplo do uso de Article, né, dentro de uma sessão, tá? Vamos vocês podem voltar aqui, tá? Tá aqui, eu continuo usando Firefox, tá? Eu estou fazendo questão de mostrar algumas coisas no Firefox aqui, nos slide, e durante a explicação da aula algumas coisas emocionados ao Cop, tá? Aqui, usando o Procpside da Universo com uma referência, né? E tem o uso da dívida, né? Então, aqui, na Universo Ponder Bé e Barra Polo, né? Então, a divisão parte do conteúdo, né? Vendo dele com outras elementos, tá? Eu tenho outras tênis da TMA-5 com o LagerGlope, né? Que não tem detalhes aqui, pra voltar a sequestit, pros Lager1, assim, em Oriente Tamãe, local de vídeo, né? Em ser seu conteúdo multimídio, já apaixo, de forma mais sim segura, até de.
.
.
até de meio, né? Que define o conteúdo mais importante, eu sei que ele que tava sonando com o topo, central da página, que é a página faz referência ao quê, né? Então, o conteúdo com o topo, central, né? Um exemplo simples, envolve.
.
.
É sempre a gente utilizar o DocType na TMA-5, não com o mesmo, pra indicar aqui um braço, vai interpretar aquilo como se fosse na TMA-5, porque se não tiver na TMA-5, ele vai estar atado aqui com o HTML4, né? Por enquanto, o braço no Jatoise não tem que conformidade que os últimos versões da TMA-5, tá? Não é pra se precisar, porque tem que ser possível, né? Porque a medida que os braços vão ser do mais poderosos, né? Eles vão se atualizando em relação das linguagens de marcação, né? O que vai ser da maior que, basicamente, o DocType 4 vai ser mais permitido em função de toda a facilidade, né? O poder da primeira e assim, tá aqui, vai começando a.
.
.
você vai estar de utilizar, tá? Tem um exemplo aqui, em divisão, né? Com a tela da TMA-5, né? Com a red, né? A parte de metadados, né? Tito e próprio corpo aqui.
Bom, pra facilitar a comprei, eu vou deixar os links pra esses códigos, os exemplos que a gente.
.
.
vocês vão retreinar, né? Eu vou utilizar pra prender.
Com basta você clicar nesses links, né? E a partir dos slides, que o braço vai apresentar o documento no processado, tá? A gente clicar no camelho aqui, por exemplo, a gente vai ter acesso com um conteúdo que está junto com os slides, tá? Por exemplo, 2, 3, 4, 5, 6, 7, tá? Então, além de visualizar essas partes, o que você deve fazer pra prender, tá? Treinar o HTML, assim, tá? É abrir o documento com a exceção da TMA-5, e uns editores de texto ocorre, o seu perfil, isso não deixa a bordura do lado, um sublime, texte, ou um notipede mais mais, né? Visual Code, né? Fim temias do gredite, no links, ou no tipede, no.
.
.
Tá? Salvar o arquivo multiplicado e recarregá-lo no braço e vir o resultado, tá? Então, você pode fazer as modificações e salvar e recarregar isso no braço, tá? Você vai pegar esse código dos exemplos, né? No alceto, jogar, por exemplo, lá no site da W3-School, hoje também, tá? E vai fazer processos, tá? É só uma melhor maneira de aprender, você aprender a treinar, com a gente tem limitação temporal aqui, com o vídeo, tá? Então, eu deixo isso como exemplo, né? Não peixe pra vocês, tá? Então, de que você vai fazer as modificações? Você vai entender as nossas modificações, né? E aprendendo, fazendo nossas modificações, tá? Então, eu recomendo a.
.
.
A oletura de alguns pontos, né, do HTML5, né? E seguir a prática, tá? Um livro que está usando a presta de semana, né? Mesmo 14.
E, ao mesmo tempo, com o conteúdo de Imagina, né? No site do.
.
.
O site da SIGI, né? No W3-School, que é bastante interessante, com o TudoCelular do HTML5, tá? E o site.
.
.
Tenta treincê também, tá? Tenta de uma forma bastante interessante, com o YouTube HTML5, tá? O meu dia abordar nessa semana, fica a disposição dos outros vocês, em condações, novamente, de treinar em um material.
.
.
O treinar em.
.
.
na primeira primeira vez, inclusive, no material que eu disponibiliza aqui, fazendo a leitura do material base, mas, ele é de uma material complementar, de acordo com o conteúdo de TudoCelular, tá? Um abraço a todos, a gente vê nas semanças.