O que é HTML e qual sua funcionalidade?

O HTML é parte fundamental das normas da web, em conjunto com outras tecnologias como o CSS e o JavaScript. Já que essa linguagem é a base para a construção de páginas, é importante conhecê-la para criarmos o nosso próprio site na internet.

Atualizado em: 12/02/2021
O que é HTML e qual sua funcionalidade?

Precisando de conteúdo para sua empresa? Encontre os melhores escritores em WriterAccess!

As páginas web (sejam sites, blogs ou landing pages) são ferramentas de divulgação de informação com as mais variadas finalidades: desde difundir conhecimento até gerar oportunidades de negócio. Seja qual for o intuito, todas elas têm em comum a linguagem com a qual são construídas: o HTML.

Como veremos, não se trata de uma linguagem de programação e é bastante simples de entender. Continue a leitura e veja como construir uma página web é mais fácil do que parece!

Confira os assuntos que vamos tratar neste post:

 

O que é e para que serve o HTML?

HTML é a sigla em inglês para Hypertext Markup Language, que traduzimos para o português como linguagem de marcação de hipertexto.

Apesar dos nomes complicados, o HTML nada mais é que uma linguagem usada para criar páginas web por meio de marcadores (tags) e atributos, que definem como o conteúdo deve ser apresentado em um navegador web.

Mas você deve estar se perguntando: o que é um hipertexto? Esse conceito faz referência a um texto com blocos interconectados contendo palavras, imagens, sons, tabelas e outros elementos. Além disso, eles podem ter caminhos que apontam para outros hipertextos, caminhos esses conhecidos como hiperligações, hyperlinks ou apenas links.

A criação do HTML é atribuída a Tim Berners-Lee, o inventor da World Wide Web.

A ideia era criar um ambiente em que cientistas pudessem divulgar suas pesquisas para que seus colegas pudessem consultá-las com facilidade. Berners-Lee acabou criando o HTML como linguagem padrão para elaborar esses documentos.

Desde a sua implementação, no início dos anos 1990, o HTML passou por diversas melhorias e hoje é o alicerce de blogs, e-commercesredes sociais e todo o tipo de página acessível de um navegador web.

Confira também estes conteúdos:
Entenda o que é CSS e quais as suas funções na internet
Captcha: saiba o que é e como colocá-lo no site do seu negócio
Wireframe: quais os tipos e as principais ferramentas de criação
 

Quais são os principais elementos do HTML?

Agora que você já sabe o que é o HTML, vamos ver os principais marcadores que definem a função dos elementos que fazem parte da página.

Mas antes precisamos lembrar que essas tags são identificadas com um sinal de menor que (<), seguido pelo nome da tag e um sinal de maior que (>). A maior parte das tags precisa ser fechada, o que representamos com uma barra (/) entre o sinal “<“ e o nome da tag.

Tudo ficará mais claro com os exemplos a seguir.

Parágrafo (<p>)

A tag <p> deve ser aberta e fechada para definir um parágrafo.

<p>Este é um parágrafo em HTML.</p>

Cabeçalho (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)

As heading tags, ou tags de cabeçalho, ajudam a criar uma hierarquia entre as partes do texto, separando-o em seções. O <h1> é o cabeçalho de maior relevância, seguido pelo <h2>, <h3> e assim sucessivamente até o <h6>, de menor importância.

<h1>Título principal</h1>
<p>Parágrafo de introdução.</p>
<h2>1. Primeiro intertítulo</h2>
<p>Parágrafo da primeira seção.</p>
<p>Mais um parágrafo da primeira seção.</p>
<h2>2. Segundo intertítulo</h2>
<p>Parágrafo da segunda seção.</p>
<p>Mais um parágrafo da segunda seção.</p>
<h2>3. Terceiro intertítulo</h2>
<p>Parágrafo da terceira seção.</p>
<h3>3.1. Intertítulo dentro da terceira seção</h3>
<p>Parágrafo da seção 3.1.</p>
<h3>3.2. Mais um intertítulo dentro da terceira seção</h3>
<p>Parágrafo da seção 3.2.</p>

Imagem (<img>)

A tag de imagem não precisa ser fechada, já que o seu conteúdo é definido na própria tag com o atributo “src”.

<img src="https://rockcontent.com/br/wp-content/uploads/sites/2/2019/09/twitter-cards.png">

Âncora (<a>)

A tag de âncora define um link para outra página. O atributo “href” determina o destino desse link.

<a href="https://rockcontent.com/br/blog/arquitetura-da-informacao/">Arquitetura da Informação</a>

Lista ordenada (<ol>)

Uma ordered list, ou lista ordenada, é exibida com elementos numerados. Cada elemento deve ser marcado com a tag <li> (list item).

<ol>
	<li>SEO</li>
	<li>Links patrocinados</li>
	<li>Redes sociais</li>
</ol>

Lista não ordenada (<ul>)

A tag unordered list, ou lista não ordenada, mostra os elementos como bulletpoints.

<ul>
	<li>Automação de marketing</li>
	<li>Geração de leads</li>
	<li>E-mail marketing</li>
</ul>

Tabela (<table>)

A tag de tabela exibe informações no formato de linhas e colunas. Dentro da tag <table>, usamos as tags <tr> para representar as linhas, <th> para representar os cabeçalhos e <td> para representar cada célula.

