Webinar: HTML Semântico: Melhorando a Estrutura e o SEO do seu Site

olha muito boa tarde a toda a gente espero que esteja tudo bem convosco que a semana esteja a correr bem e agora primeira pergunta do dia conseguem ouvir bem ótimo ótimo ótimo então pois eh hoje vamos ter aqui um um webinário eu a semana passada a semana passada disse que o webinar ia ser curto eh e acabou por ter mais mais do que uma hora eh hoje vamos H vamos falar aqui de um tema eh que também a partir estaria a contar que fosse H que fosse curto eh mas eh tendo em conta que aconteceu

a semana passada Já nem digo nada eh mas mas vamos ver hoje vamos falar aqui sobre sobre html html semântico H vamos abordar aqui um bocado o o que é que é o HTML semântico o que que são as tags semânticas E também qual h o que é que podemos e o que é que isto eh O que é que isto melhora com a no nas nossas páginas web eh bem Já temos aqui uma pergunta eh Pedro Dias se vamos usar o editor de código neste webinar eh vou vou eh vou usar o editor de

código para vos mostrar no fim do webinar h no fim não é no fim do webinar antes do fim do webinar mostrar H um exemplo do HTML semântico e a mesma estrutura com HTML num semântico H é um é um webinar mais mais teórico do que do que prático na verdade hum e eh mes e mesmo assim pronto h eu há uns tempos dar webinar mais mais mais práticos agora comecei a dar uns webinares um bocado mais teóricos mas também o tem sío temo informação que acho que que é que é bastante relevante para para

vocês H posto isto vamos então avançar aqui temos o o menu o resumo o índice da nossa da nossa do nosso webinário hoje primeiro dar aqui uma pequena introdução o que que é o hml h hml semântico a sua H que o seu conceito H os benefícios do htl HTML semântico para para seo qual é que é aqui a importância hum melhorar aqui como melhorar a acessibilidade com HTML semântico a semana passada falamos de acessibilidade para quem esteve no no webinar anterior e eh depois vou mostrar uma estrutura do documento html semântico e a comparar

com o HTML não semântico pronto para para também se ver as diferenças apesar de vocês à partida alguns de vocês pelo menos já saberem a diferença e eu vou mostrar que é para para conseguirmos Para conseguirmos ver h aqui pelo meio eu vou Parando para para perguntar se ten questões como sempre e h e e depois no fim pronto também também darei um bocado para para vocês colocarem as questões finais se assim tiverem então começando hh vamos começar aqui pelo RL semântico pela definição e conceito do Gal semântico o que que é oal semântico hh

é digamos que uma abordagem eh que utiliza elementos específicos textos específicas para descrever o conteúdo de uma página Web H Ou seja faz com que hh o conteúdo da página esteja descrito de uma uma forma mais clara e eh e mais intuitiva ou seja em vez de usarmos elementos mais genéricos eh como uma div como como um span por exemplo H usamos tags eh tags apropriadas tags próprias eh que vocês já estão a vê-las na at na no no slide vou explicar cada uma delas eh e usamos tags que que definem o h que definem

que indicam o propósito do do conteúdo que está eh entre eh esta essas tags eh por exemplo ao ao utilizarmos uma teag fino calho hum o calho de uma secção já estamos a dizer que ali se encontra um título Ou uma ou uma introdução Eh Ou seja no fundo torna mais eh torna a página mais compreensível eh não só para os utilizadores eh mas também h para o os motores de pesquisa ou seja H E aqui já entra a parte so porque permite entender mais rapidamente qual é que é a estrutura e qual é que

é a hierarquia da informação eh e onde é que há e e e que qual é a informação que existe e onde é que ela está pronto H muito resumidamente é é muito é é muito por aqui h qual é que é a diferença aqui e entre entre asas duas tagas as tages semânticas eh São H são lá está como próprio nome indica são tem um significado Claro sobre o conteúdo que Elas têm eh sobre o contido que está entre delas eh por exemplo uma Tech que identifica uma um artigo ou seja uma uma Tech

tenha article uma tag article H identifica um artigo dentro num uma página ou seja sugere que ali há conteúdo que pode ser lido interpretado como uma peça independente ou seja como eh como uma notícia como um post de blog ou seja há ali conteúdo relevante para ler H na na nas tas não semânticas H US usamos os chamados os chamados containers H que neste caso até São São as divs Eh que que se usa usa-se mais para para agrupar elementos para agrupar e para para para os apresentar visualmente e para apresentar os os elementos visualmente

para para criar uma estrutura visual H mas sem indicar ao certo o que é que está ali dentro ou seja uma uma div no fundo pode ter uma frase e pode ter 10 blocos Isto pode ter só uma imagem e uma div pode ter pode ter qualquer coisa hum mas tá uma uma uma div é útil para a parte podemos usá-la para organização visual H mas não transmite nenhuma informação e sobre não não não indica a partida principalmente aos motores aos motores de pesquisa H Qual é que é o conteúdo que que tem que tem

nela que tem que tem dentro dela h e não só não só também para para a parte dos motores de pesquisa mas também para a parte dos leitores de ecrã na questão da acessibilidade porque um leitor de ecrã aou ou entrar dentro num uma tag article sabe que está a entrar numa numa num texto que é relevante e corresponde L está corresponde uma notícia um post log e que vai indicar isso mesmo H ao utilizador que está a utilizar à a redundância H aquele leitor de ecrã Pronto agora aqui passando um bocado para as definições

de cada um de cada um dos cada uma das tacks primeiro temos o o r h que é basicamente é usado para para indicar a secção do cabeçalho de uma página ou então de uma parte específica de um conteúdo H ou seja no cabalho de uma página se for no cabalho de página é onde É onde temos o temos o normalmente o logotipo do site temos o o título da página onde é porque maioria das vezes o logotipo até dá logo o nome da página também e E também temos o o menu pronto aquela aquela

zona aquela zona de cima ou nave por norma está inserido no no header em em pode ser utilizado em outras circunstâncias por exemplo na parte da das notícias do Expo blog H um cabeçalho pode indicar o o título do artigo e a data de publicação por exemplo e também Quem escreveu o artigo e é o cabeçalho é é o cabeçalho do do da secção onde onde estamos da secção ou então da da página pronto Depois temos o o article o article é eh Digamos que não há uma maneira fácil de escrever artical é é ideal

para conteúdos que são podem ser lidos independentemente do resto da página ou seja são autosuficientes e normalmente é utilizada também para artigos de Notícias Ok ou de blog H um exemplo o uma página uma página uma página de um blog por exemplo cada post é considerado um article ok cada post é considerado um article porque cada um dos posts tem o seu próprio título tem seu próprio conteúdo e tem os seus próprios comentários Eh Ou seja cada um deles cada um destes articos é independente pode ser lido eh H pode ser lido H podemos tirarlo

maneira mais fácil é podemos pcar nesse artical e tirá-lo da página e vamos continuar a ter um conteúdo que conseguimos lê-lo mesmo Mesmo estando ele fora da estrutura da página porque é um porque é um é um conteúdo independente ou seja neste caso seria um artigo de um blog eh também pode ser pode ser utilizado para por exemplo para para destacar conteúdos específicos republicados de outros de outros sites entrevistas e análises whatever e pode ser também utilizado para para isso e mas é basicamente uma secção independente que não depende do resto do não depende do

conteúdo do resto do site Depois temos o o o Nav a tegn que é usada para agrupar basicamente para agrupar links normalmente eh podemos usá-la como como menu mas também podemos usá-la como por exemplo uma barra lateral uma barra de navegação lateral pronto um exemplo muito fácil porma quando visitamos um uma loja online H temos eh temos panto temos uma barra de navegação em cima no no menu principal eh imaginemos temos temos temos tipo os de periféricos de de computadores por exemplo temos o h rá teclado monitores h e depois H ou seja a nave

vai vai ajar a identificar que que aquilo é uma é uma secção Onde estão links agrupadas eh não nos vai dizer que é o menu principal porque nós depois na parte da loja em si também podemos dizer que também podemos ter um menu lateral que são os filtros por exemplo e nesses filtros também podemos ter um um agrupamento de links ou seja também podemos ter outro nave nesse nesse nessa barra lateral pronto eh Pode ser aqui utilizado para várias situações H desde que haja um agrupamento de de links pronto Depois temos a parte da da

temos a a section a section é é basicamente ser para dividir a página e temos para dividir o conteúdo ajuda eh é para nos ajudar a organizar informação de forma de de forma mais h mais clara hh por exemplo uma página institucional de uma empresa H podemos ter uma secção que fala sobre serviços oferecidos temos outra que tem a equipa eh temos outra com testemunhos e e e temos outra com a com formulário pronto hh cada uma dessas partes é uma section porque são eh São secções distintas eh e e mas fazem todas parte do

conteúdo principal do site H Ou seja é basicamente como utilizamos normalmente as divs para dividir as secções dos Sites a aqui utilizamos as as sections basicamente é mesmo o aqui o nome é mesmo como o nome dison secções ha Depois temos o o Aide a tag Aide H tal como como diz e é é não é literalmente como o nome dist mas é um bocado é serve basicamente para conteúdos que complement um conteúdo principal da página mas que não são essenciais para a compreensão desta Eh Ou seja H por exemplo no artigo de blogo vamos

