O que é HTML: entenda o que significa e para que serve

Existem inúmeras linguagens web disponíveis, mas muitas pessoas têm dúvidas sobre o que é HTML.

Quem não é familiarizado com o design da rede costuma perguntar se esse é algum tipo de linguagem de programação. A resposta é: não, não é. Em vez disso, HTML é uma linguagem de marcação que consiste em tags e atributos que informam ao navegador como renderizar a página da web.

what is html

A primeira versão do HTML foi sugerida por Tim Berners-Lee – o pai da World Wide Web –, sendo lançada em 1990 e 1991, mas, até 1995, não foi este HTML que foi oficialmente reconhecido como um padrão a ser suportado por navegadores e outros softwares da web. Isso foi o HTML 2.0.

Atualmente, o padrão mais popular é o 4.01 (publicado em 1999), sendo que os webmasters já estão aguardando impacientemente pelo 5.0, que promete uma série de novas ferramentas, capaz de tornar as páginas da web ainda mais elaboradas e atraentes.

Interessou-se pelo assunto e quer saber mais? Continue a leitura!

O que significa e para que serve o HTML?

HTML significa HyperText Markup Language ou linguagem de marcação de hipertexto. A linguagem HTML é usada para criar documentos eletrônicos, chamados de páginas web, exibidos na World Wide Web. Cada documento pode conter links para outros domínios ou outras páginas com códigos HTML.

Esse código garante a formatação adequada de texto e imagens, de modo que o navegador possa exibi-los corretamente. Sem HTML, um navegador não saberia exibir textos como elementos ou carregar imagens.

Ele também fornece uma estrutura básica de página, sobre a qual as Folhas de Estilo em Cascata são sobrepostas, alterando sua aparência. Pode-se pensar no HTML como o responsável pela estrutura de uma página da web.

Como funciona a linguagem HTML?

Como trata-se de uma linguagem de marcação, os dados são encapsulados ou “marcados” nos elementos HTML, que os definem e descrevem sua finalidade na página da web.

O navegador, então, lê o código HTML, que diz a ele quais partes correspondem aos títulos, aos parágrafos, aos links etc. O HTML descreve os dados para o navegador, que os exibe de acordo com as instruções.

Principais Tags HTML

As tags são usadas para marcar o início e o fim de um elemento HTML. Trata-se de palavras-chave ocultas em uma página da web, que definem como o navegador deve formatar e exibir o conteúdo.

A maioria das tags deve ter duas partes: uma de início e outra de fechamento. Algumas, porém, são exceções dessa regra e não necessitam de fechamento. A tag <img> que serve para mostrar imagens é um exemplo disso.

Cada arquivo HTML deve ter as tags essenciais para que seja válido e, assim, os navegadores possam entendê-lo, exibindo-o corretamente. O restante do arquivo pode conter o número mínimo (ou o que você deseja exibir) de tags.

Tags de cabeçalho

Qualquer documento começa com um título — que pode ter diferentes tamanhos. O HTML também tem seis níveis de títulos, que usam os elementos <h1> até <h6>. Ao exibir qualquer cabeçalho, o navegador adiciona uma linha antes e outra após esse título.

O que é HTML - Tag de cabeçalho

Tag de parágrafo e quebra de linha

A tag <p> é uma maneira de estruturar seu texto em parágrafos diferentes. Cada parágrafo do conteúdo deve vir entre uma abertura <p> e um fechamento </p>.

Ao usar o elemento <br>, qualquer conteúdo que vier depois começará na próxima linha. Essa tag é um exemplo de elemento vazio, no qual você não precisa abrir e fechar tags, pois não há nada entre elas.

O que é HTML - Parágrafo e quebra de linha

Nota: a tag <br /> pode ter um espaço entre os caracteres "br" e a "/". Ao omiti-lo, os navegadores mais antigos terão problemas em renderizar a quebra de linha; já se você perder o caractere de barra e usar o <br>, ele não será válido em XHTML.

Elementos HTML

Um elemento em HTML representa algum tipo de estrutura ou semântica e, geralmente, consiste em uma tag de início, um conteúdo e uma tag de finalização. É usado para identificar as propriedades de um documento (autor, data de expiração, palavras-chave etc.) e atribuir valores a elas.

Exemplo de um elemento HTML:

<a href="https://www.google.com">Google</a>

Junto às tags, os elementos HTML trabalham para marcar o conteúdo. Eles indicam o propósito de uma tag — que, por sua vez, mostra o início e o fim de um elemento.

