









Pesquisar
HTML
uma linguagem de marcação utilizada na construção de páginas na Web

 Língua
 Descarregar PDF
 Vigiar
 Editar
HTML (abreviação para a expressão inglesa HyperText Markup Language, que
significa: "Linguagem de Marcação de Hipertexto") é uma linguagem de
marcação utilizada na construção de páginas na Web. Documentos HTML podem ser
interpretados por navegadores. A tecnologia é fruto da junção entre os
padrões HyTime e SGML.

HTML
(Hypertext Markup Language)

 .html
Extensão do
 .htm
arquivo

MIME text/html

Type code TEXT

Desenvolvido W3C & WHATWG

por
 Tipo de Linguagem de marcação
formato

Padronização  ISO/IEC 15445

 W3C HTML latest
recommendation
 HTML Living Standard
 W3C HTML 5.1

Página oficial  [Link]/html/

 [Link]

HyTime é um padrão para a representação estruturada de hipermídia e conteúdo

baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes
dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações (em
inglês: hyperlink e link). O padrão é independente de outros padrões de processamento
de texto em geral.
SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas
tornou-se conveniente para transformar documentos em hiper-objetos e para descrever
as ligações.
História
editar

Tim Berners-Lee em 2008.

Tim Berners-Lee (físico britânico) criou o HTML original (e

outros protocolos associados como o HTTP), numa estação NeXTcube, usando o
ambiente de desenvolvimento NeXTSTEP. Na época, a linguagem não era uma
especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a
comunicação e disseminação das pesquisas entre ele e o seu grupo de colegas. A sua
solução, combinada com a então emergente internet pública (que tornar-se-ia
a Internet), ganhou atenção mundial.
As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que
ajudou aqueles sem familiaridade com a publicação na Web. Através do tempo, a
utilização de ferramentas para autoria de HTML aumentou, assim como a tendência em
tornar a sintaxe cada vez mais rígida. Apesar disso, por questões históricas
(retrocompatibilidade), os navegadores ainda hoje conseguem interpretar páginas web
que estão longe de ser um código HTML válido.
A linguagem foi definida em especificações formais na década de 1990, inspiradas nas
propostas originais de Tim Berners-Lee em criar uma linguagem baseada
em SGML para a Internet. A primeira publicação foi esboçada por Berners-Lee e Dan
Connolly e publicada em 1993 na IETF, como uma aplicação formal para o SGML
(com uma DTD em SGML definindo a gramática). A IETF criou um grupo de trabalho
para o HTML no ano seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as
especificações HTML vêm sendo mantidas, com o auxílio de fabricantes de software,
pelo World Wide Web Consortium (W3C).[1] Apesar disso, em 2000 a linguagem
tornou-se também uma norma internacional (ISO/IEC 15445:2000). A recomendação
HTML 4.01 foi publicada no final de 1999 pelo W3C. Uma errata ainda foi lançada
em 2001.
Desde a publicação do HTML 3.5 no final de 1997, o grupo de trabalho da W3C tem
cada vez mais — e de 2002 a 2006, de forma exclusiva — focado no desenvolvimento
do XHTML, uma especificação HTML baseada em XML que é considerada pela W3C
como um sucessor do HTML.[2][3][4] O XHTML faz uso de uma sintaxe mais rigorosa e
menos ambígua para tornar o HTML mais simples de ser processado e estendido.
Em janeiro de 2008 o W3C publicou a especificação do HTML5 como Working Draft.
Apesar de sua sintaxe ser semelhante à de SGML, o HTML5 abandonou qualquer
tentativa de ser uma aplicação SGML e definiu explicitamente sua própria serialização
"html", além de uma alternativa baseada em XML, o XHTML5.[5]
Várias versões HTML foram publicadas:[6]

Versão Ano

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

HTML5.1 2016 e 2017 (2ª ed.)

HTML5.2 2017
Marcas (tags)
editar

HTML element content categories

Todo documento HTML possui marcadores (do inglês: tags), palavras entre parênteses
angulares (chevron) ( < e > ); esses marcadores são os comandos de formatação da
linguagem. Um elemento é formado por um nome de marcador (tag), atributos, valores
e filhos (que podem ser outros elementos ou texto). Os atributos modificam os
resultados padrões dos elementos e os valores caracterizam essa mudança. Exemplo de
um elemento simples (não possui filhos):

<hr>

Exemplo de um elemento composto (possui filhos):

<a href="[Link]

 <a> é o marcador de abertura

 </a> é o marcador de fechamento

 href é o atributo onde é definido a url, que será acessada ao clicar no link.