explicar nos blogos no nos artigos de blog outra vez temos uma uma caixa com uma caixa com a com uma biografia como acontece muitas vezes se formos aos jornais ou artigos científicos no fundo temos uma eh no fundo do artigo temos uma caixa com o Quem é o autor e por vezes tem uma pequena biografia certo h e h e essa essa biografia pode ser uma Side pode ser colocado no side e são são digamos são informações adicionais que ajudam a contextualizar o conteúdo principal H sem sem interromper o fluxo é basicamente uma Side note

uma nota uma nota e lateral traduzida à le h e Ou seja é uma é uma é um conteúdo que é útil ok que não que é útil nos vai ajudar é uma informação adicional mas que não interfere com a leitura do conteúdo principal basicamente é a explicação explicação mais fácil para para o questões estou a ver que já temos aqui uma do Pedro já respondo só beber um bocadinho de água e enquanto para ver se também há mais questões eh Pedro Sim podemos usar várias e várias sections no no mesmo documento sim sim lá

está as sections é cada fase tivemos serviços por exemplo lá está serviços e outra seção com a equipa outra secção com testemunhos outra seção com o formulário eh outra secção com os artigos de blog H são são várias sections da mesma na mesma página Ora bem se não há então aqui mais questões sobre aqui sobre o primeiro H sobre o primeiro diapositivo vamos aqui passar passar então ao segundo H Ora bem benefícios do M Pro para para o se H aqui o o HTML semântico eh ajuda muito os motores pesquisa pronto a compreenderem melhor o

conteúdo da página porque são tal como já tinha dito são tagos muito específicas que ajudam que dizem logo a partir do que é que está naquele o que qual é o conteúdo que está na naquela página naquela e na e naquela secção dentro daquela daquelas tags H ou seja o que vai acontecer a utilizamos estas tag mais apropriadas os motores de pesquisa vão vão conseguir identificar mais falsamente Qual é que é o conteúdo principal do do site e como é que ele como é que ele se relaciona com com os outros H com com o

restante conteúdo da página e e se é relevante e para para a pesquisa que ozor tá a fazer pronto H ou seja Isto vai permitir que os algoritmos de pesquisa H apresentem em respostas apresentem as páginas mais relevantes aos utilizadores h ou seja se se tivermos três sites com HTML semântico e três sites com HTML não semântico o que é que vai acontecer e o utilizador e tem Digamos que tem eh temos três tipos de três tipos de sites e e cada e cada um cada um dos temas tem um um um semântico e um

não semântico eh se formos ao Google e pesquisarmos o mesmo exatamente o mesmo eh o que nos vai aparecer Primeiro vai ser o o semântico Porque o Google consegue hh mais facilmente detetar o conteúdo desse e a organização da página panto vai ser sempre assim isso leva já aqui à parte do segundo tanto do segundo como do terceiro do terceiro ponto eh quanto que a utilizarmos hh utilizarmos estas estas tags vamos ter H vamos melhorar a experiência do utilizador e eh E além disso eh também Além disso também melor ar o o nosso se nós

tivermos um site e e e tivermos a calcular e as métricas como e o tempo permanência na página a taxa de cliques h o número da o número de páginas visitadas número de novos utilizadores Vamos ver que E se tivermos uma um site com um HTML semântico que que nos vai melhorar muito a a visibilidade do site e que todas estas métricas vão à partida irão aumentar porque vamos ter mais tráfico orgânico que é que resulta do do do se e e pronto acabei por basicamente falar aqui dos pontos todos ao esqueci de nada foi

mesmo dis acho mesmo cumprir a promessa de demorar menos de uma hora a fazer a dar a dar o webinar h não sei se tem se tem questões até agora Ah estou ver que não H pronto aqui falando do próximo ponto H melhorar a cessibilidade com gml semântico L está uma parte que é muito importante e H que é muito importante e que falamos na e que fal mais a fundo na na na semana na semana passada H aqui facilitar facilita a a navegação dos dos leitores da ecrã pronto ou seja o h o os

leitores da ecrã usam as t semânticas para para identificar e e anunciar as as secções h a quem está utilizar este tipo de softwares ou seja e vai permitir que os utilizadores naveguem mais f facilmente e pelo pelo site é que pronto é que mais questão do navegação com com o TB pronto isto também facilita muito a a navegação do de quem está a utilizar leitores da CR eh por exemplo ao marcar corretamente as secções de navegação cabeçal o conteúdo principal H ele vai permitir h vai vai permitir com que o utilizador consiga saltar de

