O desenvolvimento web é uma das áreas mais promissoras do momento em tecnologia. Afinal, a construção de sites é uma demanda cada vez maior, já que a maioria das empresas deseja um espaço na internet para não só se comunicar com seu público, mas também apresentar seu produto.

Para aprender a criar websites usando programação e suprir essa alta demanda, a pessoa precisa conhecer e dominar o HTML (Hyper Text Markup Language, ou linguagem de marcação de textos), uma linguagem que fornece o esqueleto de toda página web. 

O HTML é uma tecnologia mais simples, porém efetiva e muito importante para uma carreira em TI. É essencial conhecer seus princípios e saber integrar as regras com as de outras linguagens, como CSS e JavaScript, para desenvolver aplicações robustas e funcionais na web.

Quer saber mais sobre o assunto? Confira o conteúdo super especial que preparamos sobre o assunto, abaixo:

• O que é HTML?
• Qual a história do HTML?
• Como o HTML funciona?
• Em quais áreas da programação o HTML é usado?
• Criando sua primeira página HTML: Hello World, o passo a passo!
• Quais os 3 frameworks frontend mais usados em HTML?
• O que são Atributos, Elementos e Tags?
• Qual a estrutura básica do HTML?
• Quais são os prós e contras do HTML?
• HTML vs XML: quais as diferenças?
• Vale a pena aprender HTML?
• Quais as melhores formas de aprender HTML?
• Como está o mercado de trabalho para quem sabe HTML?

Boa leitura!

O que é HTML?

Inicialmente, vale destacar que o HTML não é uma linguagem de programação, e sim uma linguagem de marcação. Ou seja, o objetivo não é criar um software, mas um conjunto de regras que estruturam uma página web e arrumam componentes visuais. É uma ferramenta utilizada para fornecer informações para as pessoas que acessam os sites, navegadores e mecanismos de busca.

Mesmo não sendo uma linguagem de programação, possui regras de sintaxe e palavras reservadas de modo semelhante. Por isso, requer estudo para que as futuras pessoas desenvolvedoras consigam realizar tarefas com mais facilidade. Quanto mais domínio ela tiver, mais fácil será resolver os problemas na construção de um site. 

Podemos dizer que o HTML é o componente mais essencial de uma aplicação web. Com ele, é possível criar a estrutura, definir o posicionamento dos elementos, estruturar a divisão de uma página em blocos visuais e combinar texto, imagens e vídeos.

Antes de prosseguir, aproveite e faça o download da trilha de HTML E CSS para entender os múltiplos caminhos que um profissional pode se especializar nas duas áreas.

Qual a história do HTML?

A linguagem foi pensada para compartilhar documentos científicos entre os acadêmicos, de acordo com o objetivo inicial da própria internet. Foi criada por Tim Berners-Lee, britânico que também criou a World-Wide-Web (www). A criação foi impulsionada pelo sucesso da conexão entre um cliente e um servidor na internet, em dezembro de 1990.

Lee utilizou como base a SMGL, uma linguagem de marcação da qual o HTML herda os principais componentes. A grande diferença entre ambas, na época, foi um elemento de âncora, representado por uma tag “a”. Essa pequena característica é a responsável pelos links da internet e permite conectar páginas entre si. Ou seja, ele é essencial para a construção de um site completo.

Conheça as versões do HTML

Desde a sua criação, o HTML evoluiu muito até chegar à versão atual. Logo no início, em 1995, a versão 2 foi a primeira versão a ser lançada após a criação do HTML puro e foi apresentada como um avanço, com foco em formalizar as características da ferramenta recém-criada.

Em 1997, a versão 3.2 permitiu a criação de tabelas e texto flutuante ao redor de imagens. Em 1999, por sua vez, chegamos até a versão 4.01, com suporte a mais opções de personalização e estilo, além de recursos multimídia.

De 2014 para cá, estamos utilizando a versão 5. Essa atualização garante suporte a áudio e vídeo, utiliza banco de dados da web e permite novos tipos de formulários. Além disso, ela acrescenta um valor semântico maior aos componentes. Ou seja, permite criar códigos mais limpos e organizados que informem com mais clareza os objetivos de cada elemento.

Como o HTML funciona?

