HTML Básico - Iniciando com HTML O HTML é a linguagem de marcação utilizada pelos navegadores web (e outros dispositivos) para renderizar páginas web. Seu nome vem de Hyper Text Markup Language, ou Linguagem de Marcação de Hyper Texto. Como é uma linguagem de marcação, sua sintaxe é composta de tags de marcação, essas tags são utilizadas para marcar os trechos de texto e informar para o documento que tipo de formatação esse texto segue. Além disso, as tag são utilizadas para renderizar outros tipos de conteúdos, como imagens e campos de formulários. Segue um exemplo básico de documento HTML válido:

<!DOCTYPE html>
<html>
<body>

<h1>Exemplo de cabeçalho</h1>
<p>Exemplo de parágrafo.</p>

</body>
</html>

Tags e Elementos

No exemplo acima, temos uma tag de parágrafo p, dentro dela temos o conteúdo deste parágrafo e ao final temos outra tag de fechamento /p. Esse conjunto de tags, atributos e conteúdo é chamado de ELEMENTO. Tags que possuam conteúdo interno necessitam de outra tag de fechamento, para indicar para o navegador o fim deste conteúdo. Outras tags não necessitam de fechamento, como o caso da tag img, que renderiza imagens na tela, segue um exemplo:

<img src="/imgens/imagem.jpg" alt="Imagem">

Atributos

Todos elementos HTML podem possuir atributos. Estes atributos são utilizados para passar informações de configurações dos elementos. Por exemplo, na tag img acima, utilizamos o atributo SRC para passar o endereço do arquivo que a imagem deve renderizar e utilizamos a tag ALT para passar um texto alternativo, caso a imagem não possa ser carregada. Por padrão, os atributos são escritos dentro das tags, com um título e um valor, que é escrito dentro de aspas duplas. Os atributos são separados por um espaço em branco. Tanto tags quanto atributos devem ser escritos em minúsculo.

<tag atributo="valor"></tag>

Elementos agrupados

Os elementos HTML podem ser agrupados uns dentro dos outros, isto gera uma hierarquia de tags e elementos e é uma das principais funcionalidades do HTML. Por exemplo, podemos utilizar a tag STRONG para indicar um trecho do texto em negrito dentro de uma tag de parágrafo:

<p>Esta palavra esta em <strong>negrito</strong></p>

Anatomia de um código HTML

Agora iremos verificar um exemplo simples de código HTML e analisar suas tags e elementos.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My test page</title>
	</head>
	<body>
		<img src="/imagens/logo.png" alt="Minha marca">
		<h1>Minha página HTML</h1>
	</body>
</html>
Neste código simples foi utilizado:
  • !DOCTYPE html - Indica o doctype do documento. Em navegador antigos este elemento era usado para passar informações do documento. Hoje em dia apenas indica o inicio do HTML
  • html - O elemento html, ele engloba todo o código HTML desta página
  • head - O elemento head, nele incluímos todos os arquivos que desejamos que o documento carregue mas que não devem aparecer visualmente no corpo da página
  • body - O elemento body, todo conteúdo que for dentro dele aparece no corpo do nosso documento
  • meta charset="utf-8" - A meta-tag charset, ela indica que, neste caso, estamos utilizando a codificação de caracteres UTF-8
  • title - No elemento title colocamos o título da página, que aparece logo acima, nas abas do navegador
  • img - Como comentamos acima, o elemento img renderiza imagens, o atributo src armazena o caminho da imagem
  • h1 - Tag de cabeçalho de nível 1, existem 6 níveis de cabeçalho que podem ser utilizados. O h1 é o de maior nível, representando, normalmente, o título da página.
Com este tutorial aprendemos o básico de HTML, suas tags, atributos e elementos básicos. Você pode aprender mais sobre os elementos HTML com nossa referência. Referência: