🖌️
Linguagens de Marcação
  • Linguagens de Marcação
  • Linguagens de Marcação
    • Introdução a Linguagens de Marcação
    • Padronização de tags
    • Exemplo de Linguagem de marcação
  • Material de apoio
    • Ambientes de desenvolvimento
    • Link do Codesandbox
    • Link do Repl.it
  • HTML
    • Introdução a HTML
    • Tags e elementos
    • Atributos e valores
    • Títulos e Parágrafos
    • Listas
    • Hyperlinks
    • URLs
    • Imagens
    • Áudio
    • Vídeo
    • Tabelas
    • Formulários
    • Metadados
  • CSS
    • Introdução a CSS
    • Seletores
      • Universal
      • Tipo
      • Identificador
      • Classe
      • Atributos
      • Filhos e descendentes
      • Pseudoclasses
      • Negação
    • Elementos de bloco e linha
    • Box Model
    • Textos e fontes
    • Grid Layout
    • Flexbox
    • Animações
Powered by GitBook
On this page
  • Definição de documento
  • Documento HTML
  • Cabeçalho
  • Corpo
  • Considerações finais

Was this helpful?

  1. HTML

Introdução a HTML

HTML significa em inglês: HyperText Markup Language. Em português: Linguagem de Marcação de Hipertexto. Tem como objetivo descrever a estrutura de uma página web por meio de uma linguagem de marcação e é a linguagem base da internet. Foi criada para ser de fácil entendimento por seres humanos e também por máquinas, como por exemplo o Google ou outros sistemas que percorrem a internet capturando informação.

  • Todos os documentos HTML são documentos de texto simples, geralmente com a extensão .html.

  • Podem ser criados e editados a partir de qualquer editor de texto.

  • É interpretado por navegadores, sejam eles em um computador, smartphone, TV, videogames, etc.

O documento HTML sempre inicia com o que chamamos de estrutura básica, que é mostrada no exemplo de código abaixo. Esta estrutura é quase que imutável.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8" />
        <title>Diogo Moreira - Meu site pessoal sobre música</title>
    </head>
    <body>
    
    </body>
</html>

É possível compreender o documento em HTML de uma maneira muito simples, através de uma divisão de blocos das tags essenciais, conforme a a seguinte estrutura:

  • Definição do documento (doctype)

  • Documento HTML (html)

  • Cabeçalho (head)

  • Corpo (body)

Definição de documento

A definição de documento sempre deve existir, que é este código <!DOCTYPE html>. Essa definição não é uma tag HTML, mas uma instrução para o navegador e outros programas que podem ler seu site, informando que o código que será encontrado ali é um código HTML. Assim, eles vão saber o que fazer para mostrar seu site da melhor forma possível.

Documento HTML

As tags <head> e <body> obrigatoriamente devem estar dentro de <html>.

Cabeçalho

Retomando o exemplo mostrado anteriormente, preste atenção nas seguintes linhas abaixo. Elas serão suficientes por enquanto.

<meta charset="utf-8" />
<title>Diogo Moreira - Meu site pessoal sobre música</title>

Na primeira linha, a tag <meta> representa um metadado. Nesse caso em específico ele está informando ao navegador qual o conjunto de caracteres que iremos usar. Por padrão, usamos UTF-8, que nos permite exibir qualquer caractere de qualquer língua, incluindo japonês, chinês, coreano e muitos outros.

Só é possível mostrar "こんにちは", ou seja, Konnichiwa (ou "Olá" em japonês), porque esse documento está sendo mostrado com o conjunto de caracteres "UTF-8".

Ao abrir um website qualquer no seu navegador, ele provavelmente será exibido em formato de aba no canto superior, informando o que está dentro da tag <title>. Já nos navegadores de celular, esse comportamento de abas não é padronizado. Na imagem abaixo é possível ver que o conteúdo de <title> foi ignorado. Embora ele seja um elemento obrigatório, a sua exibição fica a cargo dos navegadores/interpretadores.

Corpo

Trata-se do documento em si, ou seja, a informação legível para o usuário/leitor do documento. É todo e qualquer texto que se deseja apresentar, assim como toda e qualquer forma de mídia de saída (imagens, sons, vídeos, etc). Tudo que estiver no corpo do documento HTML deve ser exibido.

Além disso, toda a apresentação de entrada de dados (formulários) também se aplica nesta seção do documento. Na prática, o corpo do documento é delimitado pelo par de tags <body> e </body>.

Considerações finais

Este é o preceito básico que deve estar bem claro para você antes de sair desse módulo: onde as tags se aplicam, e quais são os resultados. Por exemplo: se vocês deseja informar conteúdo textual para saída legível ao usuário do seu website, esse texto com a sua respectiva marcação deverá obrigatoriamente estar no bloco do corpo da página (body). Ainda: para definir qual o tipo de codificação da página, devemos obrigatoriamente marcar isso no cabeçalho do mesmo documento (como vimos em <meta charset="utf-8">, que é uma meta informação do documento).

PreviousAmbientes de desenvolvimentoNextTags e elementos

Last updated 4 years ago

Was this helpful?

A tag <html> representa a raiz/o início de um documento HTML. Ele deve conter o atributo lang indicando em qual idioma o documento está escrito. No caso acima, estamos indicando que ele está escrito em Português do Brasil (pt-br). Uma lista com os códigos dos idiomas pode ser encontrado .

O cabeçalho (tag <head>) contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São dados implícitos, de uso e controle do documento: vinculação com outros arquivos, aplicação de lógica de programação e . Na prática, todo o conteúdo do cabeçalho fica delimitado entre a abertura e fechamento tag head.

Já na segunda linha, temos a tag <title> que informa qual o título do nosso site. Porém, esse título nem sempre é exibido para o usuário, por isso ele está dentro de <head>. Vamos ao exemplo, usando como caso de uso:

aqui
metadados
meu website
Exemplo de aba no navegador Firefox
Exemplo de website no navegador Safari