O HTML trabalha lado a lado com os navegadores da internet e os sistemas de mecanismos de busca. Depois que o código de uma página está pronto, o navegador interpreta as informações e renderiza o site visualmente de acordo com as instruções. Assim, a pessoa que acessa consegue visualizar as informações, disponíveis em forma de texto, formas, imagens e outros recursos.

Contudo, para que um site funcione normalmente, é preciso contar com várias páginas HTML. Por exemplo, geralmente em um menu com “Sobre Nós”, “Contato” e “Serviços”, cada um desses componentes é uma página separada. 

Hospedagem e acesso

Ainda assim, um site só fica aberto para a internet quando é hospedado em um servidor. Isso acontece quando os arquivos HTML são transferidos para uma máquina específica que fica responsável por responder solicitações de acesso na rede. Quando alguém digita um endereço na barra de endereços, encontra esse servidor. 

Esse computador especial então se comunica com o sistema do usuário e envia as páginas em pacotes para serem interpretadas e reconhecidas pelo navegador.

Exemplificando: ao digitar “https://www.betrybe.com/”, você envia uma mensagem ao servidor que hospeda nosso site na web. Quando a conexão é feita com esse servidor, ele envia os arquivos contendo a estrutura, as páginas e os componentes (botões, menus, imagens, texto), exatamente onde estão no código. Assim, você consegue acessar o nosso website, transitar entre páginas e ler informações. 

HTML: Mecanismos de busca

Quando você digita uma palavra em um mecanismo de busca, vários resultados aparecem com uma estrutura padronizada, não é mesmo? Surgem um título e uma pequena descrição do conteúdo da página. Essas informações são fornecidas pelo HTML de cada página.

Assim, uma pessoa que busca uma informação qualquer na web, consegue encontrar os sites corretos. 

HTML: SEO

SEO significa Search Engine Optimization ou otimização para mecanismos de busca. Na prática, são várias estratégias que, usadas em conjunto, ajudam o seu site a ter uma melhor posição nos resultados de uma busca. O HTML auxilia nessas estratégias, pois ele que dá significado a cada parte da página e “explica” isso para o mecanismo de busca. 

HTML: Semântica

O HTML ajuda a dar significado aos conteúdos da sua página. Não somente para mecanismos de busca, mas também para auxiliar pessoas que usam leitores de tela ou outras pessoas programadoras que terão que mexer no seu código. 

Em quais áreas da programação o HTML é usado?

HTML no desenvolvimento frontend

Como já dissemos antes, o HTML não é uma linguagem de programação, e sim uma linguagem de marcação. Então, ele está principalmente na parte visual das aplicações, na parte do frontend. Em conjunto com o CSS e o Javascript, formam a base do frontend e das páginas web! 

HTML no desenvolvimento mobile

Também é possível criar aplicativos mobile usando HTML. É o que chamamos de desenvolvimento híbrido, pois, usando HTML, CSS e Javascript, é possível criar aplicativos tanto para Android como para IOS com um só código. 

HTML no desenvolvimento de jogos

Da mesma forma que o Javascript é usado para o desenvolvimento de jogos, aqui também entra o HTML. Nessa página você pode conferir alguns frameworks HTML e Javascript para desenvolver jogos.

Antes de prosseguir, aproveite e faça o download da trilha de front-end abaixo para entender os múltiplos caminhos que um profissional pode se especializar na área, que vai além dos conhecimentos em HTML.

Criando sua primeira página HTML: Hello World, o passo a passo!

Criar uma página HTML é muito simples e não exige muitos requisitos do seu computador. Para criar sua primeira página você vai precisar apenas de um editor de texto. Alguns dos exemplos mais conhecidos que você pode baixar são: Visual Code Studio, Atom, Sublime Text ou até mesmo um bloco de notas do seu computador.

Após baixar o seu editor de texto preferido, abra-o e crie um novo arquivo (em Arquivo -> Novo Arquivo). Nesse arquivo cole o código abaixo:

 
 
  
   
Hello World!
 

Ao longo desse post, você entenderá melhor o que significa cada linha, cada tag e como estruturar melhor seu HTML, por enquanto vamos apenas terminar o seu primeiro “Hello World”.

