Elementos Semanticos em HTML

Tema 3: HTML
A Professora: Delfina Silva!

Sucesso é o acúmulo de pequenos esforços, repetidos
dia e noite.
Óptima Reflexão,
queridos estudantes! “Robert Collier”
A Professora: Delfina Silva.

Objectivos
Conhecer os elementos semânticos.
Classificar os diferentes elementos Semânticos.

SUMÁRIO
3.2- Elementos semânticos;
3.2.1- Principais elementos semânticos;
3.1.2-Principais elementos do HTML.

3.2 – Elementos semânticos. 5
Em 2014, o consórcio W3C anunciou a publicação do HTML5
como uma recomendação. Este passo foi importante para a evolução
da construção do padrão, já que este não tinha uma grande
actualização há mais de 10 anos. Até à versão 4 do HTML, os
programadores estruturavam o conteúdo de uma página HTML através
de vários elementos <div> com o atributo id a servir para identificar o
tipo de conteúdo do elemento. O elemento div não fornecia qualquer
significado e dificultava a extracção de informação de forma inteligente.
23/10/2023 Instituto de Telecomunicações | Bairro dos CTTs, Km7 – Luanda/Angola | Tel.: 940747200 | E-mail: itel.geral@gmail.com | www.itel.gov.ao
3.2 – Elementos semânticos. 6
Com a nova versão 5, a equipa que a projectou pretendeu
enriquecer o papel do HTML, não apenas para estruturar
documentos para a Web, mas também para descrever o
significado do conteúdo desses documentos por intermédio de
tags semânticas. Nesse sentido, o HTML semântico tem como
objectivo descrever o significado do conteúdo para browsers e
outros softwares que processam automaticamente essa
informação.
23 /10/2023 Instituto de Telecomunicações | Bairro dos CTTs, Km7 – Luanda/Angola | Tel.: 940747200 | E-mail: itel.geral@gmail.com | www.itel.gov.ao
3.2.1- Principais elementos semânticos 7
A imagem abaixo exibe os principais elementos semânticos
introduzidos pelo HTML5:
Segue-se a descrição dos elementos semânticos:
• <header> - representa o cabeçalho de um documento ou de uma

secção declarados no HTML. Nele podem ser inseridos elementos
<h1> a <h6>, ou outros, para representar imagens, parágrafos e
listas de navegação;
• <nav> - representa um agrupamento de links de navegação que, por

sua vez, são criados com os elementos <ul>, <li> e <a>;
• <section> - representa uma secção dentro de um documento e

contém geralmente, um título, definido por meio de um dos
elementos entre <h1> a <h6>. Podemos escrever este elemento;
para, por exemplo, descrever as secções/tópicos de um documento;
• <article> - define um artigo, um conteúdo independente e

autocontido (p.ex., um artigo de blog). É recomendada a
identificação de cada <article> com um título;
• <aside> - define um conteúdo de apoio adicional ao conteúdo

principal;
• <footer> - representa um rodapé de um documento, como a área

presente no final da página Web. É utilizado, geralmente, para
descrever informações de autoria, como nome e contacto do autor
de criação do contúdo.
Em seguida, apresenta-se um exemplo
1.2-Modelo que exibe um conjunto de
Cliente-Servidor
cursos associados a determinadas linguagens de programação. A
lógica é usar tags semânticas para estruturar o conteúdo da página.
Neste caso, temos uma página de cursos que contém um cabeçalho,
um corpo (dividido em secções) e um rodapé:
<body>
<header>
<h1>Cursos de programação</h1>
<header>
<section>
<h2>JavaScript</h2>
<article>
<h3>Curso de Frontend</h3>
<p>Neste curso o estudante aprende
a…</p>
</article>
<article>
<h3>Curso de web tooling</h3>
<p>Neste curso o estudante aprende
a…</p>
</article>
</section>
<section>
23/10/2023Instituto de Telecomunicações | Bairro dos CTTs, Km7 – Luanda/Angola | Tel.: 940747200 | E-mail: itel.geral@gmail.com | www.itel.gov.ao
<h2>Java</h2>
<article>
<h3>Curso de Hibernate</h3>
<p>Neste curso o estudante aprende a…</p>
</article>
<article>
<h3>Curso de Jersey</h3>
<p>Neste curso o estudante aprende a…</p
</article>
</section>
<footer>
<p>Delfina Silva. Todos os direitos reservados<p>
</footer>
</body>
O resultado HTTP.
final é apresentado em baixo:
OBS: Lembre-se HTTP.
sempre de que quando escrevemos uma página
Web estamos a preparar um conteúdo que será consumido por
diferentes “clientes”, entre os quais outros programadores, browsers,
algoritmos de indexação de motores de busca e, até mesmo,
ferramentas de mineração de texto. Portanto, ao escrever código
HTML, preocupe-se também com a semântica dos elementos que nele
existem. O uso correcto de elementos semânticos é fundamental para
a construção de páginas Web modernas e fáceis de compreender e
manter.
Tarefa. 16
1 Copiar a matéria do slide para o caderno;
2 Melhore a página web das aventuras do Doggo, usando elementos semânticos.
Para Reflexão!!! 17
Informações Extras. 18
OBSERVAÇÕES:
Para além dos conteúdos referenciados nesta apresentação, existem outros

conteúdos consideráveis e úteis, que podem ser conhecidos consultando os
endereços abaixo descriminados!
Consultar:
• https://developer.mozilla.org/pt-BR/docs/Glossary/Semantics
• https://www.w3schools.com/html/html5_semantic_elements.asp
Email: delfina.silva@itel.gov.ao

Elementos Semanticos em HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Elementos Semanticos em HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Tema 3: HTML

A Professora: Delfina Silva!

A Professora: Delfina Silva.

Conhecer os elementos semânticos.

Classificar os diferentes elementos Semânticos.

3.2- Elementos semânticos;

3.2.1- Principais elementos semânticos;

3.1.2-Principais elementos do HTML.

• <header> - representa o cabeçalho de um documento ou de uma

• <nav> - representa um agrupamento de links de navegação que, por

• <section> - representa uma secção dentro de um documento e

• <article> - define um artigo, um conteúdo independente e

• <aside> - define um conteúdo de apoio adicional ao conteúdo

• <footer> - representa um rodapé de um documento, como a área

Para além dos conteúdos referenciados nesta apresentação, existem outros

Você também pode gostar