Existem dois tipos de elementos:

Elementos em nível de bloco (block)

Os elementos em blocos são estruturais na página que representam (parágrafos, listas, menus de navegação e rodapés, por exemplo). Um elemento em nível de bloco não seria colocado dentro de um em linha, mas poderia ser inserido em outro elemento de nível de bloco.

Elementos em nível de bloco:

  • <p>
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <ol>, <ul>
  • <pre>
  • <address>
  • <blockquote>
  • <dl>
  • <div>
  • <fieldset>
  • <form>
  • <hr>
  • <noscript>
  • <table>

Elementos em linha (inline)

Já os elementos em linha estão localizados dentro dos elementos em nível de bloco. Eles envolvem apenas algumas partes do conteúdo (e não parágrafos completos). Quando escritos em sequência, esses elementos são exibidos lado a lado.

Elementos em nível de linha:

  • <b>, <big>, <i>, <small>, <tt>
  • <abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, <var>
  • <a>, <bdo>, <br>, <img>, <map>, <object>, <q>, <script>, <span>, <sub>, <sup>
  • <button>, <input>, <label>, <select>, <textarea>

Abaixo, você pode visualizar a diferença na exibição dos elementos de bloco e de linha:

O que é HTML - Elemento de nível de bloco e linha

Os tipos dos elementos podem ser modificados com CSS, assim é possível tornar um elemento de nível de bloco em um elemento de nível de linha e vice-versa.

Atributos HTML

Um atributo HTML refere-se a uma característica de um elemento HTML. Os atributos HTML fornecem informação adicional para um elemento, permitindo a modificação do mesmo. Algumas coisas para saber sobre os atributos HTML:

  • Todos os elementos HTML podem ter atributos;
  • Alguns atributos funcionam somente em elementos específicos;
  • Os atributos são definidos após a abertura das tags;
  • Os elementos geralmente possuem um par de nome e valor.

Os atributos são principalmente úteis ​​para utilizar os recursos de um elemento. Quando um navegador interpreta os elementos, procura por seus atributos para exibir a página corretamente.

Por exemplo, o elemento <textarea> possui atributos como "cols", que determina o número de colunas e "rows", que determina o número de linhas de um campo de texto. Esses atributos são exclusivos ao <textarea>, não tendo efeito em outros elementos.

O que é HTML - Atributos HTML

No exemplo acima, você pode também pode ver os atributos "disabled" e "hidden" no elementos <button>. O atributo hidden é um atributo global e pode ser usado com qualquer elemento, já o atributo hidden pode ser usado em outros elementos além do <button>, como o <option> e o <select>.

Atenção: para personalizar cores e estilos dos elementos, recomenda-se o uso de CSS. O HTML fica responsável pela estrutura da página.

Criando o primeiro código HTML

Para entender melhor o que é HTML, você pode criar o seu próprio código com as tags e elementos que vimos no artigo. Vamos lá?

  1. Abra o seu editor HTML favorito com um arquivo vazio e nomeie esse arquivo de index.html (atenção para a extensão do arquivo, que deve ser .html);
  2. No Windows, você pode usar o bloco de notas, no macOS o TextEdit, e se estiver no Linux, você pode usar o gedit ou Kate;
  3. Insira o seguinte código no seu arquivo:
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>Meu primeiro código HTML</title><!-- Título da página, que aparece na janela/aba !-->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Meu primeiro código HTML</h1><!-- Primeiro título da página !-->
    <p>Paragráfo em um <strong>codigo</strong> de um documento HTML!</p><!-- Um elemento de parágrafo !-->
  </body>
</html>

Note que o texto entre <!-- e !--> não é exibido pois se trata de um comentário, que serve apenas para informar sobre uma parte do código do HTML.

Depois disso, você pode abrir o documento HTML no seu navegador e visualizar a página criada.

E então? Gostou de descobrir o que é HTML? Confira também o nosso artigo que explica o que é CSS e saiba como estilizar os seus documento HTML!

Melhor Hospedagem de Sites é um projeto com o objetivo de ajudar as pessoas na busca pelo lugar ideal para hospedar seus sites, trazendo informação e conhecimento sobre o universo de hospedagem de sites.
Deixe um comentário

  1. Anli Carlitos imagem Anli Carlitos
    3 de abril de 2019
    Responder

    bom dia Dr estou aulas de html.

Receba os artigos do blog por e-mail: