Wtricks • Tutoriais e Dicas do Mundo Digital

HTML: uma breve introdução dos princípios básicos da linguagem

Por Carlos Sabo Cantanzaro • 02/06 - 18:24 pm | Em HTML

Aprenda os princípios básicos e essenciais para começar a dominar a linguagem HTML e construir sua primeira página para web

Antes de mais nada, eu gostaria de dizer que como esse artigo é uma introdução prática e objetiva sobre o HTML, não vou me preocupar aqui em contar a historia da linguagem. Porém, acho que todo aspirante a desenvolvedor e até mesmo os que já são profissionais, devem conhecer a história de como nós chegamos até aqui.

Então, logo abaixo, vou disponibilizar links de alguns documentários e livros que contam, não só a historia do HTML, mas toda a trajetória da Internet até os dias de hoje. Esses materiais não são obrigatório para compreender o funcionamento do HTML mas mesmo assim, acredito ser um material complementar aos estudos.

Links para estudar a história da Internet:

Introdução ao HTML

O HTML (Hypertext Markup Language) é uma linguagem de marcação de hipertexto, que usa elementos para representar conteúdos específicos dentro de uma página.

Desta forma, os elementos do HTML são responsáveis pela informação que vai ser exibida para o usuário e não como (em termos de aparência) essa informação vai ser exibida.

Ou seja, o HTML especificamente, não vai se preocupar se uma link <a> é apresentado para um usuário na cor azul ou vermelha e sim, em apresentar o link dentro de uma estrutura que possibilite a navegação.

Muitas vezes a linguagem HTML é chamada de linguagem de programação, porém a mesma não possui as estruturas necessária para ser qualificada dessa forma, como por exemplo, operadores lógicos, variáveis, funções, entre outros elementos. Desta forma, O HTML deve ser considerado com uma linguagem de marcação de hipertexto. 

Sendo assim, a responsabilidade do HTML dentro de uma página é a de estruturar o conteúdo que vai ser apresentado para usuário e para fazer isso de forma eficiente, existem alguns conceitos importante que vamos ver em detalhes logo abaixo.

TAGs e elementos

O conceito das tags no HTML é muito simples, elas são as responsáveis por fazer a marcação (e é dai que vem o Markup) dos elementos da nossas páginas.

Basicamente, existem centenas de elementos que nós podemos colocar dentro de uma página HTML, o que vai indicar a estrutura desses elementos, quando eles começam e quando eles terminam são as tags.

Para ficar mais claro vamos ver um exemplo:

<h2>Subtítulo</h2>

O código acima em uma página HTML representa um elemento de título, o que indica para o navegador que esse código deve ser tratado com um elemento de título é a tag de abertura <h2>. Basicamente, tudo que está depois da abertura dessa tag será considerado como um titulo. Porém, para indicar para o navegador o termino desse elemento usamos a tag de fechamento </h2>A única diferença entre as duas tags é a barra / utilizada no inicio da tag de fechamento. A grande maioria das tags no HTML é estruturada dessa forma mas veremos adiante algumas exceções.  

Então um elemento é composto, na grande maioria por três partes: tag de abertura<h2>, o conteúdo: Subtítulo e a tag de fechamento: </h2>.

Como dito anteriormente, existem alguns elemento que fogem um pouco dessa estrutura, como é o caso das imagens <img>.

Veja um exemplo:

<img src="http://placekitten.com/300/200" alt="Imagem de gatinho">

No caso do elemento de imagem, ele é definido pela tag <img> que não tem nenhum conteúdo ou tag de fechamento. O conteúdo dessa tag é definido pelos seus atributos (o que veremos mais a fundo adiante), como src, que indica o endereço da imagem e o alt que indica a legenda alternativa a ser renderizadas caso o endereço da imagem não esteja disponível.