secção em secção sem ter que ouvir H sem ter que ouvir todo o conteúdo da daquela secção ou seja consegue consegue perceber automaticamente o tipo de conteúdo que vai ter pronto aqui na parte de aqui conteúdo ao definirmos pronto a definirmos os uma hierarquia forma mais clara e ao termos uma organização mais mais coerente vamos conseguir vamos conseguir Digamos que eh facilitar facilitar também esta leitura H do de quem tem mais dificuldade ou seja por exemplo um cabeçalho principal um um header um menu principal seguido por por subsecções que estejam bem definidas e vai é

uma hierarquia lógica ou seja uma hierarquia que está bem montada e e Vai facilitar a compreensão de informação por parte Parte dessas pessoas que têm mais dificuldades e que estão usados positivos especiais para fazer a leitura da página ou então que atest estão a a fazer a navegação através do teclado Porque mesmo a fazer a a navegação através do teclado H vamos a organização da página vai influenciar no fluxo que vai ter o que vai ter o cursor seletor h quando carregamos no tab para para navegar e pela pela página pronto depois aqui a parte

doa do bom uso duas práticas do Main do Aide e do futa porque o Main é usado para identificar a parte central mais importante do conteúdo de uma página hum ou seja o o que vai permitir que os leitores de ecrã levem diretamente os utilizadores para a parte do conteúdo principal e melhorando tudo o que não importa h e h o aside pronto lá está ser para destacar conteúdos complementares H mas que a Hum mas que não é essencial a conteúdo principal e depois temos o footer que é utilizado para para a parte das informações

finais como os contactos os os direitos autoris os links de termos de condições política privacidade tudo o que é links adicionais h e isto aqui vai nos ajudar a criar uma estrutura mais lógica que facilita a navegação e a compreensão por parte de todos os utilizadores H inclusive lá está os os que os que utilizam as a tecnologias de assistência pronto chamamos assim tecnologias de assistência e h e e pronto e é este é muito é muito por aqui hum hbtv explicações bem Claras Obrigado eh Regina também pode ser considerada uma estratégia de manter o

código mais organizado e sim é assim à partida se seguirmos H uma uma HTML semântico se o seguirmos bem eh temos um conteúdo organizado agora lá está eh também é possível usar o termos um HTML semântico não que não esteja bem estruturado que não que não esteja claramente orientada e ou seja e pode ser considerada uma estratégia se for bem usada Nós também também conseguimos ter conteúdo bem estruturado e se sem sem HTML semântica lá está não é tão não é não é tão benéfico para a parte do se e Mas também eu conseguimos ter

na verdade eh lá está nós conseguimos conseguimos fazê-lo com todas as ferramentas mantê-lo mantê-lo H organizado temos é que é que saber usar as ferramentas para para o fazer Ah bem agora aqui eh mais questões H digam se tem mais questões a seg eu vou vos mostrar o código a seguir o código é um código simples HTML semântico e não semântico H digamos se tem mais questões OK já ver que não há não há nenhuma questão Então vou vos mostrar aqui o eh o código eh on o que é que temos aqui primeiro temos aqui

um um código est AD em em divs H que Como podemos ver temos as dives que identificam claramente Heather navigation que é o o menu temos uma div com a classe com classe Main content temos uma div com sidebar e uma div com classe footer pronto basicamente temos uma estrutura não semântica com divs em que cada uma das divs tá claramente identificada na sua classe qual é que é a sua função Qual é que aqui o problema é que os os leitores da principalmente não vão ler as classes para não V CL para tentar perceber

Qual é a estrutura da página pronto mas temos um header temos temos um cont principal temos uma Side e temos um foter temos a principal aqui está mal em termos de ção assim está bem [Música] e e temos principal Depois temos o conteúdo semântico provavelmente também está aqui mal estruturada exatamente assim está bem quer dizer já esteve melhor H em que só aqui um bocadinho OK assim está bem H Depois temos aqui o nosso o nosso HTML semântico em temos claramente um red Ok temos um menu de navegação temos um um grupo de de links

temos também a nossa a nossa section Ok o nosso a nossa secção principal e com o conteúdo relevante temos o o nosso Main e temos o nosso Main temos o exatamente temos o Main com a section dentro dentro deste Ok h e depois temos o aside que é basicamente lá está os link jut já uma formação complementar mas que não vai e não vai interferir com a leitura do conteúdo principal e temos o futa ou seja nós temos basicamente a mesma estrutura Ok eu vou pôr aqui os dois lado a lado temos basicamente a mesma