Outro exemplo de elemento composto (possui filhos):

<a href="[Link] target="_self"><p>Wikipédia</p></a>

 p = marcador que define um parágrafo.

 a = marcador que define uma hiperligação.

 href = atributo que define a URL da hiperligação.

 target = atributo que define a forma como a hiperligação será aberta.

 _self = valor do atributo Target que define que a hiperligação será aberta na mesma
guia.
  / = define o fechamento do elemento

Isso é necessário porque os marcadores servem para definir a formatação de uma porção
do documento, e assim marcamos onde começa e termina o conteúdo que receberá a
formatação ou marcação necessária, específica. Alguns elementos são chamados
“vazios”, pois não marcam uma região de texto, apenas inserem algum elemento no
documento.
Cada elemento tem os seus atributos possíveis e os seus valores. Um exemplo, é o
atributo href que pode ser usado com o elemento a , com o link mas que não pode
ser usado com o elemento meta . Isso quer dizer que devemos saber exatamente quais
os atributos e valores possíveis para cada elemento.
De uma maneira geral o HTML é um poderoso recurso, sendo uma linguagem de
marcação muito simples e acessível voltada para a produção e compartilhamento de
documentos, imagens, vídeos e áudio via streaming.
Na sua versão mais recente, o HTML5, é possível criar marcadores personalizados
com JavaScript, linguagem de programação diretamente compatível com o HTML.
Cada tag pode ter uma função específica utilizando uma API (Interface de programação
de aplicações) diferente, assim como seus nomes e estilos.
Edição de documentos HTML
editar
Os documentos em HTML são arquivos de texto simples que podem ser criados e
editados em qualquer editor de textos comum, como o Bloco de Notas do Windows, ou
o TextEdit, do Macintosh. Para facilitar a produção de documentos, no mercado existem
editores HTML específicos, com recursos sofisticados, que facilitam a realização de
tarefas repetitivas, inserção de objetos, elaboração de tabelas e outros recursos (Ver lista
abaixo). Basicamente dividem-se em dois tipos:
 Editores de texto fonte: inserem automaticamente os marcadores, orientando a
inserção de atributos e marcações
 Editores WYSIWYG: oferecem ambiente de edição com um "esboço" resultado final
das marcações
Estrutura básica de um documento
editar
A estrutura básica de um documento HTML (Hyper Text Markup Language -
Linguagem de Marcação de Hypertexto), apresenta as seguintes marcações:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Título do Documento</title>
</head>
<body>
 <!-- Aqui fica a página que será visível para todos, onde pode-se
inserir
textos, imagens, links para outras páginas, etc, geralmente
usa-se: -->

<div>Tag para criar um bloco, mais utilizado com CSS</div>

<span>Tag para modificação de uma parte do texto da página</span>

<img src="[Link]">

<a href="[Link] a enciclopédia

livre</a>
</body>
</html>

Os marcadores HTML não são sensíveis à caixa, portanto tanto faz

escrever <HTML> , <Html> , <html> ou <HtMl> .
Os marcadores básicos de HTML, cuja presença é altamente recomendada nas páginas
são:
 <html> : define o início de um documento HTML e indica ao navegador que todo
conteúdo posterior deve ser tratado como uma série de códigos HTML

 <head> : define o cabeçalho de um documento HTML, que traz informações sobre o

documento que está sendo aberto

 <body> : define o conteúdo principal, o corpo do documento. Esta é a parte do

documento HTML que é exibida no navegador. No corpo podem-se definir atributos
comuns a toda a página, como cor de fundo, margens, e outras formatações.
Cabeçalho
editar
Dentro do cabeçalho podemos encontrar os seguintes elementos:
 <title></title> : define o título da página, que é exibido na barra de título
dos navegadores

 <style></style> : define formatação em CSS

 <script></script> : define scripts JavaScript ou importa de um arquivo externo

 <link> : define ligações da página com outros arquivos como feeds, CSS, scripts, etc

 <meta> : define propriedades da página, como codificação de caracteres, descrição da

página, autor, etc
São meta informações sobre documento. Tais campos são muito usados
por mecanismos de busca (como o Google, Yahoo!, Bing) para obterem mais
informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se
adicionar o código <meta name="description" content="descrição da sua
página"> no documento HTML para indicar ao motor de busca que texto de descrição
apresentar junto com a ligação para o documento. Para o motor de busca Google, por
exemplo, elementos meta como keywords não são utilizadas para indexar páginas.
Apenas <title> e a meta description são usadas para descrever a página indexada.
[7]

