Entenda a fundo o que é HTML. Afinal, é preciso conhecer essa tecnologia e entender suas evoluções para programar para web.
O HTML é um elemento comum de todas as páginas da web, servindo, portanto, como um alicerce para a internet. Trata-se de uma linguagem simples de entender e poderosa historicamente para os avanços que conseguimos com a grande rede.
Nesse sentido, pessoas que desejam avançar no mundo de desenvolvimento full stack devem conhecer bem o que é HTML, as tags HTML e a estrutura HTML.
Ao compreender a forma como a linguagem evoluiu e ganhou novos paradigmas e conceitos, é possível dominá-la para criar aplicações web poderosas para vários fins.
Saiba mais sobre esse termo e sobre como estruturar uma página HTML.
HTML é uma sigla para HyperText Markup Language, ou linguagem de marcação hipertexto. Foi criada por Tim Berners-Lee, quando trabalhava no CERN (Centro Europeu de Pesquisa Nuclear), na Suíça. Lee também criou na mesma época o protocolo HTTP e a World Wide Web, enquanto procurava uma solução para compartilhamento de arquivos no centro.
O HTTP é o protocolo de rede que permite a transferência de arquivos, ao passo que a World Wide Web (WWW) é o sistema que cataloga e permite compartilhar documentos por meio do HTTP.
Basicamente, o HTML é a unidade essencial de todas as construções da web. Toda página na internet começou meramente como um documento em HTML, com as tags básicas estruturando e formatando esse documento.
O hipertexto do nome diz respeito à capacidade de estabelecer uma relação entre páginas, um dos grandes diferenciais da tecnologia quando surgiu. Como aponta o nosso expert César Martins, Desenvolvedor de Novos Produtos na Tera, um hipertexto tem a ver com a noção de link:
"Hipertexto é qualquer texto com um link, um link que leva de um lugar para outro. A web é construída por milhões de textos desse tipo."
Berners-Lee conseguiu criar uma forma de conectar páginas para estabelecer fluxos de navegação. Não sabia ele que criava a ideia-protótipo do que viria a ser esse mundo rico e amplo que é a internet hoje.
Uma característica importante do hipertexto é que ele é representado por conteúdos multimídia, que são arquivos em formato de texto, imagens, vídeos, ilustrações, áudios e links. Ou seja, a forma como as informações são apresentadas na web.
Desde que surgiu, o HTML evoluiu por muitos anos até chegar à atual versão 5. Durante essas mudanças, houve alguns problemas com compatibilidade com os sistemas que lidam com arquivos HTML, os navegadores.
Afinal, vários navegadores foram criados e cada um queria impor suas próprias tags e regras para a linguagem. Para lidar com isso, criou-se um comitê para organizar e gerenciar a evolução da tecnologia, o W3C.
Quando criou o HTML, Tim Berners-Lee tinha como objetivo desenvolver uma linguagem que permitisse estruturar e organizar os arquivos. Ou seja, com ela era possível criar marcações para definir um documento que referenciava outros documentos a partir dos links.
Então, a função do HTML passou a ser estabelecer a estrutura básica para as páginas, colocar as coisas no lugar e definir uma formatação. Como diz o nosso expert:
"O HTML define a estrutura de uma página web. Define quais são os conteúdos que vão ser exibidos. Se vai ser um texto, uma imagem, um vídeo. Define os elementos que meu navegador vai precisar criar e renderizar nessa página."
Outras funções, de acordo com César:
"É importante compreender o HTML para poder criar páginas web, estruturar páginas do zero, estruturar aplicações web e até editar páginas já feitas."
A partir disso, começou-se a incrementar os sites para criar aplicações robustas, como as que temos hoje. Com essa estrutura, pode-se estilizar uma página com o CSS e adicionar dinamismo e interatividade com o JavaScript.
Mas voltemos ao HTML. Por meio de suas marcações, a tecnologia de marcação diz ao navegador o que é cada parte do código, o que exibir na página, como exibir e onde exibir.
Serve, portanto, para esclarecer a hierarquia de informações visuais em um site: o que vem primeiro, qual elemento é parte de outro superelemento, qual o tamanho dos componentes etc. Assim, permite organizar uma página de modo simples e estrutural.
Recentemente, com a quinta versão do HTML, percebemos uma ênfase maior na capacidade semântica da linguagem. Ou seja, o dever desse padrão é também dizer ao navegador algumas meta informações acerca da página, como se uma seção é um rodapé ou não. No HTML 5, algumas tags novas surgiram para deixar isso mais claro e definido.
Assim, o objetivo é modularizar ao máximo uma página web para especificar o que é cada parte. Desse modo, o trabalho da aplicação que interpreta, o navegador, é reduzido e pode ser feito com maior agilidade.
Chegamos então a uma discussão importante quando falamos de HTML. Afinal, ela não é uma linguagem de programação propriamente dita, embora muitas pessoas afirmem isso. Outras pessoas simplesmente dizem que não é, mas não entendem a diferença. Nos parágrafos seguintes, vamos encarar isso e explicar.
Segundo o expert César Martins, uma linguagem de marcação serve para configurar exibição de elementos:
"Linguagens de marcação definem como um conteúdo ou como um dado podem ser exibidos."
O principal fator diferencial é a lógica. Uma linguagem de marcação não tem lógica, então sua função é meramente colocar as coisas no lugar e marcar uma página (“aqui está o rodapé, aqui está o corpo, aqui está a parte lateral do site”).
Uma tecnologia de programação consegue criar funcionalidades complexas a partir de lógicas encadeadas, com relações causa-consequência, mudanças no fluxo de execução e estruturas de decisão.
Pensando em um site web, por exemplo. Quando definimos a seguinte funcionalidade: “se a pessoa usuária clicar no item Fale Conosco do menu, eu quero que a página exiba uma pop-up agradecendo”. Essa situação só é possível de ser configurada com uma lógica, pois depende de uma causalidade e da definição de uma consequência.
Quando queremos apenas dizer que o elemento Fale Conosco deve apontar para uma página X, podemos fazer isso com links no HTML, ou seja, com a marcação.
Outra boa forma de diferenciar é pensar em uma aplicação web como um conjunto de dois lados, o do cliente e do servidor. O HTML é uma linguagem restrita apenas a manipulações do lado do cliente, do front-end, como se a tecnologia não conseguisse enxergar o outro lado. Por isso, é usada por devs front-end e full stack.
Por sua vez, uma linguagem de programação cria uma lógica que amarra os dois lados, permitindo que um site funcione como uma aplicação de fato.
A seguir, vamos mostrar como se parece uma estrutura elementar de um arquivo HTML. Note bem como é a estrutura HTML.
Vamos destrinchar essa página-exemplo. Primeiro temos uma tag obrigatória do novo padrão do HTML5, a tag “<!doctype>”. Trata-se de uma tag sem fechamento que define basicamente que estamos lidando com a nova versão da tecnologia.
Em seguida, temos a tag principal “html”, que demarca tudo o que temos como conteúdo em nossa página. Tudo o que estiver entre a tag de abertura e a de fechamento (geralmente a última linha do código) é o meu código HTML válido que será interpretado pelo navegador. Nesse caso, na tag html, temos o que chamamos de atributo, que é um elemento modificador. O atributo aqui é o “lang”, que define o idioma da página.
Em seguida, temos a tag “head”, que estipula algumas informações de configuração para o site. Ou seja, informações internas que não necessariamente serão exibidas para a pessoa usuária. Nela, vamos estipular qual é o título que aparece na aba do navegador, se há alguma configuração de estilo a fazer, se há algum script a ser adicionado, bem como metadados.
Dentro do “head” nessa estrutura básica temos o “meta” e o “title”. O “meta” configura metadados, como o tipo de formatação dos caracteres (UTF-8) e a adaptação às dimensões da tela. Já o “title” cuida do título daquela página, aquele que será exibido no buscador.
Então, temos a tag “body”. Ora, essa tag é importante, pois determina o que vai aparecer no conteúdo para as pessoas usuárias. Estabelece todo o corpo de conteúdo, com links, imagens, textos e mais informações.
Até então estamos falando bastante de tags como um elemento que compõe o HTML, mas não nos dedicamos ainda a defini-las. É o que faremos agora.
As tags são os componentes que estabelecem as marcações, ou seja, delimitam o que cada seção significa dentro da estrutura HTML. Uma tag “body” diz ao navegador que tudo dentro dela é corpo do site, ou seja, conteúdo. Uma tag “head” diz ao navegador onde dados estruturais e de configuração estão.
Temos duas tags para cada seção definida: uma de abertura e outra de fechamento. Tags de abertura no HTML sempre começam com um sinal “<” e terminam com um sinal “>”. As de fechamento seguem essa lógica, mas adicionam uma barra (/) no final, antes do “>”.
Exemplo: <head> </head>
Algumas tags, no entanto, fogem desse padrão: são as “self-closing”, ou seja, que se fecham sozinhas. Um exemplo disso é a “Doctype” que examinamos no tópico anterior.
As tags HTML são complementadas por atributos que especificam como esse conteúdo deve ser exibido e o que deve ser mostrado. Atributos configuram tamanho, local do arquivo, largura, cores, bem como outras definições.
Uma curiosidade interessante acerca do HTML é que é uma tecnologia extensível, ou seja, novas tags podem ser definidas para complementar as que são padrão.
Agora que você já sabe o que são as tags e por que são importantes, vamos conhecer as principais.
A tag “a” marca um link de uma página para outra ou de uma seção para outra na mesma página. Ao clicar nesse elemento, a pessoa usuária é redirecionada para outro local. A tag recebe atributos como o “href”, que determina qual é o endereço que deverá ser aberto com o clique.
Essas três tags delimitam listas no HTML. A “ul” define uma lista não ordenada, ou seja, não numerada. A “ol” indica uma lista ordenada. Ao passo que o “li” delimita um elemento da lista. (Perceba como nessa tecnologia é preciso ser bem específico acerca de cada informação e não há como definir blocos lógicos de informação, como nas linguagens de programação.)
A “img” é muito importante e muito usada. Marca uma imagem. Recebe o atributo “src”, com o endereço dessa imagem, que pode ser um endereço local para o disco do seu computador ou um link na internet. Além disso, é possível estabelecer parâmetros de tamanho, com atributos “width” e “height”.
A “p” delimita um parágrafo. É uma forma de organizar blocos de conteúdo de texto e multimídia e aplicar configurações específicas a um bloco inteiro.
As tags H (h1, h2, h3, etc) definem títulos e subtítulos. Elas se organizam de forma hierárquica: um h1 é um título maior, ao passo que um h2 é um subtítulo menor e um h3 é um subtítulo menor do que esses dois e assim sucessivamente. O tamanho já vem pré-formatado, mas pode ser redefinido com elementos modificadores (atributos).
Um “iframe” ajuda a inserir recursos complexos de outra página. Por exemplo, um player de vídeo do YouTube pode ser inserido para ilustrar algo numa discussão na página. Como atributo principal, temos o “src”, com o endereço daquele arquivo que será exibido.
Faz parte de um conjunto de tags que chamamos de “tags multimídia”. Sobre elas, nosso expert César Martins fala:
Tags multimídia são essenciais para dar mais interatividade para a página e para deixá-la mais atrativa para users.
Outra tag multimídia importante é a “video”. Ela define um bloco entre sua abertura e fechamento em que os elementos internos especificam que vídeo é. Cada elemento interno é um “source”, com atributos “src” e “type”, que estipulam o local do vídeo e o tipo, respectivamente.
A “audio” funciona da mesma maneira, com o apoio da tag “source”.
A tag “header” é uma novidade do HTML 5 para tornar a estruturação mais semântica. Ele especifica um cabeçalho, ou seja, uma seção de início que será exibida na parte superior da página. A tag “footer” representa, por sua vez, o rodapé. Temos também a tag “main”, que estipula um conteúdo principal dentro do corpo, entre o cabeçalho e o rodapé.
A “section” estabelece uma divisão mais genérica para uma seção. A “aside” estabelece de forma clara uma seção lateral para o site, como sidebars. Ao passo que a “nav” define um conjunto de menus e elementos de navegação.
....
Como vimos, a linguagem HTML apresenta um conjunto grande de possibilidades com suas tags. A estrutura HTML é o que configura a forma como uma página é exibida e renderizada pelo navegador, sendo assim o elemento essencial de toda página web. Por isso, é mais do que importante dominar essa tecnologia e conhecer as novidades de sua nova versão.
Gostou do conteúdo? Esses e outros conceitos são parte da aula sobre HTML do curso Full Stack Development da Tera. Conheça o curso completo clicando no banner abaixo.