estrutura H mas eh temos aqui do lado esquerdo o o não semântico ou seja o nós nos vamos orientar com classes Mas qualquer e leitor de ecrã e e e mesmo os motores pesquisa não se vão saber orientar H através das classes não é Ou seja para eles o conteúdo acaba por ser todo igual eh a única coisa que o que os motores pesquis vam ler é que aqui está um H1 que será o título da página à partida aqui estão links Aqui está um H2 que será um subtítulo e aqui estão textos pronto é

o que o o o o a os motores pesquisa vão assumir eh aqui do lado direito temos o semântico que onde onde o os motores pesquisa vão saber que isto é um header e que isto é um título da página vão saber que isto é um grupo de link de de navegação vão saber que isto é uma secção principal e que dentro tem uma section com conteúdo relevante e vão saber que est que estes links úteis são umide Ou seja que é conteúdo complementar e vão saber que is aqui em baixo é um fter basicamente

é isto não é nada de complicado E além disso as TS são fáceis de curar porque é basicamente seguir a lógica é um header heer é um menu de navegação nave é o conteúdo principal é um Main eh temos uma secção nova é uma section temos com informação complementar é uma slide e temos um fter que é um footer eh e são tags fáceis de facílimas de de decorar h e e esta é basicamente a diferença entre o gel semântico e e não semântico em termos em termos visuais digamos assim H ou seja h Resumindo

eh E que tal Como o Pedro está está está está a comentar eh eh comentou eh ambos os os métodos estão corretos eh mas H lá está o HTML do semântico é mais eh Digamos que é mais benéfico em termos de em termos de se em termos de tráfego orgânico e também é mais benéfico eh perante a lei que é eh a obrigação de termos um site acessível para toda a gente h Ou seja no fundo nós acabamos e cada vez mais por ser obrigados a fazer um site com uma estrutura semântica Ok eh porque

tal como eu disse no webinar anterior e para quem não esteve e é já é é obrigatório por lei H termos sites e os nossos sites que que desenvolvemos seri acessíveis a toda a gente ou seja ser ser possível Navegar através de leitores de ecrã através de só com teclado h e e termos a facilidade de navegação mesmo com a mesmo com o rato pessoas que não conseguem ter um um controle tão Preciso como como outras Ou seja sim no fundo o HTML semântico é mais é mais aconselhável sim basicamente h e e e pronto

basicamente é isto eu não sei se TM questões eu sei que o eu sei que o eu sei que o webinar foi curto e mas eu às vezes até prefiro fazer foi o primeiro webinar curto que na verdade mas mas eu prefiro e de vez em quando dar-vos assim um webinar mais curto mas que seja informativo Ok eu prometo-vos que e depois vou dar e também mais webinar práticos mas eu acho que é importante tal como a acessibilidade a semana passada foi e acho que também é uma informação importante para para vocês e e pronto

mas foi ficaz obrigado lá está foi curto mas foi eficaz e é é o que importa eu prefiro isso do que estar aqui uma hora a falar e e não dizer nada H Regina prefiro semântico pessoalmente pronto lá está vai de vai de cada um mas Mas cada vez mais obrigatório fazermos em em hml semântico H Ok gostei porque conheci o conselho doal mas não como se fazia na na prática eh Pedro mais webinar JavaScript por favor OK H E por acaso por acaso não me lembro eu já tenho os c o calendário definido too

até ao fim do ano por acaso confesso que não me lembro se tenho lá algum Java JavaScript e mas também sou só eu a Dora Sara também também eh costuma dar webinares aliás também costuma dar né também dá webinars todas as semanas quase todas as semanas e e também costuma dar de mais de práticas até Hum ok pensei que fosse uma matéria complexa exige saber código porem qua Ok não Isto são são explicações que não são matérias quear que apesar de eu vos ter que mostrar código vocês não têm que saber do código ainda H

é mais estou vos a mostrar quais é que são as diferenças estou vos Vocês ficam a conhecer o código base e o código eh não semântico no fundo e o código semântico e eh e se ainda estão a começar a começar o curso já começam já sabem a diferença entre entre eles eh O que é sempre acaba por ser de certa manira um bocado mais benéfico do que se Se tiverem Se tiverem a acabar h e pronto posto isto agradeço a vossa presença h e h e pronto e espero por vocês no próximo webinar eh

que será só para acho que vai ser só mesmo para novembro já ha e pronto Obrigado dejos o resto do Bom Dia e e e um bom fim de semana o resto de uma boa semana aliás que ainda falta um dia e e e uma e um bom bom fim de semana obrigado