Obs: Os marcadores <style> e <script> servem tanto para delimitar os espaços

usados pelos códigos na página quanto para invocar códigos existentes em outros
arquivos externos.
Corpo
editar

Trecho de código HTML.

Dentro do corpo podemos encontrar outros vários marcadores que irão moldar a página,
como por exemplo:
 <h1> , <h2> , ... <h6> : Títulos que variam de tamanho dentro das prioridades (sua
aparência pode ser alterada com CSS - Cascade Style Sheet - Folhas de Estilo em
Cascata).

 <p> : Parágrafo.

 <br> : quebra de linha.

 <table> : cria uma tabela (linhas são criadas com <tr> e novas células com <td> ,
já os cabeçalhos das colunas são criados com os marcadores <thead><th> e os
rodapés com <tfooter><tr><td> ).

 <div> : determina uma divisão na página a qual pode possuir variadas formatações.
  <b> , <i> , <u> e <s> : negrito, itálico, sublinhado e riscado, respectivamente.

 <img> : imagem.

 <a> : hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço.

 <textarea> : caixa de texto (com mais de uma linha); estas caixas de texto são muito
usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem
distribuídos.

 <abbr> : abreviação (sigla simplesmente abreviada).

 <cite> : citação.

 <address> :Endereço.
Cores
editar
As cores podem ser atribuídas em CSS inline com o atributo style, ou o com nome de
uma classe com o atributo class. Exemplo:

<h1 class="title">Título</h1>

<p style="color: gray">Parágrafo.</p>

Onde a cor pode ser especificada na forma do nome em inglês, ou um

número hexadecimal, ou a notação RGB, RGBA ou HSL/HSLA. Exemplos: Tabela de
cores e Lista de cores.
Hiperligações
editar
Uma possibilidade importante dos documentos HTML é a de fazer hiperligações. Para
isso usa-se o marcador <a> (do inglês, anchor). Esta tem os atributos: href que
define o alvo da hiperligação (que pode ser uma página de Internet, uma parte da mesma
página ou um endereço de email) ou name que define um alvo nessa página (a onde se
pode fazer uma hiperligação usando o marcador a com o atributo href ). Exemplos:
 <a href="[Link] aqui para aceder à
página principal da Wikipédia em português.</a>

 <a name="nome">texto</a>

Em que nome e texto podem ser substituídos por o que se desejar. Depois usa-se <a
href="#nome"> </a> para hiperligar a este "anchor".
Diferença entre target="_blank" e target="_new"

target="_blank" é usado para abrir links em várias janelas

e target="_new" ou target="booger" é usado para abrir vários links em uma
janela.[8]
Exemplos
 <a href="URL DO LINK" target="_blank">Título</a>

 <a href="URL DO LINK" target="_new">Título</a>

 <a href="URL DO LINK" target="booger">Título</a>

Página em branco é usado about:blank na url do link.

Exemplos:
 <a href="about:blank" target="_blank">Página em branco</a>

 <a href="about:blank" target="_new">Página em branco</a>

 <a href="about:blank" target="booger">Página em branco</a>

Caracteres especiais e símbolos
Ver também




Referências

1. Dave Raggett (1998). Raggett on HTML 4. [S.l.]: Addison-Wesley's. pp. chap. 2: A

history of HTML. ISBN 0-201-17805-2
2. «HTML working group charter (2000–2002)». World Wide Web Consortium
3. «HTML working group charter (2002–2004)». World Wide Web Consortium
4. «HTML Working Group Roadmap». World Wide Web Consortium
5. Karl Dubost (15 de janeiro de 2008). «HTML5, one vocabulary, two serializations» (em
inglês). W3C. Consultado em 29 de outubro de 2011
6. «Introdução ao HTML». [Link]. Consultado em 25 de março de 2017
7. «Official Google Webmaster Central Blog: Google does not use the keywords meta tag
in web ranking». [Link]. Consultado em 21 de
fevereiro de 2011
8. target="_blank" vs. target="_new"(em inglês)
Ligações externas


Última modificação há 6 meses por André Franco Pires

PÁGINAS RELACIONADAS

 Cascading Style Sheetsmecanismo para adicionar estilos em uma página web

 Linguagem de marcação

 Elemento HTMLum elemento individual de um documento em HTML


 Conteúdo disponibilizado nos termos da CC BY-SA 4.0, salvo indicação em contrário.

 Política de privacidade

 Código de conduta

 Programadores

 Estatísticas

 Declaração sobre cookies

 Condições de utilização

 Versão desktop