HTML básico para estudantes de TI

Geralmente a primeira aula de HTML não condiz às expectativas dos estudantes, que empolgados com a possibilidade de enfiar mais uma página colorida cheia de animações em um endereço web, terminam o dia com uma página branca de "hello word", como uma versão mais complicada de simplesmente escrever essas palavras em um Word ou google docs.

HTML é a sigla pra Hipertext Markup Language, e geralmente a introdução à linguagem foca nas características de Markup mais do que as de Hipertext. O conceito de marcação costuma ser interpretado como "demarcar áreas de conteúdo pra estilização de CSS", o que na melhor das hipóteses é meia verdade.

Quando você é autor de trabalhos escritos, mesmo que não esteja seguindo ABNT, seu trabalho provavelmente tem uma capa, um título, cabeçalhos com o título do capítulo, seções com conteúdo agrupado, textos de título, subtítulo, corpo e anotações e um rodapé com as referências (links), nome dos autores e número da página.

Ao pegar um trabalho impresso você provavelmente identifica o que são cada um desses elementos apenas por como eles se parecem, pela cor, tamanho da fonte, localização e contraste desses elementos, mas também porque durante a escola você foi formado pra entender essa sintaxe visual. Aqui fica claro que informação não são só caracteres na tela, a diferença de um título e uma citação é indicada de forma exclusivamente visual.

Diferente de um trabalho de escola ou faculdade, um site pode ser veiculado pra todo canto do mundo, que talvez entenda essa sintaxe visual de forma diferente - a leitura dessas pessoas pode ser na vertical, da direita pra esquerda, o significado dos pesos, cores, pode ser diferente.

Como os sites trafegam em bits que vão se complexificando até virarem informação em tela, eles não vão carregar essa sintaxe - essa semântica de forma visual. Logo, pra carregar essa semântica precisamos representar essa sintaxe visual na forma de um dado que trafegue pela internet e possa ser interpretado por diversos dispositivos e adaptado pra sintaxe visual de qualquer cultura ou nicho. Por isso HTML é um hipertexto de marcação.

A documentação da WHATWG descreve o HTML da seguinte forma:

HTML é a linguagem de marcação central da World Wide Web. Originalmente, o HTML foi projetado principalmente como uma linguagem para descrever semanticamente documentos científicos. No entanto, sua concepção geral permitiu que ele fosse adaptado, ao longo dos anos subsequentes, para descrever diversos outros tipos de documentos e até mesmo aplicações. - HTML Living Stardard, Backgorund

Ou seja, o HTML é uma linguagem que descreve documentos e conteúdos de forma universal, acessivel e customizável.

Sites e documentos

Sites e aplicações são documentos de texto como qualquer outro. A diferença de um trabalho escolar e um site é a formatação do seu conteúdo e as funcionalidades que você aplica a ele - respectivamente, papel do CSS e do Javascript.

Nas primeiras aulas de front-end a distância entre as tags esquisitas que geram letras em uma página branca e um site como esse costuma parecer abismal:

Mas por debaixo da formatação temos tags como qualquer outra que com sua semântica representam o conteúdo que compreendemos visualmente através do CSS. No exemplo abaixo a mesma página com as tags sobrepondo os elementos que elas representam.

Por incrível que pareça é a mesma página sem formatação CSS, contendo o mesmo conteúdo e a mesma semântica. Visualmente ela é muito diferente, mas ao ser escutada através de tecnologias assistivas ou lida por um terminal, como o Browsh.

Usando um script pra colorir os elementos é possível ver que mesmo a página sem CSS possui um layout, mesmo que simples. Ela tem margens, padding, tamanhos de fonte e afins. O navegador injeta esse CSS base pra que possamos visualizar os elementos mesmo sem criar estilos autorais.

Sem CSS	Com CSS

A sintaxe

Pra entender a forma de escrever HTML, temos que entender que elementos tem pais, filhos e irmãos, tanto no layout quanto no código:

Para agrupar elementos visualmente temos que colocá-los no mesmo container, no layout isso dá a sensação visual de unidade, no código faz com que as mudanças de layout sejam aplicadas apenas à componentes que se referem a aquela parcela da página ou componente.

