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 HTMLhtml - O elemento html, ele engloba todo o código HTML desta páginahead - 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áginabody - O elemento body, todo conteúdo que for dentro dele aparece no corpo do nosso documentometa charset="utf-8" - A meta-tag charset, ela indica que, neste caso, estamos utilizando a codificação de caracteres UTF-8title - No elemento title colocamos o título da página, que aparece logo acima, nas abas do navegadorimg - Como comentamos acima, o elemento img renderiza imagens, o atributo src armazena o caminho da imagemh1 - 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:
Comentários