HTML

HTML (Hypertext Markup Language)
Extensão do arquivo	.html .htm
MIME	text/html
Type code	TEXT
Desenvolvido por	W3C&WHATWG
Tipo de formato	Linguagem de marcação
Padronização	ISO/IEC 15445 W3C HTML latest recommendation HTML Living Standard W3C HTML 5.1
Página oficial	www.w3.org/html/ whatwg.org

HTML(abreviação para aexpressão inglesaHyperText Markup Language,que significa: "Linguagem de Marcação de Hipertexto ") é umalinguagem de marcaçãoutilizada na construção depáginas na Web.Documentos HTML podem ser interpretados pornavegadores.Atecnologiaé fruto da junção entre os padrõesHyTimeeSGML.

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 porhiperligações(em inglês:hyperlinkelink). 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 parahipertexto,mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

História

Tim Berners-Leeem 2008.

Tim Berners-Lee(físico britânico) criou o HTML original (e outrosprotocolosassociados como oHTTP), numa estaçãoNeXTcube,usando o ambiente de desenvolvimentoNeXTSTEP.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 aInternet), 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), osnavegadoresainda 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 nadécada de 1990,inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada emSGMLpara a Internet. A primeira publicação foi esboçada por Berners-Lee eDan Connollye publicada em1993naIETF,como uma aplicação formal para o SGML (com umaDTDem SGML definindo a gramática). A IETF criou um grupo de trabalho para o HTML no ano seguinte, e publicou o HTML 2.0 em1995.Desde1996,as especificações HTML vêm sendo mantidas, com o auxílio de fabricantes de software, peloWorld Wide Web Consortium(W3C).Apesar disso, em2000a linguagem tornou-se também uma norma internacional (ISO/IEC15445:2000). A recomendação HTML 4.01 foi publicada no final de1999pelo W3C. Uma errata ainda foi lançada em2001.

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 doXHTML,uma especificação HTML baseada emXMLque é considerada pela W3C como um sucessor do HTML.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 de2008o W3C publicou a especificação doHTML5comoWorking Draft.Apesar de sua sintaxe ser semelhante à deSGML,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 emXML,o XHTML5.

Várias versões HTML foram publicadas:

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)

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):

<ahref="https://pt.wikipedia.org/">Wikipédia</a>

• <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):

<ahref="https://pt.wikipedia.org"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 aURLda 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 atributohrefque pode ser usado com o elementoa,com olinkmas que não pode ser usado com o elementometa.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 viastreaming.

Na sua versão mais recente, oHTML5,é possível criar marcadores personalizados comJavaScript,linguagem de programaçãodiretamente compatível com o HTML. Cadatagpode ter uma função específica utilizando umaAPI(Interface de programação de aplicações) diferente, assim como seus nomes e estilos.

Edição de documentos HTML

Os documentos em HTML são arquivos detexto simplesque podem ser criados e editados em qualquer editor de textos comum, como oBloco de NotasdoWindows,ou oTextEdit,doMacintosh.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
• EditoresWYSIWYG:oferecem ambiente de edição com um "esboço" resultado final das marcações

Estrutura básica de um documento

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>
<htmllang="pt-BR">
<head>
<metacharset="UTF-8">
<metaname="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>

<imgsrc="imagem.jpg">

<ahref="https:// wikipedia.org">Wikipédia, a enciclopédia livre</a>
</body>
</html>

Os marcadores HTML não sãosensí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

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 dosnavegadores
• <style></style>:define formatação emCSS
• <script></script>:definescriptsJavaScriptou importa de um arquivo externo
• <link>:define ligações da página com outros arquivos comofeeds,CSS,scripts,etc
• <meta>:define propriedades da página, comocodificação de caracteres,descrição da página,autor,etc

São meta informações sobre documento. Tais campos são muito usados pormecanismos de busca(como oGoogle,Yahoo!,Bing) para obterem mais informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se adicionar o código<metaname="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, elementosmetacomokeywordsnão são utilizadas para indexar páginas. Apenas<title>e a metadescriptionsão usadas para descrever a página indexada.

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

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 dasprioridades(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, ume-mailou outro serviço.
• <textarea>:caixa de texto(com mais de uma linha); estas caixas de texto são muito usadas emblogs,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

As cores podem ser atribuídas em CSSinlinecom o atributostyle,ou o com nome de uma classe com o atributoclass.Exemplo:

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

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

Onde a cor pode ser especificada na forma do nome em inglês, ou um númerohexadecimal,ou a notaçãoRGB,RGBAouHSL/HSLA.Exemplos:Tabela de coreseLista de cores.

Hiperligações

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:hrefque define o alvo da hiperligação (que pode ser uma página deInternet,uma parte da mesma página ou um endereço deemail) ounameque define um alvo nessa página (a onde se pode fazer uma hiperligação usando o marcadoracom o atributohref). Exemplos:

• <ahref="ht­tps://pt.wikipedia.org/">Clique aqui para aceder à página principal da Wikipédia em português.</a>
• <aname="nome">texto</a>

Em quenomeetextopodem ser substituídos por o que se desejar. Depois usa-se<a href= "#nome" > </a>para hiperligar a este "anchor".

Diferença entretarget= "_blank"etarget= "_new"

target= "_blank"é usado para abrir links em várias janelas etarget= "_new"outarget= "booger"é usado para abrir vários links em uma janela.

Exemplos

• <ahref="URL DO LINK"target="_blank">Título</a>
• <ahref="URL DO LINK"target="_new">Título</a>
• <ahref="URL DO LINK"target="booger">Título</a>

Página em branco é usadoabout:blanknaurldolink.

Exemplos:

• <ahref="about:blank"target="_blank">Página em branco</a>
• <ahref="about:blank"target="_new">Página em branco</a>
• <ahref="about:blank"target="booger">Página em branco</a>

Caracteres especiais e símbolos

Os caracteres especiais definem-se usando comandos que começam com&e terminam com um;.Alguns exemplos incluemá(á),à(à),ã(ã),â(â),ä(ä) eç(ç). Qualquer outra vogal pode ser substituída pelo a destes exemplos, incluindo maiúsculas.

Ver também

• Cascading Style Sheets
• DHTML
• HTML5
• XHTML

Ligações externas

• Sítio oficial(em inglês)
• «The W3C Markup Validation Service»(em inglês)
• «Estruturando a web com HTML».Guia naMDN Web Docs