Agora, basta você salvar o arquivo em Arquivo -> Salvar como e salve seu arquivo como “index.html”. Aqui, o importante é a extensão do arquivo ser .html. É isso que vai mostrar para o navegador que o seu arquivo precisa ser lido no formato HTML.

Depois disso, vá até a pasta que você salvou seu arquivo e clique duas vezes nele. Se o seu navegador não abrir em uma página em branco escrito “Hello World”, vá no arquivo, clique com o botão direito em “Abrir com” -> seu navegador. Pronto! Você fez o seu primeiro Hello World em HTML!

Quais os 3 frameworks frontend mais usados em HTML?

Bootstrap

Um dos frameworks mais famosos do mundo frontend. Foi criado em 2011 por dois engenheiros do Twitter e ganhou diversas novas versões ao longo dos tempos. Tem uma documentação bem completa, comunidade bem ativa e diversos modelos de componentes HTML, CSS e Javascript. 

Foundation

É um framework muito utilizado e que é pensado para páginas responsivas. Ele segue os princípios de mobile first, o que fica adaptado para diferentes tipos de telas e deixa um código mais enxuto.

Materialize

É um framework que usa o Material Design do Google como base para cores, ícones e formatos. Ele também é considerado bem leve e agradável de usar, além de ter vários recursos visuais mobile, como o menu de arrastar. 

Pure

É um dos frameworks mais leves e simples, que usa apenas HTML e CSS puros, não usa Javascript. Isso faz com que ele não tenha muitas animações e efeitos. Ele também é totalmente modular, o que permite importar apenas o que você vai precisar utilizar. 

O que são Atributos, Elementos e Tags?

A linguagem de marcação utiliza algumas denominações para identificar os diferentes itens da estrutura HTML. É importante entender a diferença e a relação existentes entre cada um deles. Veja, a seguir, a definição e como funcionam os comandos HTML.

Tags 

A tag, que em português significa etiqueta, representa a denominação de um elemento. Ela funciona como um rótulo para indicar qual a função daquele conteúdo e deve ser escrita entre os símbolos “<” e “>”, como

. As tags podem ser utilizadas sozinhas ou em conjunto com a tag de fechamento, em que há a adição do caractere “/”, como

.

A utilização da tag de fechamento varia de acordo com a obrigatoriedade exigida pelo elemento que ela representa. Por exemplo, a tag

deve ser utilizada em conjunto com a tag

para indicar onde começa e termina o conteúdo de um formulário. O mesmo vale para muitos outros elementos.

Elementos

O elemento HTML representa um item presente na página, como um parágrafo, uma imagem, um link, um formulário e outros recursos da página. Ele pode ou não ser formado pelo conjunto de tags de abertura e de fechamento. Como mencionamos, essa condição varia de acordo com a obrigatoriedade e a necessidade de delimitação do conteúdo do elemento. Existem duas classificações para os elementos:

