Aula 4,5 e 6

• HTML 5 semântico
• Títulos, Parágrafos,
quebras de linha e
comentários
• Tipos de Listas em HTML
O Professor : Lucas Pazito
 HTML Semântico

Actualmente o papel da linguagem HTML não é apenas

estruturar documentos para a web, mas também
descrever o significado do conteúdo presente nesses
documentos por meio de tags semânticas.
O HTML semântico tem como objetivo descrever o
significado do conteúdo presente em documentos
HTML, tornando-o mais claro tanto para programadores
quanto para browsers e outras engines que processam
essa informação.
HTML Semântico
 O elemento <header>

O <header> é utilizado para representar o cabeçalho de um

documento ou seção declarado no HTML. Nele podemos inserir
elementos de <h1> a <h6>, até elementos para representar
imagens, parágrafos ou mesmo listas de navegação.
Exemplo:

<header>
<h1>Título da página</h1>
<h2>Subtítulo da página</h2>
</header>
 O elemento <section>

O elemento <section> representa uma secção dentro de um

documento e geralmente contém um título, o qual é definido
por meio de um dos elementos entre <h1> e <h6>. Podemos
utilizar o <section>, por exemplo, para descrever as
seções/tópicos de um documento.

Por exemplo, a home de uma web site pode ser dividida em

diversas secções: introdução, destaque, novidades,
informação de contato e chamadas para conteúdo interno.
 O elemento <section> (Exemplo)

<section>
<h3>Seção 1 – Notícias de Ùltima Hora</h3>

<p>Disciplina de TLP fez um aluno Mudar de Curso</p>

</section>
 O elemento <article>

Utilizamos o elemento <article> quando precisamos

declarar um conteúdo que não precisa de outro para
fazer sentido em um documento HTML, por exemplo, um
artigo em um blog. É recomendado identificar
cada <article> com um título.
Exemplo de uso de <article>:
 O elemento <article> (Exemplo)

<article>
<h3>Disciplina de SEAC</h3>
<p> Calculos de Ip e Roteamento</p>
</article>
<article>
<h3>Disciplina de Matemática</h3>
<p> Cálculo de Limites, derivadas e Integrais </p>
</article>
 O elemento <Nav>

O elemento <nav> é utilizado quando precisamos

representar um agrupamento de links de navegação, que,
por sua vez, são criados com os elementos <ul>, <li> e <a>
Exemplo de uso de <nav>:
<nav>
<ul>
<li><a href=”#”>Minhas Fotos</a></li>
<li><a href=”#”>Notícias</a></li>
<li><a href=”#”>Informações </a></li>
<li><a href=”#”>Contactos</a></li>
</ul>
</nav>
 O elemento <aside>
O elemento <aside> é utilizado quando precisamos criar um
conteúdo de apoio/adicional ao conteúdo principal. Por exemplo, ao
falar de HTML semântico, podemos indicar ao leitor outros
conteúdos sobre a linguagem HTML como sugestão de leitura
complementar. <aside>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</aside>
 O elemento <main>
O elemento <main> especifica o conteúdo principal e,
consequentemente, de maior relevância dentro da página. Para ser
considerada bem construída, uma página deve apresentar apenas um
conteúdo principal.
<main>
<h2>Titulo</h2>
<p>Lorem ipsum d</p>
<article>
<h3>Subtítulo</h3>
<p>Duis aute irure dolo..</p>
</article>
</main>
 O elemento <footer>
O elemento <footer> representa um rodapé de um documento,
como a área presente no final de uma página web.
Normalmente é utilizado para descrever informações de
autoria, como nome e contato do autor, e data de criação do
conteúdo.

<footer>
<p>Escrito por Lucas Pazito</p>
<p>Publicado em 25/03/2017 </p>
</footer>
 Nota importante sobre o HTML Semântico

Semântica é o estudo do significado e interpretação de

palavras. Aplicando isso ao HTML, significa a melhor
compreensão do HTML para o computador.
Antes do HTML5, utilizava-se somente divs para dividir
conteúdos e classes para estilizar, sem contar com a
compreensão do próprio computador para “entender” o
HTML.
Isso dificultava que suas respostas fossem passadas para
buscas e leitores acessibilidade.
 Nota importante sobre o HTML Semântico

Hoje, com o HTML5, temos a opção de dividir melhor as tags.

E, utilizando o próprio HTML5 semântico, ficou ainda mais
simples a compreensão para o computador.
Além de facilitar a busca de forma orgânica e rankear sua
página em mecanismos de busca, o HTML semântico ajuda os
leitores de tela para deficientes visuais, facilitando seu
compreendimento.
Ele, também, deixa seu código mais limpo e mais compreensível,
tanto em organização como em facilidade de visualizar
uma tag específica só de passar o olho pela tela.
 Nota importante sobre o HTML Semântico

O Facto de eu usar HTML semântico nas minhas páginas,

não significa que o browser vai renderizar automaticamnete
como visto na figura inicial desta aula. Posicionamento dos
elementos dentro de uma página não é missão do HTML,
mas sim das CSS.
Dali o nome HTML semântico, pois estas tags só existem
para que os navegadores percebam o significado delas, e
facilite o processo de SEO (search engine Optimization)
 Títulos (Cabeçalhos)

Existem 6 tipos diferentes de títulos em html

classificados pelo tamanho da fonte e vão
desde <h1>até <h6> <h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

Navegadores automaticamente adicionam um espaço em branco antes

e depois dos títulos.
Use as tags <h1> até <h6> somente para títulos, jamais utilize-as
apenas para aumentar o tamanho da fonte ou deixar o texto em negrito!
 Parágrafos

A linguagem HTML não reconhece os caracteres de

