O HTML está entre as linguagens de programação mais utilizadas em projetos digitais. Isso porque é ela quem dá forma, estrutura e organiza o conteúdo em texto de um ambiente. Entender como essa linguagem funciona é fundamental para quem quer trabalhar com tecnologia, desenvolvendo soluções web.
Neste artigo, você vai entender o que é HTML, qual a sua função e terá acesso ao básico para começar a estudar e se aprofundar no tema. Continue lendo este artigo e aprenda mais sobre essa linguagem de programação tão utilizada no mercado.
O que é HTML e qual é a sua função?
Hypertext Markup Language (HTML) é, na verdade, uma linguagem de marcação, que oferece a base para a construção de páginas na web. Esse código é utilizado para criar as estruturas das páginas e inserir o conteúdo nelas, assim, é possível organizar todo o conteúdo em parágrafos. A estruturação em HTML permite a inserção de imagens, tabelas e outros recursos de exibição de conteúdo.
Dessa forma, você vai ouvir falar bastante em linguagem de programação, referindo-se ao HTML, mas seus códigos são utilizados na marcação da estrutura do conteúdo. É importante destacar ainda que o HTML é utilizado em todos os sistemas web. Por esse motivo, seus códigos são os mais utilizados pelos desenvolvedores web, podendo ser utilizado em um site comum de apresentação apenas e até em uma aplicação SaaS (Software as a Service ou Software como um Serviço, na sigla em inglês), por exemplo.
Para que o código seja capaz de estruturar uma página na web, os documentos que são escritos em HTML são enviados pela internet para serem lidos por web browsers e outros programas. Os códigos são transformados em informações, como textos, imagens, links, cores etc.
No HTML, as marcações são feitas pelas tags, que especificam como cada informação vai aparecer na página. Todos os documentos em HTML devem ser estruturados do começo ao fim com as tags de marcação.
Como é a anatomia de um documento em HTML?
Para começar um documento em HTML é preciso, antes de mais nada, entender como é a sua anatomia. Ou seja, quais elementos são necessários para construir a estrutura que vai formar o site ou solução web. Os elementos devem ser combinados para que a página seja estruturada. Veja a seguir como é a estrutura e qual é a importância de cada elemento.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minha página de teste</title>
</head>
<body>
<img src="imagens/firefox-icon.png" alt="minha página de teste">
</body>
</html>
Entenda a função de cada elemento:
- <!DOCTYPE html> — é onde o documento começa. Esse código de marcação é obrigatório para começar a estrutura. Logo que HTML foi criado e começou a ser utilizado no desenvolvimento de estruturas web, os doctypes funcionavam como links para um conjunto de regras que a página tinha que seguir. Só assim seria considerada como um bom HTML. No entanto isso mudou, hoje são usados apenas para garantir o comportamento certo do documento.
- <html></html> — envolve todo o conteúdo da página e também é considerado como elemento raiz.
- <head></head> — funciona como um recipiente de tudo o que será colocado na página HTML e que não é o conteúdo, mas que você quer mostrar para o usuário. Por isso, pode contar com palavras-chave e uma descrição, por exemplo, além de código CSS para dar estilo ao conteúdo etc.
- <meta charset=”utf-8″> — vai definir qual é o conjunto de caracteres que seu documento deve usar para o UTF-8. Isso inclui quase todos os caracteres da maioria dos idiomas escritos. Esse elemento permite manipular qualquer conteúdo em texto que você colocar na estrutura. Essa definição vai te ajudar a evitar problemas no futuro.
- <title></title> — o title define o título que vai aparecer na guia do navegador quando a página for carregada. Além de também descrever a página quando for adicionada aos favoritos.
- <body></body> — esse elemento reúne todo o conteúdo que o público vai ver, podendo conter texto, imagens, vídeos, jogos, faixas de áudio etc.
Entendendo os elementos da anatomia de um HTML
A estrutura de um HTML depende de alguns elementos para que a sua anatomia seja formada. A seguir, você vai ver quais são as principais partes de um elemento e qual a função de cada um.
Tag de abertura: é formada pelo elemento entre parênteses angulares de abertura e fechamento, como por exemplo: <p>. O elemento mostra onde começa uma anatomia. No caso do p é onde começa o parágrafo.
Tag de fechamento: tem a mesma função da tag de abertura, porém indica o fechamento da anatomia e é acompanhado de uma barra antes do elemento, como por exemplo: </p>. Essa é a indicação de que o elemento, nesse caso o parágrafo, acabou. É bastante comum que pessoas iniciantes em HTML esqueçam de fechar a tag, o que leva a um resultado incorreto.
Conteúdo: é apenas o texto que vai dentro do elemento. Você pode, por exemplo, começar o parágrafo <p> colocar uma informação e fechar o parágrafo </p>.
Elemento: é formado pela tag de abertura, tag de fechamento e pelo conteúdo, mas também pode ser formado por atributos. Atributos são informações extras sobre o elemento, que não serão mostrados no conteúdo. Por exemplo, class é o nome do atributo e editor-note é o valor do atributo. O atributo class permite aplicar informações sobre o estilo ao elemento, por exemplo.
A estrutura de um atributo deve ter: espaço entre o atributo e o nome do elemento ou do atributo anterior, caso o elemento já tenha um. O nome do atributo deve vir depois do sinal de igual (=), além de ter aspas de abertura e fechamento envolvendo o valor do atributo.
Você não precisa usar aspas em valores de atributos simples, que não têm espaço em branco ASCII (codificação usada para representar textos) ou os caracteres “ ‘ ` = < >. Porém, é mais indicado colocar aspas em todos os valores de atributos. Assim, seu código ficará mais consistente e fácil de compreender.
Como colocar os elementos dentro de outros elementos?
O aninhamento acontece quando elementos são colocados dentro de outros elementos. Se o objetivo do conteúdo é enfatizar alguma informação dentro do conteúdo, você pode criar destaques dentro da frase usando outros elementos. Nesse caso, basta envolver a palavra que quer enfatizar no elemento <strong>, que deixa o texto destacado. Vamos a um exemplo:
<p>Receber transferências internacionais com a Remessa Online é <strong>muito fácil </strong>.</p>
Para que a página mostre a informação da forma correta, é preciso se certificar de que os elementos estão aninhados. Por isso, começamos a frase abrindo o elemento <p>, em seguida adicionamos o elemento <strong>. O próximo passo é fechar o elemento <strong> logo após terminar o trecho que desejamos enfatizar. Em seguida, é só fechar o elemento <p>.
Abrir e fechar os elementos corretamente vai garantir que eles sejam transmitidos de forma clara ao usuário do ambiente. Quando os elementos não são devidamente marcados, o navegador vai tentar descobrir o que foi construído na estrutura e reportar erros.
O HTML é uma estrutura bem completa para construir a anatomia de um site. São tantas informações que não seria possível colocar todas as orientações neste conteúdo, se você quer aprender mais sobre HTML como, por exemplo, aplicar cores em suas tags, confira este outro conteúdo!