• elementos de bloco: que são isolados pela adição de uma linha antes e após a exibição do conteúdo e ocupam toda a largura disponível. Por exemplo, as tags:

  ,

  ,

  , ,

  etc.;

  elementos inline: ocupam apenas o espaço correspondente ao que será inserido na tela. Fazem parte desse grupo os elementos , , , , entre outros.

  Atributos 

  Os atributos pertencem às HTML tags. Na prática, eles representam as características e as funcionalidades que cada elemento pode ter. Uma imagem, por exemplo, tem o atributo alt, que permite adicionar um texto alternativo para ser exibido caso haja alguma falha no carregamento do arquivo.

  É importante dizer que existem atributos que funcionam de forma igual para todos os elementos, que são os chamados atributos globais, como o id, style, class etc. Também temos os atributos específicos de cada elemento, como o atributo alt, que mencionamos e só está disponível para o elemento .

  Conheça algumas tags do HTML!

  A linguagem de marcação contém uma série de tags que possibilitam a criação de conteúdos com diferentes funcionalidades. Nos próximos tópicos mostraremos alguns elementos HTML.

  HTML table

  A tag HTML table tem a função de criar tabelas em uma página. Seu objetivo é exibir dados de forma estruturada, com linhas e colunas. Por isso, necessita da tag de fechamento

  . O elemento é utilizado em conjunto com outros elementos complementares para criar as linhas e colunas necessárias para a construção da tabela, como as tags ,

  , entre outras. Além disso, podemos utilizar tags e atributos para deixá-la ainda mais organizada, como com a inserção de cabeçalho, legenda e rodapé. HTML image  O elemento img HTML é utilizado para inserir imagens na página e pode ser aplicado para HTML background image, por exemplo. Ela oferece uma série de atributos, como o usemap, que permite definir áreas clicáveis na imagem e o referrerpolicy, que ajuda a proporcionar mais segurança quando acessamos imagens de domínio cruzado, ou seja, de uma origem diferente do site atual. HTML select  O elemento HTML select funciona como um menu suspenso com uma lista de opções, por isso pode ser utilizado em caixas de listagem. Ele permite a seleção de um ou mais itens, além da possibilidade de iniciar o controle com itens pré-selecionados e agrupados por categorias. HTML button  A tag HTML button é utilizada para inserir botões em uma página e pode ser inserida dentro ou fora de formulários. O elemento button permite a utilização de outros elementos internamente, como imagem e texto, o que amplia a possibilidade de formatação de sua aparência. HTML form  O elemento HTML form é utilizado para a criação de formulário HTML e tem a finalidade de interagir com a pessoa usuária da aplicação web. Todo o conteúdo inserido entre as tags de abertura e fechamento pertencem a ele. O formulário pode conter diferentes tipos de elementos. Entretanto, alguns são usados com mais frequência, como o para adicionar um rótulo antes de cada campo do formulário e o , que falaremos mais adiante. HTML link  O HTML é usado para fazer uma ligação entre o documento atual e um conteúdo externo, que pode ser um arquivo de folha de estilos CSS, um documento de ajuda sobre o conteúdo da página, a indicação do arquivo utilizado como favicon e muitas outras possibilidades. A tag deve ser inserida na parte da página e não necessita de tag de fechamento. Comentário HTML Para adicionar um comentário HTML em uma página utilizamos um conjunto de tags que é formada pelos símbolos: “” para indicar o término da área referente ao comentário. HTML checkbox O HTML checkbox é um tipo disponível do elemento utilizado para oferecer opções de escolha à pessoa usuária em conteúdos que requerem a interação. O controle pode ser configurado para permitir a seleção de um ou mais itens – o que o diferencia do type de input radio, que possibilita apenas a seleção de uma alternativa por vez. HTML input  O elemento HTML input é utilizado para permitir a interação com a pessoa usuária. Por ter essa característica, contém um atributo chamado type, que faz a diferenciação sobre qual tipo de informação a aplicação receberá. Ele contém diversas alternativas e cada uma possui atributos característicos à sua funcionalidade. Os types de input são: button; checkbox; color; date; datetime-local; email; file; hidden; image; month; number; password; radio; range; reset; search; submit; tel; text; time; url; week. iframe HTML O iframe HTML é um elemento utilizado quando desejamos exibir conteúdos de outros sites na página. Ele funciona como uma pequena janela para um conteúdo externo e pode ser configurado para oferecer mais segurança na comunicação e evitar que códigos maliciosos se aproveitem desse caminho para acessar a página. Um exemplo do uso de iframe é para inserir HTML vídeo de sites como o YouTube. HTML div O HTML div é um elemento utilizado para organizar o conteúdo da página. Por isso, uma de suas aplicações é para a definição do layout da página. Basicamente, ele funciona em conjunto com a aplicação de estilos CSS, que são usados para adicionar características a ele, como para definir a cor de fundo, a largura e a altura, a visibilidade e o posicionamento. Qual a estrutura básica do HTML? Uma vez que você já conhece as tags, podemos partir para a estrutura básica de todo documento HTML. Não importa a sua função, todos os arquivos deverão possuir esses elementos por padrão.        Primeiro Cabeçalho : não é uma tag, é uma declaração que informa ao navegador qual a versão do HTML que é utilizada no arquivo. Essa é a forma de declarar o HTML5, a última versão.  : essa tag informa para o navegador que esse é um documento HTML e todo o conteúdo dentro dele que será interpretado pelo navegador. Todos os elementos ficam dentro dessa tag, com exceção de .  : é o primeiro elemento dentro da tag < html > e contém os metadados da página, ou seja, as informações que geralmente não aparecem para o usuário final.