As aulas do Curso Eu Programo seguem a todo vapor e a tática começou a se desenhar: fazer o exercício, revisar e repetir na aula seguinte. Mas não basta só refazer sempre a mesma coisa. É preciso refazer o que já viu e acrescentar novidades. Tá meio confuso, né?! Então vamos esclarecer seguindo o mesmo ritmo de repetição, porque, afinal de contas, essa é a melhor forma de ser aprender a programar.
Aprendemos que HTML é a estrutura, o esqueleto, dos websites (como você pode conferir aqui – incluir o link do texto de HTML da aula passada). E, para que isso aconteça, ele possui algumas tags principais que devem ser usadas prioritariamente em todos os projetos que você quiser fazer. São elas:
<html>
<head>*Aqui vão todas as meta informações do site, aquelas que não são vistas pelos usuários*
</head>
<body>*Aqui vai todo o conteúdo do sites em si, todos os elementos visíveis, desde imagens até os textos*
</body>
</html>
Apesar de existirem as tags básicas que apresentamos acima, não existe uma única regra que defina todos os casos de como o código dos elementos da página deve ser estruturado. Cada layout é um caso e deve ser estruturado especificamente. Dessa forma, é possível começar de um jeito e ir alterando conforme a necessidade. Por exemplo, podemos não utilizar nenhuma tag <div> ou <section> para envolver os elementos durante a construção do projeto e, no final, vermos que as informações ficaram muito soltas, aí então decidimos agrupar e classificar cada parte.
O exemplo traz as tags <div> e <section> porque ambas são utilizadas para agrupar elementos do site, de forma a organizar melhor o conteúdo. A diferença é que a <div> é apenas uma caixinha genérica de “qualquer coisa”, enquanto <section> é uma tag nova do HTML 5, que é a versão mais recente da linguagem, e serve para indicar que uma seção possui conteúdo que tem relação entre si.
E assim como não há regras na forma de estruturar os códigos, também não há na hora de estilizar nosso projeto, por isso podemos programar a página de HTML e CSS simultaneamente ou fazer primeiro um e depois o outro. Nesse caso, a ordem dos tratores não altera o viaduto.
Linguagem e semântica sempre andam juntos
Se procurarmos no dicionário o significado da palavra semântica, a primeira explicação que vamos encontrar será:
se·mân·ti·ca – 1. (ling) Ramo da linguística que estuda a significação das palavras e suas mudanças de sentido ao longo do tempo, bem como a representação do sentido dos enunciados.
E o que isso quer dizer? Que toda e qualquer linguagem estudada e disseminada no mundo sempre carrega consigo a semântica, porque traz sentido, apresenta algum significado para o que está tentando representar. Ou seja, traduzindo para um “português mais claro”, algo semântico é aquilo que tem um significado que realmente faz sentido. E com um mundo de evolução constante, principalmente na área da tecnologia, as linguagens de programação não poderiam ficar para trás. Muito menos a linguagem usada para escrever todos os websites disponíveis por aí. Sim, nós estamos falando do HTML.
O HTML 5, que é a mais nova versão dessa linguagem, trouxe às programadoras um HTML mais semântico, que ao invés de simplesmente agrupar os elementos de forma genérica, agora possui uma estrutura baseada no significado de seu conteúdo. E isso trouxe muitos benefícios, como a manutenção mais fácil dos códigos em caso de necessidade de alterações e, também, a compreensão do documento.
A estrutura semântica do HTML permite uma maior compreensão do código independente do lado visual do site. Facilita também a vida dos usuários não visuais, como no caso de uma pessoa cega que utiliza um leitor de tela para ouvir a página. Nesse caso, quanto mais semântica houver na estruturação do código, melhor o entendimento.
Outro ponto importante da semântica do HTML, que pode ser até considerado o motivo primordial, é que o sistema de buscas do Google são leitores não visuais das páginas da Internet. Dessa forma, sem um HTML semântico, o Google não consegue entender o que é cabeçalho, rodapé ou conteúdo realmente importante de cada site.
Em resumo, neste nosso mundo tão necessitado de mais inclusão e acessibilidade, uma dica nossa é usar o máximo possível de semântica em todos os códigos que for programar. Vai facilitar para você e para seus usuários! #fikdik 😉
Tags: as palavras dessa linguagem
Os códigos desenvolvidos em HTML são escritos por meio das tags, que nada mais são do que os elementos dessa linguagem escritos entre os sinais <>. As primeiras e obrigatórias tags, como dissemos lá em cima, são <hmtl>, <head> e <body>. Na sequência, as tags que sempre aprendemos são as essenciais para dar as primeiras formas no site, como por exemplo, <section>, <div>, <header>, <h1>, <h2>, <h3>, <a>, <nav>, <img>, <p> e <link> (e você pode relembrar o que faz cada uma delas aqui).
E então chegamos as tags que nos permitem diferenciar certas partes do nosso código:
<b> b vem de bold e serve para indicar que uma palavra ou trecho do texto vai ficar em negrito, sem um significado semântico
<i> i vem de itálico e costuma ser usado para visualmente dar destaque a termos especiais ou palavras em outras línguas
<br>usada para fazer uma quebra de linha, ou seja, essa tag permite pular linha sem necessariamente abrir um novo <p>arágrafo
<ul> tag usada para criar listas
<li> tag usada para criar cada item de uma lista
<span>tag genérica usada para agrupar elementos inline (segue a mesma função da <div>, mas div é utilizada para elementos block). Ela não tem significado semântico e é utilizada mais porque possibilita estilizar o grupo selecionado
Retomando tudo o que explicamos anteriormente sobre semântica no HTML, apresentamos agora elementos que servem justamente para enfatizar o sentido e a importância do conteúdo relacionado as tags a seguir:
<strong> a função principal do strong é dizer que o trecho tem importância maior que o resto do conteúdo que não está dentro de strong. O estilo em negrito é uma consequência no estilo que os navegadores colocam (nos softwares de acessibilidade, por exemplo, eles provavelmente leem o trecho com um tom mais forte para os deficientes visuais)
<em> assim como <strong>, essa tag também é mais semântica e indica que um determinado trecho está sendo enfatizado. A consequência disso nos browsers é o itálico, mas outros dispositivos poderiam utilizar outro estilo para enfatizar o trecho. Inclusive, podemos modificar a regra visual com o CSS.
Temos também o <!DOCTYPE html>, porém ele se diferencia dos outros por não ser considerado um elemento. Essa tag é uma informação que se dá ao navegador para avisar qual será a linguagem usada para programar aquela página. E criou-se então uma convenção entre as programadoras de sempre usar essa tag e dar essa informação aos browsers (são os programas utilizados para abrir as páginas da Internet: Internet Explorer, Google Chrome, Mozila Firefox, entre outros).
Hierarquia: a organizadora de toda estrutura
Dissemos lá em cima que cada layout é um caso e deve ser estruturado especificamente, mas há uma coisa que obrigatoriamente deve ser sempre mantida: a hierarquia das tags. O HMTL é usado para estruturar o site que está sendo programado. Dessa forma, nada mais justo do que estruturar de maneira que os elementos obedeçam seus lugares e suas funções.
Tudo começa pela tag <html> que envolve todas as outras. Na sequência temos <head> e <body>, que podemos considerar como se fossem as mães de todas as outras tags. É dentro de cada uma delas que desenvolvemos e utilizamos todos os outros elementos.
Seguindo no exemplo da família, podemos dizer que as tags <title>, <link> e <nav> são as filhas do <head>, porque as três são utilizadas para transmitir meta informações do site e, portanto, são sempre colocadas dentro do <head>. E, ao mesmo tempo, são também irmãs, porque podem ser usadas simultaneamente sem que uma interfira no sentido e na função da outra.
Na segunda parte do código temos <body> como a mãe de todas as outras tags que virão a seguir. Suas principais filhas são <section> e <div> que, cada uma a sua forma, agrupam os outros elementos. As tags <h1>, <h2>, <h3> e <p> podem ser consideradas filhas da <section>, pois normalmente são elementos usados numa mesma seção e que tratam do mesmo assunto. Assim como a <img> pode ser considerada filha da <div>.
O que queremos dizer com todas essas comparações de mãe, filhas e irmãs é que, assim como na maioria das coisas do mundo atual, o HTML também possui uma hierarquia que deve ser seguida. Não é uma hierarquia que busca poder, mas sim que visa à ordem e ao sentido das coisas. Nesse caso, a ordem dos tratores pode vir a alterar o viaduto. Fiquem atentas!
Dica de amiga para amiga
Depois de tantas tags para entender, assimilar e decorar, enfim podemos entender por que a regra é fazer, revisar e repetir. Para aprender a programar é preciso estar em constante produção, reescrevendo códigos para ajudar a memorizar e lembrar com mais facilidade para que serve cada elemento, cada tag, cada atributo.
Mas como nós somos muito amigas, fica uma dica: nos editores de textos mais recentes, como por exemplo o ATOM, se você digitar html (assim, simples, em caixa baixa e sem nenhum sinal junto) e der enter, automaticamente o editor vai te dar a estrutura básica do html com as principais tags na sua ordem de hierarquia. Somos ou não somos muito legais? 😉
Agora é só ler nossos textos, abrir seu editor e sair testando cada tag para ver como ela funciona na prática!
Elis Faber é jornalista formada pela FAPCOM e autora do livro “Nas Asas do Águias”. Ela ama contar/escrever histórias e busca aprender coisas novas todos dias.
Este conteúdo foi escrito com base na Aula 03 do Curso Eu Programo, de introdução à programação e desenvolvimento web. Veja outros textos baseados no material do Curso Eu Programo, clicando aqui.