<table>
	<tr>
    	<th>Nome</th>
    	<th>Sobrenome</th>
  	</tr>
	<tr>
  		<td>Jonah</td>
    	<td>Berger</td>
  	</tr>
  	<tr>
  		<td>Ann</td>
    	<td>Handley</td>
  	</tr>
  	<tr>
    	<td>Neil</td>
    	<td>Patel</td>
  	</tr>
</table>

Comentário (<!– –>)

Usamos esta tag para escrever algum comentário que ajude no entendimento do código. Tudo que estiver escrito entre os marcadores <!– e –> não será mostrado ao usuário.

<p>O HTML é fundamental para quem deseja criar um site na web.</p> <!-- Este é um parágrafo em HTML -->
 

Como é a estrutura básica de um documento do tipo?

Vimos diversos elementos, mas agora vamos saber como colocá-los dentro de um código HTML. Como qualquer padrão da web, é necessário seguir algumas regras para a construção desses códigos.

Começamos com a declaração <!DOCTYPE html>, para informar ao navegador web que o documento em questão é um HMTL.

Em seguida, abrimos a tag <html>, que precisaremos fechar no fim. Dentro dela, adicionamos <head>, que deverá conter os metadados (dados sobre dados) da página, como o título que vai aparecer na aba do navegador (<title>), chamadas para arquivos externos e outras meta tags cruciais para um trabalho de SEO.

É importante incluir a tag <meta charset=”utf-8″> para que o navegador exiba corretamente certos caracteres que utilizamos em português, como acentos e cedilha.

Por fim, abrimos a tag <body>, em que adicionamos a parte do documento HTML que contém os elementos visíveis para o usuário.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Minha primeira página</title>
	</head>
	<body>
		<h1>Minha primeira página</h1>
		<p>Meu primeiro parágrafo!</p>
	</body>
</html>
 

Como criar o seu primeiro código em HTML?

Para criar um código HTML, você só precisa de um editor de texto simples (o Bloco de Notas, por exemplo) e de um navegador web (Chrome, Opera, Firefox, Safari, etc.) para visualizar como vai ficar a sua página. Desenvolvedores profissionais usam editores de código mais especializados, mas podemos seguir inicialmente com um editor simples.

O primeiro passo é criar um novo arquivo e salvá-lo com a extensão .html. Para este tutorial, podemos dar o nome de index.html.

Depois, cole o código que mostramos na seção anterior com a estrutura básica de um HTML e salve o arquivo.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Minha primeira página</title>
	</head>
	<body>
		<h1>Minha primeira página</h1>
		<p>Meu primeiro parágrafo!</p>
	</body>
</html>

Agora é só abrir o arquivo no seu browser preferido e pronto, você acabou de criar o seu primeiro código HTML!

 

Qual é a relação entre HTML, CSS e JavaScript?

Entendemos que o HTML é a estrutura de uma página web, mas como formatar o estilo de seus elementos? Para configurarmos fontes, cores, alinhamento, enfim, a forma como os componentes HTML serão apresentados, utilizamos o CSS, sigla para Cascading Style Sheets, ou folhas de estilo em cascata.

Apesar de ser possível descrever os estilos dentro do próprio código HTML, é recomendável que o HTML faça uma chamada a um ou mais arquivos CSS individuais. Assim, o código fica mais organizado, já que isola a estrutura do estilo.

O CSS se baseia em seletores e declarações com propriedades e valores. Ou seja, escolhemos os elementos HTML aos quais queremos aplicar os estilos e declaramos quais serão as propriedades desses componentes.

Veja neste exemplo o seletor de parágrafo (p), com uma declaração que define a cor, a família da fonte e o tamanho da fonte.

p {
	color: white;
	font-family: verdana;
	font-size: 15px;
}

Existe ainda uma terceira camada para o desenvolvimento de páginas web, dedicada a criar comportamentos dinâmicos: o JavaScript. Essa, que de fato é uma linguagem de programação — não confundir com Java —, permite dar mais interatividade à página e melhorar a experiência do usuário.

Com ele, conseguimos escolher o que acontece quando o visitante clica em determinada parte da página, aperta determinada tecla, rola a página e muito mais. As aplicações são inúmeras e dependem basicamente da criatividade de quem está desenvolvendo.

Inclusive, o JavaScript é excelente para quem deseja aprender a programar, já que a sintaxe da linguagem é bastante fácil. Além disso, é possível fazer testes imediatos, visualizando o resultado do seu código diretamente no navegador web.

Percebeu como o HTML é mais simples do que aparenta? Então continue os seus estudos, porque apesar da simplicidade, esse é um assunto riquíssimo, com muitas outras tags e atributos que não caberiam em um só post.

Gostou do artigo? Então confira esta aplicação que pode ser útil para o seu dia a dia. Aprenda como criar a sua própria assinatura de e-mail em HTML!

Compartilhe
facebook
linkedin
twitter
mail

CONTEÚDO CRIADO POR HUMANOS

Encontre os melhores freelancers de conteúdo no WriterAccess.

CONTEÚDO CRIADO POR HUMANOS

Encontre os melhores freelancers de conteúdo em WriterAccess.

Inscreva-se em nosso blog

Acesse, em primeira mão, nossos principais posts diretamente em seu email

Compre conteúdo de alta qualidade com a WriterAccess.

Tenha acesso a mais de 15.000 freelancers especializados em redação, edição, tradução, design e muito mais, prontos para serem contratados.

Fale com um especialista e amplie seus resultados de marketing.

A Rock Content oferece soluções para produção de conteúdo de alta qualidade, aumento do tráfego orgânico e conversões, e construção de experiências interativas que transformarão os resultados da sua empresa ou agência. Vamos conversar.