quebra de linha dos editores de texto e, mesmo
que exista uma linha em branco no código fonte, os
clientes Web só reconhecem o início de um novo
parágrafo mediante à marcação apropriada. A tag
<p> é utilizada para definir o início de um novo
parágrafo, deixando uma linha em branco entre
este e o texto anterior.

<p>Isto é um parágrafo.</p>
 Linhas Horizontais em HTML

A marcação <hr> (horizontal row) insere uma linha

divisória na posição onde for colocado.

Atenção: esta tag não tem fechamento, ou

seja,não existe a marcação </hr>.
 Centralização de elementos em HTML

Para centralizar um cabeçalho, parágrafo ou imagem dentro da largura da

página, deve ser usada a tag <center> e </center> envolvendo o elemento a
ser centralizado.

Sintaxe:
<center> [Elementos a serem centralizados] </center>.
Esta tag está a entrar em desuso, razão pela qual alguns
navegadores riscam esta tag. Porque a missão do posicionemento
do texto não é do HTML mas sim das CSS conforme veremos mais
tarde.
 Outras Tags de Formatação de Texto

<b>texto em negrito</b>
<strong>texto importante </strong> (semântico)
<i>texto em itálico</i>
<em>texto com ênfase </em> (semântico)
<mark>texto marcado </mark> (semântico)
<small>texto pequeno </small> (semântico)
 Outras Tags de Formatação de Texto

<del>texto excluído </del> (semântico)

<s>texto riscado</s>

<ins>texto inserido</ins> (semântico)

<u>texto sublinhado</u>
texto com _{esta parte aqui subscrito}
texto com ^{esta parte aqui sobrescrito}
 Comentários em HTML5
Um comentário nada mais é que uma informação
digitada dentro do seu código fonte que não altera
nada no código.
Portanto, o comentário também não é renderizado e
nem compilado. Dessa forma, os comentários HTML
ficam visíveis apenas para desenvolvedores através do
código fonte.
 Comentários em HTML5 (Vantagens)
Fazer um comentário dentro de um código permite que o
desenvolvedor possa deixar registradas algumas informações
importantes.
Este é um recurso muito útil, principalmente quando se
trabalha em equipes de desenvolvimento, onde outras
pessoas precisarão entender e utilizar o código fonte.
 Comentários em HTML5
Para incluir um comentário em um código HTML, é muito
simples:
Inicia-se o comentário com <!– e finaliza-se com –>.
Ao fazer isso, tudo que estiver contido dentro das tags de
comentário serão visiveis apenas no código fonte. Portanto,
não afetará em nada na renderização da página.

<!- Atenção: Isto é um comentário ->

 Listas em HTML5
Uma forma muito conveniente de estruturar
um documento HTML é a utilização de
listas.
As listas podem funcionar como um sumário, um
menu ou um resumo do conteúdo do documento
e são excelentes para serem usadas como ponto
de partida ao acesso de outras partes do
documento.
 Listas em HTML5
As listas são muito importantes quando
queremos listar alguns itens no site e também
para a criação de menu de navegação. Em
HTML5 existem 3 tipos de Listas:
1- Listas Ordenadas
2-Listas Desordenadas
3- Listas de Definições
 Listas Ordenadas
Nas listas ordenadas, os itens serão as ordenados,
como o próprio nome já diz, e listados de forma
ordenada, seja por número, letra, ou algarismos
romanos.
Uma lista ordenada começa com a tag <ol> e seus
respectivos itens da lista ficam dentro da tag
<li>.Por padrão as listas ordenadas são
ordenadas por números, mas também iremos ver
como ordena-la por outros métodos.
 Listas Ordenadas - Exemplo
<html>
<head>
<title>Listas em HTML</title>
</head>

<body>
<ol>
<li>Nome</li>
<li>Telefone</li>
<li>Endereço</li>
<li>País</li>
</ol>
</body>
</html>
 Listas Ordenadas(Outros Tipos de
Ordenação)
Como já foi dito, Também podemos ordenar por ordem
alfabética (a,b,c,d) e também por numeração romana
(I,II,III,IV)
Para isto basta colocar um atributo na tag <ol> da
seguinte formas:
1- Alfabética
<ol type = “a”>
</ol>
2- Romana
<ol type = “I”>
</ol>
 Listas Não Ordenadas
Listas não ordenadas são iniciadas com a tag
<ul> e são representadas por pequenos
“bullets”. Os Bullets podem ser de 3 tipos
diferentes:
1- Disco <ul type = “disc”>
2- Circulo <ul type= “circle>
3-Quadrado <ul type=“square”>
 Listas Não Ordenadas - Exemplo
<html>
<head>
<title>Listas em HTML</title>
</head>

<body>
<ul>
<li>Nome</li>
<li>Telefone</li>
<li>Casa</li>
<li>Província</li>
</ul>
</body>
</html>
 Listas de Definição ou Descrição

Listas de definição são constituidas de

duas partes: um termo e uma descrição.
Para codificar uma lista de definição são
necessários três elementos HTML:
1-Um container <dl>
2-Um termo de definição <dt>
3-Uma descrição <dd>.
 Listas de Definição - Exemplo
<dl>
<dt>Sapo</dt>
<dd>Criatura verde e pegajosa</dd>
<dt>Coelho</dt>
<dd>Criatura quente e fofa</dd>
</dl>
 Listas de Definição - Exemplo
Nota: Podemos usar Vários <dt> e <dd> numa lista de definição

<dl>
<dt>Arriscar</dt>
<dd>Tentar a Sorte</dd>
<dd>Colocar a vida em Risco</dd>
</dl>
<dl>
<dt>Cor</dt>
<dt>Colorido</dt>
<dd>Qualquer tom que não seja preto ou branco</dd>
</dl>