Pai (Parent)	Irmão (Sibling)
"Pais" são elementos que possuem outros dentro, são chamados também de containers	"Irmãos" são componentes que ficam lado a lado

Isso é importante pois muitos conceitos importantes do HTML e do CSS se baseiam nessa relação de parent, children e sibling. Elementos HTML são representados por tags, uma de abertura e fechamento. Elementos que não possuem filhos, como imagens e quebras de linha "fecham" já na tag de abertura:

Text  
 


  src="https://www.placehold.co/400x400"
  alt="Imagem de placeholder"
/>

Tags sinalizam abertura e fechamento de um elemento, o espaço entre as tags abrigam elementos filhos. Dentro da tag é possível escrever atributos que aderem funcionalidades à tags, como classes que recebem estilos, ids que criam uma variável global com o elemento no Javascript.

Existe mais de uma centena de atributos, separado em atributos específicos e globais. Os específicos são atributos que adicionam funcionalidade à elementos específicos, como o type que modifica o tipo de um input, que pode ser "text", "number", "tel", "date" e afins ou o atributo form que vincula elementos de formulário que estão fora de um elemento

💡 A lista completa de atributos pode ser lida no MDN, nela você pode conferir quais elementos tem determinado atributo.

Você também pode ir na documentação da MDN do próprio elemento pra ver quais atributos são válidos nele e o que eles fazem:

Semântica

A maioria dos sites possuem uma barra de navegação que tem o papel de disponibilizar através de links partes do site que o usuário pode acessar, tal como na imagem abaixo.

Da esquerda pra direita, a barra de navegação contém um logo que ao clicar direciona pra página inicial, 5 links que direcionam pra diferentes páginas do site e um link estilizado como um botão que direciona pra página de entrar em contato.

Simplificando (e muito) o código do site, a estrutura de HTML suficiente pra expressar essas funcionalidades seria algo como essa:

href="./index.html">
     src="logo.png" alt="Ir para página inicial" />
  
  
     href="./work">Work
     href="./service">Service
    
     href="./connect">Connect

• Usamos o nav pois ele representa estruturas que contém navegação. "Navegar" é ir de uma página a outra ou a diferentes trechos da mesma página através de links, logo toda porção do site que faz isso pode ser representada com essa tag. Ao usar o nav leitores de tela lêem em voz alta o trecho dentro desse container como "navegação", informando a pessoa usuária que dentro dela tem links.

• Temos uma âncora () ao redor de uma imagem representando um logotipo clicável que direciona à pagina inicial (index.html). Toda âncora precisa ter um texto descrevendo onde ela vai pra que até usuários não videntes (pessoas que tem baixa ou nenhuma visão) possam ter contexto da onde o link vai. O link é lido como " link" - o texto alternativo passado no atributo alt= da imagem pode ser lido como texto de um link, no exemplo a cima o leitor de tela leria "Ir para página inicial, link".

• Logo abaixo tem uma lista não ordenada (

  ) que representa um ou mais items de lista (
• ) que não são representados em uma ordem específica. Dado que selecionamos o primeiro item da lista "Work", o leitor de tela leria "Work, link, lista 6 items". Usar esse formato pra todo tipo de lista, como listagem de produtos representada por cards, dá ao cliente a informação de que é uma lista e da quantidade de items que ela possuí.

Usar os elementos de HTML corretos habilita:

• Melhor uso de estilos, tirando a necessidade de escrever CSS adicional pra adaptar um elemento.
• Habilita super poderes específicos pra elementos, como
  que faz com que qualquer botão dentro dele possa submeter o formulário e possuí mecanismos de validação nativos.
• Deixa o HTML legível pra pessoas não videntes, pessoas que acessam a web por outras aplicações que não navegadores e crawlers.
• Robôs que lêem o conteúdo do site para indexá-lo em mecanismos de busca ou extrair conteúdo.

Boa parte da acessibilidade é escrever HTML corretamente. Um site com HTML não semântico é um site "pronto" pra um publico muito menor do que você imagina. Um site só com