Página somente HTML
Este é um exemplo de página usando só HTML, ou melhor, somente HTML dentro dos padrões. Confesso que foi uma surpresa mas provavelmente não resta mais nenhum estilo no HTML como mudar uma cor, uma fonte ou dar um espaçamento ou alinhamento, ou a tag está descontinuada, ou seu uso é desaconselhado pelo W3C, ou simplesmente é usada fora de seu contexto pra fazer gambiarra. Hoje, falou em estilo recomenda-se só CSS.
Se isso é ruim? claro que não! ao contrário, as funções de ambas as tecnologias estão mais bem definidas do que nunca, além do mais foi uma aula de HTML construir essa página. Portanto a ideia aqui não foi construir uma página bonita e cheia de estilo simulando CSS com HTML a todo custo, o objetivo foi construir uma página explorando bem os recursos semânticos do HTML, usando tags com a finalidade que foram criadas (algo que parece trivial mas não é) e em um local que faça sentido o seu uso.
HyperText Markup Language
Criado em 1991, inicialmente o HTML foi projetado pra interligar instituições de pesquisa divulgando e compartilhando documentos com facilidade. E é disso que se trata uma página somente com HTML, transmitir uma mensagem de maneira eficiente, direta, acessível e, por que não, responsiva.
- Eficiente: O site é leve e carrega rápido. Já contando com as imagens esse site tem só 43KB, leva cerca de 1 segundo pra carregar numa internet ADSL do arco da velha como o "turbo 300" (300Kbps) da finada Brasil Telecom.
- Direta: O site é praticamente texto, é preto no branco, sem distrações, popups saltando na frente do texto, overflows, loadings ou clickbaits. É como ler um documento impresso mesmo.
- Acessível: O site funciona em todos os navegadores que suportam HTML5 e não exige uma internet rápida. Tem a mesma aparência em todos os navegadores.
- Responsiva: Experimente redimencionar a janela do browser, a página cabe em todas as telas, da TV de
88 polegadas292 polegadas ao smartphone de 2.45 polegadas.
Naturalmente a página não tem a beleza e as funcionalidades das de streaming de vídeos por exemplo mas veja que pra fazer um site funcional, simples e direto só HTML
já dá conta do recado. Na medida que se aprende mais sobre HTML é normal se deparar com um assunto: a importância de se utilizar a semântica HTML.
De acordo com o W3C: Uma Web semântica permite que os dados sejam compartilhados e reutilizados em aplicativos, empresas e comunidades.
Esse assunto
significa utilizar corretamente os elementos HTML, cada qual com seu propósito, o máximo que for possível. Muito além de div e span o uso adequado das
marcações facilita o desenvolvimento e manutenção do site, melhora a adaptação ao responsivo e contribui para SEO
(otimização para mecanismos de busca). Além, é claro, de tornar a página mais acessível, pois elementos semânticos trazem informações adicionais a leitores de tela
para deficientes visuais e outras ferramentas, facilitando a navegação no site.
Acessibilidade
Podemos nos perguntar porque HTML semântico é tão importante. Afinal, é possível usar uma combinação de CSS e JavaScript pra fazer com que qualquer elemento HTML se comporte da forma que quisermos. Por exemplo, um botão para dar play em um vídeo de um site pode ser criado dessa forma:
<div> Play vídeo </div>
Porém faz muito mais sentido utilizar o elemento correto para essa finalidade:
<button> Play vídeo </button>
Veja bem, o elemento button já é embutido com padrões de acessibilidade pelo teclado — botões podem ser navegados através da tecla tab do teclado, e ativados utilizando a tecla Enter / Return. Além disso como já foi dito o código também fica mais legível pra seres humanos e escrever códigos que fiquem legíveis para outros programadores é mandatório quando se trabalha em equipe. A seguir alguns exemplos simples de semântica boa x ruim, a renderização de ambos os códigos são muito parecidos ou até idênticos mas pra quem for ler o código, seja algoritmo ou humano, isso faz diferença.
Exemplos
Clique nos itens para saber mais:
Devemos fazer títulos com as tags próprias para isso, ou seja, as tags de cabeçalho h1 a h6 e não fazê-los com tags como span
ou p com font-size aumentado.
Semântica boa:
<h1> Meu título </h1>
Semântica ruim:
<p style="font-size:2em; font-weight:900;"> Meu título </p>
Devemos colocar parágrafos com a tag p e não ficar colocando texto diretamente, sem tags e pulando as linhas com br duplo.
Semântica boa:
<p>Esse é o primeiro parágrafo do meu documento.</p>
<p>Esse é o segundo parágrafo do meu documento.</p>
Semântica ruim:
Esse é o primeiro parágrafo do meu documento. <br><br> Esse é o segundo parágrafo do meu documento. <br><br>
Devemos criar listas ordenadas com a tag ol e listas não ordenadas com ul e não criar listas “na unha” digitando a numeração manualmente.
Semântica boa:
<ol><li>primeiro item</li> <li>segundo item</li> <li>terceiro item da lista ordenada</li></ol>
Semântica ruim:
1. primeiro item <br> 2. segundo item <br> 3. terceiro item da lista ordenada <br><br>
SEO - Otimização para motores de busca
O sonho de todo negócio no ambiente online é ter o site em primeiro lugar nos sites de busca. Essa é uma conquista muito importante, mas que não acontece da noite para o dia. Só para deixar claro, há mais de 200 fatores de ranqueamento para definir a posição dos links nos resultados do Google, o motor de busca mais utilizado do mundo. Os fatores vão desde otimizações dentro da página (como o HTML com boa semântica) até assuntos mais técnicos, como velocidade do site e segurança. SEO é um conjunto de técnicas que têm como objetivo posicionar uma ou mais páginas web entre os melhores resultados dos motores de pesquisa.
No que se refere a HTML podemos citar mais uma vez o uso correto das tags de cabeçalho, o uso de texto alternativo na tag de imagem e o uso de alguns tipos de metadados com a tag meta.
No caso das tags de cabeçalho, pode-se entender que existe uma escala de 1 a 6 (h1 a h6), onde a h1 predomina sobre as demais por representar o título principal, afinal, todo texto tem ao menos 1 título. As demais tags são utilizadas de acordo com os subtítulos inseridos, sendo assim, a h1 deve ser vista como a mais importante e a h6 a menos importante. Portanto, tanto do ponto de vista SEO quanto de qualquer outro, desrespeitar essa hierarquia utilizando-se, por exemplo, de um título em h3 e um subtítulo em h1, a estrutura ficaria no mínimo estranha e confusa, comprometendo o rankeamento do site nos resultados dos buscadores e, sobretudo, o entendimento de seus leitores em relação ao texto.
Os buscadores ainda não consegue interpretar o conteúdo de uma imagem a busca por elas só é possível através da parte escrita do elemento de imagem, é a parte escrita que exerce a função de fornecer uma descrição sobre as imagens de modo que os algoritmos dos buscadores consigam reconhecê-las. Isso é feito principalmente através do atributo alt da tag img. Por exemplo, se temos uma imagem nomeada como DSC281142.png, ao invés de deixar o atributo alt vazio podemos colocá-lo como “urso pardo caçando peixes”, isso permite que a imagem seja encontrada na pesquisa de imagens.
As tags meta são elementos HTML onde podemos descrever o conteúdo da página para os mecanismos de busca. Podemos fornecer informações como uma breve descrição acerca do conteúdo da página, palavras-chave, autor da página, formato de codificação dos caracteres utilizados no documento, etc.