Existem outros elementos que são definitos dessa mesma forma, como links e inputs, não abordaremos eles nesse artigos por se tratar apenas de uma introdução ao HTML. Mas para dar continuidade aos seus estudos recomendo o estudo do link: Elementos HTML – MDM

Atributos

Os atributos são informações extras que podemos inserir no momento que abrimos as nossas tags. No caso do exemplo que usamos acima, a tag<img> recebeu dois atributos. No caso dessa tag em especifico o atributo src é obrigatório, pois ele é o responsável por buscar e renderizar a imagem na tela no usuário. No entanto, o atributo alt, apensar de ser um padrão, não é obrigatório. Usamos ele nesse contexto pois o mesmo adiciona semântica no nosso código e além disso, proporciona mais acessibilidade a nossa página.

O que o atributo alt representa é um texto que é usado como uma “alternativa” a imagem. Então imagine o seguinte cenário: um deficiente visual está dentro de uma página em um artigo sobre o assunto X, e no meio do artigo tem uma imagem que é fundamental para a continuidade do artigo. O que acontece?

Sabemos que os navegadores e os sistemas operacionais possuem ferramentas de acessibilidade que leem os elementos dentro do HTML, e narram o mesmo para usuários com deficiência visual, mas essas ferramentas não conseguem ler uma imagem, interpretar o conteúdo e então coloca-lo no contexto do texto (não ainda). O que é tag alt faz é fornecer o contexto.

Então vamos olhar para imagem abaixo, o que você vê?

Na imagem, uma linda borboleta amarela pousada em cima de uma flor branca e ao fundo algumas outras flores de mesma coloração

Se você for uma pessoa privilegiada com o uso pleno da sua visão, você viu um linda borboleta pousada em cima de uma flor. Mas se esse não for seu caso, então a sua ferramenta de acessibilidade narrou para você a seguinte descrição: “Na imagem, uma linda borboleta amarela pousada em cima de uma flor branca e ao fundo algumas outras flores de mesma coloração”.

O código da mesma informação ficaria desta forma:

<img src="endereço_da_imagem" alt="Na imagem, uma linda borboleta amarela pousada em cima de uma flor branca e ao fundo algumas outras flores de mesma coloração">

Caso você tenha uma imagem complexa e precise descrever a mesma com mais informação, você pode usar outro atributo longdesc em conjunto com o alt (em conjunto, nunca para substituir o mesmo), ele permite que você escreva uma definição maior para a imagem, mantendo o código semântico.

Além da acessibilidade, os motores de busca também utilizam o conteúdo dentro dos atributos para “ler” sua página e isso influência muito nos resultados de busca.

Atualização: o atributo longdesc foi descontinuado no HTML 5

Classes e IDs

Outros dois atributos que usaremos de forma extensiva ao fazer a marcação HTML das nossas páginas são as classes e os IDs. Esses dois atributos são os responsáveis por fornecer a identificação dos nossos elementos, o que é essencial na hora de fazer a estilização com CSS ou criar algum comportamento com JavaScript.

Aqui vale uma atenção especial a esses dois atributos, como eu disse, eles serão muito utilizado pois eles serão nossos “seletores” dentro do CSS e do JavaScript.

Caso você não tenha nenhuma experiência com essas outras duas linguagem, não precisa se preocupar, o foco aqui é HTML. Mas quando vamos fazer a marcação, temos que pensar nos seletores com muito carinho.

Para ficar mais claro, vamos pensar em uma situação. Vamos imaginar que eu quero aplicar uma cor azul em alguns parágrafos da minha página. Para isso eu poderia usar o código CSS abaixo:

p { color: blue; }

Vai funcionar perfeitamente! Mas como eu disse, eu só quero que alguns parágrafos fiquem na cor azul! Então pra isso, eu vou fornecer um identificação para eles e vou fazer a partir de uma class, pois mais de um elemento vai receber a cor azul. Então meu código vai ficar dessa forma:

No HTML:

<p>Parágrafo</p>
<p class=“texto-azul”>Parágrafo</p>
<p>Parágrafo</p>
<p class=“texto-azul”>Parágrafo</p>

E no CSS:

.texto-azul { color: blue; }

Dessa forma, apenas o segundo e último parágrafo vão ficar na cor azul, essa é a mágica dos seletores! Mas e os IDs, quando devo usar?

Bem, existe muitas discussões sobre isso, mas basicamente os IDs são identificações únicas, como o número do seu RG, ninguém pode ter o mesmo que o seu! Então quando você define um ID para um elemento, nenhum outro pode ter esse mesmo ID. Justamente por isso, na minha concepção não é uma boa ideia usa-los para definir seletores no CSS.

Mas, caso sua intenção seja criar um botão que vai disparar uma ação por JavaScript então o uso de um ID fica mais interessante, pois você sabe que somente um elemento pode disparar aquela ação, se ele é único, ele merece um ID.

Existem muitos outros elementos que podemos usar nas nossas tags e recomendo muito que você vá além desse artigo. Como sugestão de estudo, recomendo o a leitura do link (em inglês) do site CSS-TRICKS.

Estrutura básica do HTML

Agora que já abordamos os princípios básicos da linguagem, vamos ver na prática a estrutura básica de um documento HTML.

O código abaixo representa a estrutura mencionada acima:

<!DOCTYPE html>
<html lang="pt-br"> 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Título do documento</title>
    <body> 
        <!--  Todo conteúdo que vai aparecer para o usuário -->
    </body>
</html>

No código acima vimos uma série de elementos, tags e atributos, cada um deles tem sua importância e para que você entenda a utilidade de cada um desses elementos vamos analisar cada um separadamente.

<!DOCTYPE html>

O doctype é o responsável por indicar ao navegador qual o tipo de documento está sendo processado e qual a versão do mesmo. Desde a versão 5 do HTML a declaração do doctype ficou muito simplificada, então tudo que temos que fazer é indicar que estamos trabalhando com a linguagem HTML e o navegador faz todo o resto.

<html>

Essa tag indica que nosso documento começou, todo nossa código deve estar contido dentro dessa tag e NUNCA devemos escrever nenhum código após o fechamento da mesma </html>.

Além disso, na abertura do nosso documento usamos um atributo lang='pt-br'esse é o atributo  utilizado para indicar que nosso documento foi escrito em português do Brasil. É muito comum alguns desenvolvedores negligenciarem a declaração desse atributo, porém não faze-lo é uma pratica ruim que pode atrapalhar muito a acessibilidade do seu site.

Esse mesmo atributo pode ser usando em outras tags, por exemplo, estamos trabalhando com um documento em português mas, um dos parágrafos está em inglês, então podemos indicar isso colocando o atributo Lang dentro da tag desse parágrafo.

<p lang="en">some text in english</p>

Dessa forma o navegador vai saber que essa parte do código está em inglês e vai tratar o mesma de forma adequada.

<html>

O código HTML é dividido em duas partes sendo elas a cabeça <html> e o corpo <body>, para você saber o que tem que colocar em cada uma dessas parte é muito simples! A informação vai ser renderizadas para o usuário? Se sim, é no <body>!

Sendo assim, vamos usar o header para colocar todas as informações da nossa página que não são renderizadas para o usuário pelo navegador. Ou seja, metatags, chamadas para arquivos CSS entre outros elementos.

Na teoria, isso quer dizer que o JavaScript também deveria ser invocado no header do nosso documento, porém uma boa prática de perfomance é quebrar essa regra e chamar o JavaScript no final do body.

Essa pratica tem um motivo, quando o navegador começa renderizar nossa página ele faz todas as requisições do header antes de renderizar as informações para o usuário. Desta forma, o javaScript que está no header vai atrasar o carregamento da página, travando assim a informação.

Tá mas porque não fazemos isso com o CSS também? Porque ele é fundamental para as informações renderizadas! Se o CSS for carregado no fim do documento, o usuário vai ver de cara uma página toda desconfigurada e então, quando o CSS for carregado, a página como ela deveria ser. Isso traria uma experiência bem ruim para os usuários.

Em contra partida a isso, como a maioria dos códigos em JavaScript precisa que o DOM do documento esteja carregado para funcionar, não tem problema algum colocar isso no final do documento. Dessa forma o usuário vai ter acesso a todas as informações importantes primeiro sem ter a navegação atrasada ou interrompida por requisições que podem esperar.

Antes de partir para a definição do <body> vamos tomar uma atenção para os outros elementos que foram definidos no header.

<meta charset="UTF-8">

Cada metatag tem uma função especifica, por ser um artigo para iniciantes, não vou abordar aqui o uso das demais. Mas, o “charset” é a meta responsável por indicar qual codificação dos caracteres dentro de uma página. Não usar essa metatag dentro de uma página HTML pode gerar várias dores de cabeça com problemas de acentuação, e acredite, por experiência própria, você não vai querer ter esses problemas!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Essa metatag é a responsável por possibilitar a criação de uma página resposiva que se adapte a todos os tipos de dispositivos.

O conceito de design responsivo é um pouco avançado para um artigo introdutório sobre o HTML, mas podemos dizer que ser responsivo é obrigatório para qualquer página que queira ser no mínimo decente.

O que essa tag faz é informar para o navegador qual o tamanho da tela do dispositivo do usuário   e com essa informação o navegador consegue processar as definições que colocamos no CSS para cada dispositivo e fazer com que tudo funcione como deveria.

Como eu disse, esse conceito é avançado para tratar aqui, mas recomendo a leitura desse artigo do Google Developers sobre os princípios do Design Responsivo

<meta http-equiv="X-UA-Compatible" content="ie=edge">

Essa metatags não vai afetar nada para maioria dos usuários, porém, para quem usa uma versão um pouco mais antiga do internet explorer (se você faz isso, para de fazer), essa tag vai ser útil pois a mesma faz com que as versões mais antigas do IE usem o motor do Edge, navegador mais recente da Microsoft e graças a Zeus o que oferece mais compatibilidade para novas funcionalidades.

<title>Título do documento</title>

Por fim, nossa ultima tag do header é o title, e como o próprio nome já diz, ela é responsável pelo nome do documento. Esse também é o nome que é exibido na aba dos navegadores e nos resultados de busca.

<body>

Por fim, chegamos ao body! Se no header vamos colocar tudo que não vai ser renderizando para o usuário, logo, no body vamos colocar toda informação que o usuário vai ter acesso. Ou seja, a parte visual da sua página e seus elementos devem ser colocados todos dentro do body.

Vale lembrar que depois do fechamento do body </body> a única tag que podemos inserir é o fechamento do HTML </html>.

O que fazer a seguir?

Agora que você chegou até o final desse artigo introdutório eu espero que você tenha em mente os conceitos básicos da linguagem HTML. E sabendo esse conceitos, você pode dar continuidade aos seus estudos se aprofundando mais em qual tipo de tag usar para criar cada tipo de elemento, hierarquia e semântica, metatags e etc… 

O caminho para aprender HTML é longo e eu mesmo, que já tenho 15 anos estudando desenvolvimento web me deparei com quanta coisa eu não sabia quando fui escrever esse artigo! Então não desanime se sentir dificuldade no começo. HTML parece simples mas é uma linguagem muito complicada, você pode aprender os conceitos básicos em um artigo e talvez até conseguir criar uma página, mas para dominar a linguagem você vai levar alguns bons anos!

Espero que você continue engajado e motivado a aprender! Espero em breve poder postar mais sobre o tema aqui.

Por fim, gostaria de saber sua opinião, o que achou do artigo? Tem algo a acrescentar ou a questionar? Por favor, use os comentários!

PARTICIPE DA DISCUSSÃO