Aula 03 - Elementos Semânticos
Apresenta os elementos HTML responsáveis por definir a semântica de um documento
Exemplos de aula
Estruturando a Página
Cabeçalho (header)
Geralmente, uma faixa grande na parte superior com um cabeçalho, logotipo e talvez um slogan. Isso geralmente permanece o mesmo de uma página para outra.
Barra de Navegação (nav)
Links para as principais seções do site; geralmente representado por botões, links ou guias de menu. Como o cabeçalho, esse conteúdo geralmente permanece consistente de uma página da Web para outra - uma navegação inconsistente no seu site levará apenas a usuários confusos e frustrados.
Conteúdo Principal (main)
Uma grande área no centro que contém a maior parte do conteúdo exclusivo de uma determinada página da web, por exemplo, o vídeo que você deseja assistir, a história principal que está lendo, o mapa que deseja visualizar ou as manchetes, etc. Essa é a parte do site que definitivamente varia de uma página para outra.
Barra Lateral (aside)
Algumas informações periféricas, links, citações, anúncios etc. Geralmente, isso é contextual ao conteúdo do conteúdo principal (por exemplo, em uma página de artigo de notícias, a barra lateral pode conter a biografia do autor ou links para artigos relacionados), mas existe também existem casos em que você encontrará alguns elementos recorrentes, como um sistema de navegação secundário.
Rodapé (footer)
Uma faixa na parte inferior da página que geralmente contém letras pequenas, avisos de direitos autorais ou informações de contato. É um local para colocar informações comuns (como o cabeçalho), mas geralmente essas informações não são críticas ou secundárias ao próprio site. Às vezes, o rodapé também é usado para fins de SEO, fornecendo links para acesso rápido a conteúdos populares.
A construção de um site web exige planejamento, afinal, é necessário conhecer todos os elementos que devem compor as páginas antes de estruturá-los em HTML.
Existem diversas formas diferentes de fazer isso. Abaixo seguem alguns passos que podem ser seguidos para realizar o planejamento e construção de um site web:
- Inicie listando os elementos comuns que você deve ter em todas as páginas, como um menu de navegação e um rodapé. A definição do layout deve levar em consideração o propósito do site. É interessante realizar pesquisas para coletar ideias para a posterior implementação (Exemplo).
- Em seguida, esboce um desenho da estrutura contendo os principais elementos de cada página
- Realize um brainstorm de todo conteúdo que deverá ser oferecido pelo website. Anote tudo em uma grande lista
- Selecione os elementos do passo anterior e agrupe os similares.
- Esquematize as ligações entre os elementos do site. Se possível, insira notas sobre como cada elemento deverá ser apresentado.
- Inicie a construção de cada página realizando a divisão de cada seção em separado, com seus devidos elementos semânticos.
Elementos Semânticos
<main>body<article><section><aside><header><nav><footer><div><span><br><hr>Nenhum desses elementos deve ser utilizado com finalidade estética, apesar de serem cruciais para a estilização posterior em CSS. Elementos como o br ehr, que produzem saídas visuais devem ser condicionados primeiramente à organização semântica de um documento.
Metadados
O segundo nível da árvore de um documento HTML apresenta os elementos principaishead ebody. Ao contrário do último, o conteúdo do elemento head não é apresentado na página. Ao invés disso, este cabeçalho (não deve ser confundido com oheader) contém dados sobre o próprio documento (também chamados de metadados).
Para inserir metadados em uma página html, vamos utilizar os seguintes elementos, que serão inseridos dentro do escopo de head:
titlemetalinkscript
Um dos metadados mais importantes do documento é seu título, inserido através do elementotitle. Ele deve representar o documento como um todo e não apenas o conteúdo. Ex.:
<head>
<title>Home | Site</title>
</head>
Não existe um formato único para representar o título de uma página, mas ele geralmente é representado pelo local atual + nome do site, separados por um caracter especial como/ou -
O elemento meta é um elemento vazio responsável por especificar de maneira "oficial" os metadados de um documento.
Especificando a codificação
<head>
<meta charset="utf-8">
</head>
A especificação da codificação de um documento tem como objetivo informar o cliente (navegador) qual foi o conjunto de regras usado na especificação de caracteres. A codificação utf-8é considerada universal que inclui a maioria dos caracteres usados em qualquer língua humana. Isso significa que é uma boa ideia informar essa codificação em cada uma das páginas HTML.
ISO-8859-1. Caso não seja possível mudar a codificação para utf-8, é necessário declarar a codificação correta no elemento meta.Inserindo autor e descrição
O elemento meta contém dois atributos que permitem adicionar o nome do autor e a descrição do conteúdo da página. São eles os atributos name e content.
<head>
<meta name="author" content="Ramon Venson">
<meta name="description" content="Conteúdo da terceira aula da
disciplina de Programação para a Web I - UNESC, 2020.1">
</head>
A definição do autor permite que sistemas de gerenciamento de conteúdo possam identificar e organizar o conteúdo de um website, assim como a descrição, que ainda pode ser utilizada de maneira a potencializar as pesquisas realizadas em motores de busca. Ver mais sobre Search Engine Optimization (SEO)
Especificando a língua primária do documento
Uma exceção no uso do elemento meta está na definir a língua principal de uma página, que é feita diretamente como um atributo no elemento raiz html.
<html lang="en-US">
A definição desse dado é importante para ajudar motores de busca, leitores de tela e gerenciadores de conteúdo a classificar e interpretar os dados de uma página corretamente.
Metadados personalizados
Por conter atributos como name, property e content, que permitem a definição de novos tipos de metadados, podemos encontrar com facilidade atributos que são criações proprietárias/pessoais (você também pode criar novos metadados) para uso exclusivo de determinados sites.
Um destes exemplos é o Open Graph Data, um protocolo de metadados desenvolvido pelo facebook para permitir um conjunto mais rico de informações sobre sites web:
<meta property="og:image" content="https://venson.net.br/img/profile.png">
<meta property="og:description" content="Repositório de aulas do professor Ramon Venson.">
<meta property="og:title" content="Aulas - Ramon Venson">
A definição desse dado é importante para ajudar motores de busca, leitores de tela e gerenciadores de conteúdo a classificar e interpretar os dados de uma página corretamente.
O elemento link é geralmente responsável por fornecer relacionamentos com outros arquivos (não confundir com links).
Especificando um ícone
A definição do ícone da página é realizada referenciando uma imagem na mesma pasta do projeto. Esta imagem por padrão deve estar no formato .ico, porém qualquer navegador atual deve suportar também os formatos .png e .gif
<link rel="icon" href="favicon.ico" type="image/x-icon">
Este ícone é tradicionalmente utilizado pelo navegador para ilustrar a barra de título da página, assim como pode ser utilizado também para identificar coleção de páginas.
Referenciando CSS
Também utilizaremos o elemento link para fornecer a localização de uma folha de estilos CSS. Isso faz com que o conteúdo dessa folha de estilos (que é um arquivo dentro do projeto) seja automaticamente aplicado sobre a estrutura do HTML pelo navegador.
O elemento script tem como finalidade incorporar ao documento HTML o código fonte javascript a ser executado pelo navegador. Isso é possível de fazer de duas formas, a primeira referenciando o arquivo através do atributo src:
<script src="meu_codigo.js"></script>
E a segunda opção implementando o código diretamente no escopo do elemento:
<script>
console.log("Olá mundo!")
</script>
Repare que em ambos os casos o elemento script não é um elemento vazio, exigindo que seja corretamente aberto e fechado.
<link rel="stylesheet" href="meu_css.css">
Descritores
Em determinados textos, pode surgir a necessidade de marcar uma determinada palavra-chave. Principalmente em textos introdutórios que tem como objetivo descrever um produto ou tema. Dessa forma, podemos utilizar o elemento dfn, como no exemplo abaixo:
<p><dfn>Firefox</dfn> é um navegador criado pela Mozilla Foundation.</p>
Também é possível fazer o mesmo para abreviações. Neste caso, usamos também o elementoabbr:
<p><dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
is a description language used to structure documents on the web.</p>
Repare que estes elementos apenas dão semântica ao texto e palava-chave, facilitando motores de busca e gerenciadores de conteúdo.
Uma forma de criar listas com descrições (muito útil para glossários) é através dos elementosdl, dt e dd. Estes elementos devem ser aninhados como no exemplo abaixo:
<dl>
<dt>Firefox</dt>
<dd>Navegador da Mozilla Foundation</dd>
<dt>Chrome</dt>
<dd>Navegador da Google</dd>
<dt>Edge</dt>
<dd>Navegador da Microsoft</dd>
</dl>
Repare as funções de cada um dos elementos:
dlencapsula todos os elementos da listadtdefine uma nova entrada na listadddescreve o elemento e deve estar logo abaixo (e não dentro) do elementodt
Em alguns casos, também é útil definir um título um determinado elemento usando o atributo title
<a title="Uma linguagem de marcação">HTML</a>
Mão na Massa
Usando esta página como como referência, modifique seu código fonte, sem alterar seu conteúdo, de forma que a página possa ser devidamente lida por leitores de tela. Remova os elementos indesejados e providencie a melhor estruturação possível usando dos elementos que você já conhece (h1, p, meta).
Não esqueça que você deve observar o código fonte, e para isso pode extraí-lo através das ferramentas do navegador.
OBS.: Na correção da página, também substitua a palavra Bad no título por Good =)
Utilize esse arquivo como referência: Projeto
Alguém resolveu utilizar apenas o elemento div para organizar as seções da página web deste exercício. Modifique os elementos para adicionar semântica ao site e colaborar pra fazer da web um lugar com mais sentido =)
Repare que o documento HTML do pacote já possui o CSS adequado, que será aplicado com a mudança dos elementos semânticos no index.html
Após realizar todas as alterações, empacote a pasta toda e envie ao professor.
Exercícios Complementares
Crie a estrutura para um site de viagens. Antes de implementar o modelo em HTML, esboce os elementos do seu site em um papel, realizando o planejamento a partir dos seguintes itens:
- O site deverá conter pelo menos um cabeçalho, um menu de navegação, uma area principal e um rodapé
- A área de navegação deve conter pelo menos 3 seções (não é necessário implementar todas)
- Esboce em um arquivo de texto ou papel:
- Quais serão as seções básicas da página (header, main, footer...)
- Qual as páginas deverão estar no menu de navegação
- Esboço do layout base
- Lista contendo as ligações entre os elementos do site