VISÃO GERAL DO HTML5

De acor­do com o W3C a Web é basea­da em 3 pilares:

• Um esque­ma de nomes para local­iza­ção de fontes de infor­mação na Web, esse esque­ma chama-se URI.

• Um Pro­to­co­lo de aces­so para aces­sar estas fontes, hoje o HTTP.

• Uma lin­guagem de Hyper­tex­to, para a fácil nave­g­ação entre as fontes de infor­mação: o HTML.

Vamos nos focar no ter­ceiro pilar, o HTML.

Hypertexto

HTML é uma abre­vi­ação de Hyper­text Markup Lan­guage — Lin­guagem de Mar­cação de Hyper­tex­to. Resu­min­do em uma frase: o HTML é uma lin­guagem para pub­li­cação de con­teú­do (tex­to, imagem, vídeo, áudio e etc) na Web.

O HTML é basea­do no con­ceito de Hiper­tex­to. Hiper­tex­to são con­jun­tos de ele­men­tos – ou nós – lig­a­dos por conexões. Estes ele­men­tos podem ser palavras, ima­gens, vídeos, áudio, doc­u­men­tos etc. Estes ele­men­tos conec­ta­dos for­mam uma grande rede de infor­mação. Eles não estão conec­ta­dos lin­ear­mente como se fos­sem tex­tos de um livro, onde um assun­to é lig­a­do ao out­ro seguida­mente. A conexão fei­ta em um hiper­tex­to é algo impre­vis­to que per­mite a comu­ni­cação de dados, orga­ni­zan­do con­hec­i­men­tos e guardan­do infor­mações rela­cionadas.

Para dis­tribuir infor­mação de uma maneira glob­al, é necessário haver uma lin­guagem que seja enten­di­da uni­ver­salmente por diver­sos meios de aces­so. O HTML se propõe a ser esta lin­guagem.

Desen­volvi­do orig­i­nal­mente por Tim Bern­ers-Lee o HTML gan­hou pop­u­lar­i­dade quan­do o Mosa­ic — brows­er desen­volvi­do por Marc Andreessen na déca­da de 1990 — gan­hou força. A par­tir daí, desen­volve­dores e fab­ri­cantes de browsers uti­lizaram o HTML como base, com­par­til­han­do as mes­mas con­venções.

O começo e a interoperabilidade

Entre 1993 e 1995, o HTML gan­hou as ver­sões HTML+, HTML2.0 e HTML3.0, onde foram pro­postas diver­sas mudanças para enrique­cer as pos­si­bil­i­dades da lin­guagem. Con­tu­do, até aqui o HTML ain­da não era trata­do como um padrão. Ape­nas em 1997, o grupo de tra­bal­ho do W3C respon­sáv­el por man­ter o padrão do códi­go, tra­bal­hou na ver­são 3.2 da lin­guagem, fazen­do com que ela fos­se trata­da como práti­ca comum. Você pode ver: http://www.w3.org/TR/html401/appendix/changes.html.

Des­de o começo o HTML foi cri­a­do para ser uma lin­guagem inde­pen­dente de platafor­mas, browsers e out­ros meios de aces­so. Inter­op­er­abil­i­dade sig­nifi­ca menos cus­to. Você cria ape­nas um códi­go HTML e este códi­go pode ser lido por diver­sos meios, ao invés de ver­sões difer­entes para diver­sos dis­pos­i­tivos. Dessa for­ma, evi­tou-se que a Web fos­se desen­volvi­da em uma base pro­pri­etária, com for­matos incom­patíveis e lim­i­ta­da.

Por isso o HTML foi desen­volvi­do para que essa bar­reira fos­se ultra­pas­sa­da, fazen­do com que a infor­mação pub­li­ca­da por meio deste códi­go fos­se acessív­el por dis­pos­i­tivos e out­ros meios com car­ac­terís­ti­cas difer­entes, não impor­tan­do o taman­ho da tela, res­olução, vari­ação de cor. Dis­pos­i­tivos próprios para defi­cientes visuais e audi­tivos ou dis­pos­i­tivos móveis e portáteis.

O HTML deve ser enten­di­do uni­ver­salmente, dan­do a pos­si­bil­i­dade para a reuti­liza­ção dessa infor­mação de acor­do com as lim­i­tações de cada meio de aces­so.

WHAT Working Group

Enquan­to o W3C foca­va suas atenções para a cri­ação da segun­da ver­são do XHTML, um grupo chama­do Web Hyper­text Appli­ca­tion Tech­nol­o­gy Work­ing Group ou WHATWG tra­bal­ha­va em uma ver­são do HTML que trazia mais flex­i­bil­i­dade para a pro­dução de web­sites e sis­temas basea­d­os na web.
O WHATWG (http://www.whatwg.org/) foi fun­da­do por desen­volve­dores de empre­sas como Mozil­la, Apple e Opera em 2004. Eles não estavam felizes com o cam­in­ho que a Web toma­va e nem com o rumo dado ao XHTML. Por isso, estas orga­ni­za­ções se jun­taram para escr­ev­er o que seria chama­do hoje de HTML5.

Entre out­ros assun­tos que o WHATWG se foca­va era Web Forms 2.0 que foi incluí­do no HTML5 e o Web Con­trols 1.0 que foi aban­don­a­do por enquan­to.
A par­tic­i­pação no grupo é livre e você pode se inscr­ev­er na lista de email para con­tribuir.

Por vol­ta de 2006, o tra­bal­ho do WHATWG pas­sou ser con­heci­do pelo mun­do e prin­ci­pal­mente pelo W3C — que até então tra­bal­havam sep­a­rada­mente — que recon­heceu todo o tra­bal­ho do grupo. Em Out­ubro de 2006, Tim Bern­ers-Lee anun­ciou que tra­bal­haria jun­ta­mente com o WHATWG na pro­dução do HTML5 em detri­men­to do XHTML 2. Con­tu­do o XHTML con­tin­uar­ia sendo man­ti­do para­le­la­mente de acor­do comas mudanças cau­sadas no HTML. O grupo que esta­va cuidan­do especi­fi­ca­mente do XHTML 2 foi descon­tin­u­a­do em 2009.

O HTML5 e suas mudanças

Quan­do o HTML4 foi lança­do, o W3C aler­tou os desen­volve­dores sobre algu­mas boas práti­cas que dev­e­ri­am ser seguidas ao pro­duzir códi­gos client-side. Des­de este tem­po, assun­tos como a sep­a­ração da estru­tu­ra do códi­go com a for­matação e princí­pios de aces­si­bil­i­dade foram trazi­dos para dis­cussões e à atenção dos fab­ri­cantes e desen­volve­dores.

Con­tu­do, o HTML4 ain­da não trazia difer­en­cial real para a semân­ti­ca do códi­go. o HTML4 tam­bém não facil­i­ta­va a manip­u­lação dos ele­men­tos via Javascript ou CSS. Se você quisesse cri­ar um sis­tema com a pos­si­bil­i­dade de Drag’n Drop de ele­men­tos, era necessário cri­ar um grande script, com bugs e que muitas vezes não fun­cionavam de acor­do em todos os browsers.

O que é o HTML5?

O HTML5 é a nova ver­são do HTML4. Enquan­to o WHATWG define as regras de mar­cação que usare­mos no HTML5 e no XHTML, eles tam­bém definem APIs que for­marão a base da arquite­tu­ra web. Essas APIs são con­heci­das como DOM Lev­el 0.

Um dos prin­ci­pais obje­tivos do HTML5 é facil­i­tar a manip­u­lação do ele­men­to pos­si­bil­i­tan­do o desen­volve­dor a mod­i­ficar as car­ac­terís­ti­cas dos obje­tos de for­ma não intru­si­va e de maneira que seja trans­par­ente para o usuário final.

Ao con­trário das ver­sões ante­ri­ores, o HTML5 fornece fer­ra­men­tas para a CSS e o Javascript faz­erem seu tra­bal­ho da mel­hor maneira pos­sív­el. O HTML5 per­mite por meio de suas APIs a manip­u­lação das car­ac­terís­ti­cas destes ele­men­tos, de for­ma que o web­site ou a apli­cação con­tin­ue leve e fun­cional.

O HTML5 tam­bém cria novas tags e mod­i­fi­ca a função de out­ras. As ver­sões anti­gas do HTML não con­tin­ham um padrão uni­ver­sal para a cri­ação de seções comuns e especí­fi­cas como rodapé, cabeçal­ho, side­bar, menus e etc. Não havia um padrão de nomen­clatu­ra de IDs, Class­es ou tags. Não havia um méto­do de cap­turar de maneira automáti­ca as infor­mações local­izadas nos rodapés dos web­sites.

Há out­ros ele­men­tos e atrib­u­tos que sua função e sig­nifi­ca­do foram mod­i­fi­ca­dos e que ago­ra podem ser reuti­liza­dos de for­ma mais efi­caz. Por exem­p­lo, ele­men­tos como B ou I que foram descon­tin­u­a­dos em ver­sões ante­ri­ores do HTML ago­ra assumem funções difer­entes e entregam mais sig­nifi­ca­do para os usuários.

O HTML5 mod­i­fi­ca a for­ma de como escreve­mos códi­go e orga­ni­zamos a infor­mação na pági­na. Seria mais semân­ti­ca com menos códi­go. Seria mais inter­a­tivi­dade sem a neces­si­dade de insta­lação de plu­g­ins e per­da de per­for­mance. É a cri­ação de códi­go interop­eráv­el, pron­to para futur­os dis­pos­i­tivos e que facili­ta a reuti­liza­ção da infor­mação de diver­sas for­mas.
O WHATWG tem man­ti­do o foco para man­ter a retro­com­pat­i­bil­i­dade.

Nen­hum site dev­erá ter de ser refeito total­mente para se ade­quar aos novos con­ceitos e regras. O HTML5 está sendo cri­a­do para que seja com­patív­el com os browsers recentes, pos­si­bil­i­tan­do a uti­liza­ção das novas car­ac­terís­ti­cas ime­di­ata­mente.

ANÁLISE DO SUPORTE ATUAL PELOS NAVEGADORES E ESTRATÉGIAS DE USO

Antiga­mente, para que uma nova ver­são do HTML ou do CSS fos­se lança­da, todas as ideias lis­tadas na especi­fi­cação dev­e­ri­am ser tes­tadas e desen­volvi­das para então serem pub­li­cadas para o uso dos browsers e os desen­volve­dores.

Esse méto­do foi muda­do com o lança­men­to do HTML5 e o CSS3. A par­tir de ago­ra, as duas tec­nolo­gias foram divi­di­das em módu­los. Isso quer diz­er que a comu­nidade de desen­volve­dores e os fab­ri­cantes de browsers não pre­cisam esper­ar que todo o padrão seja escrito e pub­li­ca­do para uti­lizarem as novi­dades das lin­gua­gens.

As pro­priedades do CSS3, por exem­p­lo, foram divi­di­das em pequenos gru­pos. Há um grupo cuidan­do da pro­priedade Back­ground, out­ro da pro­priedade Bor­der, out­ro das pro­priedades de Tex­to e etc. Cada um destes gru­pos são inde­pen­dentes e podem lançar suas novi­dades a qual­quer momen­to. Logo, o desen­volvi­men­to para web ficou mais dinâmi­co, com novi­dades mais con­stantes.

O pon­to neg­a­ti­vo nesse for­ma­to, é que prob­le­mas de com­pat­i­bil­i­dade podem ocor­rer com mais fre­quen­cia. Por exem­p­lo, um brows­er pode ado­tar bor­das arredondadas e out­ro não. Ou um brows­er pode escol­her supor­tar um API difer­ente do API que o con­cor­rente imple­men­tou. Con­tu­do, os browsers tem mostra­do grande inter­esse em se man­terem atu­al­iza­dos em relação aos seus con­cor­rentes.

Motores de Renderização

Há uma grande diver­si­dade de dis­pos­i­tivos que aces­sam a inter­net. Entre eles, há uma série de tablets, smart­phones, pc’s e etc. Cada um destes meios de aces­so uti­lizam um deter­mi­na­do brows­er para nave­g­ar na web. Não há como os desen­volve­dores man­terem um bom nív­el de com­pat­i­bil­i­dade com todos estes browsers levan­do em con­sid­er­ação a par­tic­u­lar­i­dade de cada um. Uma maneira

mais segu­ra de man­ter o códi­go com­patív­el, é nive­lar o desen­volvi­men­to pelos motores de ren­der­iza­ção. Cada brows­er uti­liza um motor de ren­der­iza­ção que é respon­sáv­el pelo proces­sa­men­to do códi­go da pági­na.

Abaixo, segue uma lista dos prin­ci­pais browsers e seus motores:

É inter­es­sante que você faça códi­go com­patív­el com estes motores. Focan­do a com­pat­i­bil­i­dade nos motores de ren­der­iza­ção você atin­girá uma ampli­tude maior de browsers.

Por exem­p­lo, se seu códi­go fun­cionar no Webkit, você alcançará o Safari e o Chrome, dois dos prin­ci­pais browsers do mer­ca­do para desk­tops. Além dis­so, você tam­bém alcança apar­el­hos como Black­ber­ry, iPhone, iPod Touch, iPad e dis­pos­i­tivos que rodam Android.

Compatibilidade com HTML5

Atual­mente o Webkit é o motor mais com­patív­el com os Padrões do HTML5. Como a Apple tem inter­esse que seus dis­pos­i­tivos sejam ultra­com­patíveis com os Padrões, ela tem feito um belo tra­bal­ho de atu­al­iza­ção e avanço da com­pat­i­bil­i­dade deste motor.

Con­tu­do o Fire­fox e o Opera já estão com­patíveis com grande parte da especi­fi­cação do HTML5 e CSS3 e a cada upgrade eles trazem mais novi­dades e atu­al­iza­ção dos padrões.

O que pode te pre­ocu­par de ver­dade é a retro­com­pat­i­bil­i­dade com ver­sões anti­gas de browsers como o Inter­net Explor­er. A Microsoft está fazen­do um bom tra­bal­ho com o IE9, mas as ver­sões 8 e 7 não tem quase nen­hum suporte ao HTML5, o que é um prob­le­ma sério para apli­cações web baseadas em tec­nolo­gias mais recentes, mas que a base de usuários uti­liza as ver­sões anti­gas do Inter­net Explor­er.

Abaixo segue uma tabela sim­ples de com­pat­i­bil­i­dade entre os browsers e alguns módu­los do HTML5:

Técnicas de detectação

Pode ser que o usuário não uti­lize um brows­er que supor­ta HTML5. Neste caso, você pode redi­re­cioná-lo para uma ver­são do site mais sim­ples, ou talvez ape­nas mostrar uma men­sagem aler­tan­do o usuário sobre a importân­cia da atu­al­iza­ção do brows­er. Para isso temos algu­mas téc­ni­cas de detec­tação para con­ferir se o brows­er supor­ta ou não HTML5.

Quan­do o brows­er visi­ta um web­site, ele con­strói uma coleção de obje­tos que rep­re­sen­tam ele­men­tos HTML na pági­na. Cada ele­men­to no códi­go é rep­re­sen­ta­do no DOM como um obje­to difer­ente. Todo obje­to DOM tem pro­priedades em comum, mas alguns obje­tos tem car­ac­terís­ti­cas especí­fi­cas. Usare­mos estes obje­tos para faz­er­mos a detec­tação.

Abaixo segue 4 meios que você poderá uti­lizar para detec­tar o suporte do brows­er:

1. Ver­i­fique se uma deter­mi­na­da pro­priedade existe em obje­tos globais como WINDOW ou NAVIGATOR. Nesse caso, ver­i­fi­camos o suporte a geolo­cal­iza­ção.
2. Crie um ele­men­to e ver­i­fique se uma deter­mi­na­da pro­priedade existe neste ele­men­to.
3. Crie um ele­men­to e ver­i­fique se um deter­mi­na­do méto­do existe neste ele­men­to, então chame o méto­do e ver­i­fique se o val­or retor­na. Por exem­p­lo, teste quais for­matos de vídeo são supor­ta­dos.
4. Crie um ele­men­to e defi­na um atrib­u­to com um deter­mi­na­do val­or, então ver­i­fique se o atrib­u­to supor­ta este val­or. Por exem­p­lo, crie um input e ver­i­fique quais types são supor­ta­dos.

ESTRUTURA BÁSICA, DOCTYPE E CHARSETS

A estru­tu­ra bási­ca do HTML5 con­tin­ua sendo a mes­ma das ver­sões ante­ri­ores da lin­guagem, há ape­nas uma excessão na escri­ta do Doc­type. Segue abaixo como a estru­tu­ra bási­ca pode ser segui­da:

O Doctype

O Doc­type deve ser a primeira lin­ha de códi­go do doc­u­men­to antes da tag HTML.

<!DOCTYPE html!>

O Doc­type indi­ca para o nave­g­ador e para out­ros meios qual a especi­fi­cação de códi­go uti­lizar. Em ver­sões ante­ri­ores, era necessário ref­er­en­ciar o DTD dire­ta­mente no códi­go do Doc­type. Com o HTML5, a refer­ên­cia por qual DTD uti­lizar é respon­s­abil­i­dade do Brows­er.

O Doc­type não é uma tag do HTML, mas uma instrução para que o brows­er ten­ha infor­mações sobre qual ver­são de códi­go a mar­cação foi escri­ta.

O elemento HTM

O códi­go HTML é uma série de ele­men­tos em árvore onde alguns ele­men­tos são fil­hos de out­ros e assim por diante. O ele­men­to prin­ci­pal dessa grande árvore é sem­pre a tag HTML.

<html lang=”pt-br”>

O atrib­u­to LANG é necessário para que os user-agents saibam qual a lin­guagem prin­ci­pal do doc­u­men­to.

Lem­bre-se que o atrib­u­to LANG não é restri­to ao ele­men­to HTML, ele pode ser uti­liza­do em qual­quer out­ro ele­men­to para indicar o idioma do tex­to rep­re­sen­ta­do.

HEAD

A Tag HEAD é onde fica toda a parte inteligente da pági­na. No HEAD ficam os metada­dos. Metada­dos são infor­mações sobre a pági­na e o con­teú­do ali pub­li­ca­do.

Metatag Charset

No nos­so exem­p­lo há uma metatag respon­sáv­el por chavear qual tabela de car­ac­téres a pági­na está uti­lizan­do.

<meta charset=”utf‑8”>

Nas ver­sões ante­ri­ores ao HTML5, essa tag era escri­ta da for­ma abaixo:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf‑8”>

Essa for­ma anti­ga será tam­bém supor­ta­da no HTML5. Con­tu­do, é mel­hor que você uti­lize a nova for­ma.

A Web é aces­sa­da por pes­soas do mun­do inteiro. Ter um sis­tema ou um site que lim­ite o aces­so e pes­soas de out­ros país­es é algo que vai con­tra a tradição e os ideais da inter­net. Por isso, foi cri­a­do uma tabela que suprisse essas neces­si­dades, essa tabela se chama Uni­code.

A tabela Uni­code supor­ta algo em torno de um mil­hão de car­ac­teres. Ao invés de cada região ter sua tabela de car­ac­teres, é muito mais sen­sato haver uma tabela padrão com o maior número de car­ac­teres pos­sív­el. Atual­mente a maio­r­ia dos sis­temas e browsers uti­liza­dos por usuários supor­tam ple­na­mente Uni­code. Por isso, fazen­do seu sis­tema Uni­code você garante que ele será bem visu­al­iza­do aqui, na Chi­na ou em qual­quer out­ro lugar do mun­do.

O que o Uni­code faz é fornecer um úni­co número para cada car­ac­tere, não impor­ta a platafor­ma, nem o pro­gra­ma, nem a lín­gua.

Tag LINK

Há dois tipos de links no HTML: a tag A, que são links que lev­am o usuário para out­ros doc­u­men­tos e a tag LINK, que são links para fontes exter­nas que serão usadas no doc­u­men­to.

No nos­so exem­p­lo há uma tag LINK que impor­ta o CSS para nos­sa pági­na:

<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

O atrib­u­to rel=”stylesheet” indi­ca que aque­le link é rel­a­ti­vo a impor­tação de um arqui­vo ref­er­ente a fol­has de esti­lo.

Há out­ros val­ores para o atrib­u­to REL, como por exem­p­lo o ALTERNATE:

<link rel=”alternate” type=”application/atom+xml” title=”feed” href=”/feed/”>

Neste caso, indicamos aos user-agents que o con­teú­do do site poder ser encon­tra­do em um cam­in­ho alter­na­ti­vo via Atom FEED.

No HTML5 há out­ros links rel­a­tivos que você pode inserir como o rel=”archives” que indi­ca uma refer­ên­cia a uma coleção de mate­r­i­al históri­co da pági­na. Por exem­p­lo, a pági­na de históri­co de um blog pode ser ref­er­en­ci­a­da nes­ta tag.

MODELOS DE CONTEÚD

Há peque­nas regras bási­cas que nós já con­hece­mos e que estão no HTML des­de o iní­cio. Estas regras definem onde os ele­men­tos podem ou não estar. Se eles podem ser fil­hos ou pais de out­ros ele­men­tos e quais os seus com­por­ta­men­tos.

Den­tre todas as cat­e­go­rias de mod­e­los de con­teú­do, exis­tem dois tipos de ele­men­tos: ele­men­tos de lin­ha e de blo­co.
Os ele­men­tos de lin­ha mar­cam, na sua maio­r­ia das vezes, tex­to.

Alguns exem­p­los: a, strong, em, img, input, abbr, span.

Os ele­men­tos de blo­cos são como caixas, que divi­dem o con­teú­do nas seções do lay­out.

Abaixo segue algu­mas pre­mis­sas que você pre­cisa relem­brar e con­hecer:

• Os ele­men­tos de lin­ha podem con­ter out­ros ele­men­tos de lin­ha, depen­den­do da cat­e­go­ria que ele se encon­tra. Por exem­p­lo: o ele­men­to a não pode con­ter o ele­men­to label.

• Os ele­men­tos de lin­ha nun­ca podem con­ter ele­men­tos de blo­co.

•Ele­men­tos de blo­co sem­pre podem con­ter ele­men­tos de lin­ha.

• Ele­men­tos de blo­co podem con­ter ele­men­tos de blo­co, depen­den­do da cat­e­go­ria que ele se encon­tra.

Por exem­p­lo, um pará­grafo não pode con­ter um DIV. Mas o con­trário é pos­sív­el.

Estes dois grandes gru­pos podem ser divi­di­dos em cat­e­go­rias. Estas cat­e­go­rias dizem qual mod­e­lo de con­teú­do o ele­men­to tra­bal­ha e como pode ser seu com­por­ta­men­to.

Categorias

Cada ele­men­to no HTML pode ou não faz­er parte de um grupo de ele­men­tos com car­ac­terís­ti­cas sim­i­lares. As cat­e­go­rias estão a seguir. Man­ter­e­mos os nomes das cat­e­go­rias em inglês para que haja um mel­hor entendi­men­to:

• Meta­da­ta con­tent

• Flow con­tent

• Sec­tion­ing con­tent

• Head­ing con­tent

• Phras­ing con­tent

• Embed­ded con­tent

• Inter­ac­tive con­tent

Abaixo segue como as cat­e­go­rias estão rela­cionadas de acor­do com o WHATWG:

Metadata content

Os ele­men­tos que com­põe a cat­e­go­ria Meta­da­ta são:

• base

• com­mand

• link

• meta

• noscript

• script

• style

• title

Este con­teú­do vem antes da apre­sen­tação, for­man­do uma relação com o doc­u­men­to e seu con­teú­do com out­ros doc­u­men­tos que dis­tribuem infor­mação por out­ros meios.

Flow content

A maio­r­ia dos ele­men­tos uti­liza­dos no body e apli­cações são cat­e­go­riza­dos como Flow Con­tent. São eles:

• a

• abbr

• address

• area (se for um decen­dente de um ele­men­to de mapa)

• arti­cle

• aside

• audio

• b

• bdo

•block­quote

• br

• but­ton

• can­vas

• cite

• code

• com­mand

• datal­ist

• del

• details

• dfn

• div

• dl

• em

• embed

• field­set

• fig­ure

• foot­er

• form

• h1

• h2

• h3

• h4

• h5

• h6

• head­er

• hgroup

• hr

• i

• iframe

• img

• input

• ins

• kbd

• key­gen

• label

• link (Se o atrib­u­to item­prop for uti­liza­do)

• map

• mark

• math

• menu

• meta (Se o atrib­u­to item­prop for uti­liza­do)

• meter

• nav

• noscript

• object

• ol

• out­put

• p

• pre

• progress

• q

• ruby

• samp

• script

• sec­tion

• select

• small

• span

• strong

• style (Se o atrib­u­to scoped for uti­liza­do)

• sub

• sup

• svg

• table

• textarea

• time

• ul

• var

• video

• wbr

• Text

Por via de regra, ele­men­tos que seu mod­e­lo de con­teú­do per­mitem inserir qual­quer ele­men­to que se encaixa no Flow Con­tent, devem ter pelo menos um descen­dente de tex­to ou um ele­men­to descen­dente que faça parte da cat­e­go­ria embed­ded.

Sectioning content

Estes ele­men­tos definem um grupo de cabeçal­hos e rodapés.

• arti­cle

• aside

• nav

• sec­tion

Basi­ca­mente são ele­men­tos que jun­tam gru­pos de tex­tos no doc­u­men­to.

Heading content

Os ele­men­tos da cat­e­go­ria Head­ing definem uma seção de cabeçal­hos, que podem estar con­ti­dos em um ele­men­to na cat­e­go­ria Sec­tion­ing.

• h1

• h2

• h3

• h4

• h5

• h6

• hgroup

Phrasing content

Fazem parte des­ta cat­e­go­ria ele­men­tos que mar­cam o tex­to do doc­u­men­to, bem como os ele­men­tos que mar­cam este tex­to den­tro do ele­men­to de pará­grafo.

• a

• abbr

• area (se ele for descen­dente de um ele­men­to de mapa)

• audio

• b

• bdo

• br

• but­ton

• can­vas

• cite

• code

• com­mand

• datal­ist

• del (se ele con­tiv­er um ele­men­to da cat­e­go­ria de Phras­ing)

• dfn

• em

• embed

• i

• iframe

• img

• input

• ins (se ele con­tiv­er um ele­men­to da cat­e­go­ria de Phras­ing)

• kbd

• key­gen

• label

• link (se o atrib­u­to item­prop for uti­liza­do)

• map (se ape­nas ele con­tiv­er um ele­men­to da cat­e­go­ria de Phras­ing)

• mark

• math
• meta (se o atrib­u­to item­prop for uti­liza­do)

• meter

• noscript

• object

• out­put

• progress

• q

• ruby

• samp

• script

• select

• small

• span

• strong

• sub

• sup

• svg

• textarea

• time

• var

• video

• wbr

• Text

Embedded content

Na cat­e­go­ria Embed­ded, há ele­men­tos que impor­tam out­ra fonte de infor­mação para o doc­u­men­to.

• audio

• can­vas

• embed

• iframe

• img

• math

• object

• svg

• video

Interactive content

Inter­ac­tive Con­tent são ele­men­tos que fazem parte da inter­ação de usuário. • a

• audio (se o atrib­u­to con­trol for uti­liza­do) • but­ton • details • embed
HTML 5 — Cur­so W3C Escritório Brasil 25Markup
• iframe

• img (se o atrib­u­to usemap for uti­liza­do)

• input (se o atrib­u­to type não tiv­er o val­or hid­den)

• key­gen

• label

• menu (se o atrib­u­to type tiv­er o val­or tool­bar)

• object (se o atrib­u­to usemap for uti­liza­do)

• select

• textarea

• video (se o atrib­u­to con­trol for uti­liza­do)

Alguns ele­men­tos no HTML podem ser ati­va­dos por um com­por­ta­men­to. Isso sig­nifi­ca que o usuário pode ativá-lo de algu­ma for­ma. O iní­cio da sequen­cia de even­tos depende do mecan­is­mo de ati­vação e nor­mal­mente cul­mi­nam em um even­to de click segui­do pelo even­to DOMAc­ti­vate.

O user-agent per­mite que o usuário ative man­ual­mente o ele­men­to que tem este com­por­ta­men­to uti­lizan­do um tecla­do, mouse, coman­do de voz etc.

NOVOS ELEMENTOS E ATRIBUTOS

A função do HTML é indicar que tipo de infor­mação a pági­na está exibindo. Quan­do lemos um livro, con­seguimos enten­der e difer­en­ciar um títu­lo de um pará­grafo. Bas­ta perce­ber­mos a quan­ti­dade de letra, taman­ho da fonte, cor etc. No códi­go isso é difer­ente. Robôs de bus­ca e out­ros user-agents não con­seguem difer­en­ciar tais detal­h­es. Por isso, cabe ao desen­volve­dor mar­car a infor­mação para que elas pos­sam ser difer­en­ci­adas por diver­sos dis­pos­i­tivos.

Com as ver­sões ante­ri­ores do HTML nós con­seguimos mar­car diver­sos ele­men­tos do lay­out, estru­tu­ran­do a pági­na de for­ma que as infor­mações ficas­sem em suas áreas especí­fi­cas. Con­seguiá­mos difer­en­ciar por exem­p­lo, um pará­grafo de um títu­lo. Mas não con­seguíamos difer­en­ciar o rodapé do cabeçal­ho. Essa difer­en­ci­ação era ape­nas perce­bi­da visual­mente pelo lay­out pron­to ou pela posição dos ele­men­tos na estru­tu­ra do HTML.

Entre­tan­to, não havia maneira de detec­tar auto­mati­ca­mente estes ele­men­tos já que as tags uti­liza­da para ambos pode­ri­am ser iguais e não havia padrão para nomen­clatu­ra de IDs e Class­es.

O HTML5 trouxe uma série de ele­men­tos que nos aju­dam a definir setores prin­ci­pais no doc­u­men­to HTML. Com a aju­da destes ele­men­tos, podemos por exem­p­lo difer­en­ciar dire­ta­mente pelo códi­go HTML5 áreas impor­tantes do site como side­bar, rodapé e cabeçal­ho. Con­seguimos sec­cionar a área de con­teú­do indi­can­do onde exata­mente é o tex­to do arti­go.

Estas mudanças sim­pli­fi­cam o tra­bal­ho de sis­temas como os dos bus­cadores. Com o HTML5 os bus­cadores con­seguem vas­cul­har o códi­go de maneira mais efi­caz. Procu­ran­do e guardan­do infor­mações mais exatas e levan­do menos tem­po para esto­car essa infor­mação.

Abaixo segue uma lista dos novos ele­men­tos e atrib­u­tos incluí­dos no HTML5:

sec­tion

A tag sec­tion define uma nova seção genéri­ca no doc­u­men­to. Por exem­p­lo, a home de um web­site pode ser divi­di­da em diver­sas seções: intro­dução ou destaque, novi­dades, infor­mação de con­ta­to e chamadas para con­teú­do inter­no.

nav

O ele­men­to nav rep­re­sen­ta uma seção da pági­na que con­tém links para out­ras partes do web­site. Nem todos os gru­pos de links devem ser ele­men­tos nav, ape­nas aque­les gru­pos que con­tém links impor­tantes. Isso pode ser apli­ca­do naque­les blo­cos de links que geral­mente são colo­ca­dos no Rodapé e tam­bém para com­por o menu prin­ci­pal do site.

arti­cle

O ele­men­to arti­cle rep­re­sen­ta uma parte da pági­na que poderá ser dis­tribuí­do e reuti­lizáv­el em FEEDs por exem­p­lo. Isto pode ser um post, arti­go, um blo­co de comen­tários de usuários ou ape­nas um blo­co de tex­to comum.

aside

O ele­men­to aside rep­re­sen­ta um blo­co de con­teú­do que refer­ên­cia o con­teú­do que envol­ta do ele­men­to aside. O aside pode ser rep­re­sen­ta­do por con­teú­dos em side­bars em tex­tos impres­sos, pub­li­ci­dade ou até mes­mo para cri­ar um grupo de ele­men­tos nav e out­ras infor­mações sep­a­ra­dos do con­teú­do prin­ci­pal do web­site.

hgroup

Este ele­men­to con­siste em um grupo de títu­los. Ele serve para agru­par ele­men­tos de títu­lo de H1 até H6 quan­do eles tem múlti­p­los níveis como títu­lo com sub­tí­tu­los e etc.

head­er

O ele­men­to head­er rep­re­sen­ta um grupo de intro­dução ou ele­men­tos de nave­g­ação. O ele­men­to head­er pode ser uti­liza­do para agru­par índices de con­teú­dos, cam­pos de bus­ca ou até mes­mo logos.

foot­er

O ele­men­to foot­er rep­re­sen­ta lit­eral­mente o rodapé da pági­na. Seria o últi­mo ele­men­to do últi­mo ele­men­to antes de fechar a tag HTML. O ele­men­to foot­er não pre­cisa apare­cer nec­es­sari­a­mente no final de uma seção.

time

Este ele­men­to serve para mar­car parte do tex­to que exibe um horário ou uma data pre­cisa no cal­endário gre­go­ri­ano.

Este atrib­u­tos foram descon­tin­u­a­dos porque mod­i­fi­cam a for­matação do ele­men­to e suas funções são mel­hores con­tro­ladas pelo CSS:

• align como atrib­u­to da tag cap­tion, iframe, img, input, object, leg­end, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, col­group, tbody, td, tfoot, th, thead e tr.

• alink, link, text e vlink como atrib­u­tos da tag body.

• back­ground como atrib­u­to da tag body.

• bgcol­or como atrib­u­to da tag table, tr, td, th e body. • bor­der como atrib­u­to da tag table e object.

• cell­padding e cellspac­ing como atrib­u­tos da tag table.

• char e charoff como atrib­u­tos da tag col, col­group, tbody, td, tfoot, th, thead e tr.

• clear como atrib­u­to da tag br.

• com­pact como atrib­u­to da tag dl, menu, ol e ul.

• frame como atrib­u­to da tag table.

• frame­bor­der como atrib­u­to da tag iframe. • height como atrib­u­to da tag td e th.

• hspace e vspace como atrib­u­tos da tag img e object. • mar­gin­height e mar­gin­width como atrib­u­tos da tag iframe.

• noshade como atrib­u­to da tag hr.

• nowrap como atrib­u­to da tag td e th.

• rules como atrib­u­to da tag table.

• scrolling como atrib­u­to da tag iframe.

• size como atrib­u­to da tag hr. • type como atrib­u­to da tag li, ol e ul.

• valign como atrib­u­to da tag col, col­group, tbody, td, tfoot, th, thead e tr.

• width como atrib­u­to da tag hr, table, td, th, col, col­group e pre.

Alguns atrib­u­tos do HTML4 não são mais per­mi­ti­dos no HTML5.

Se eles tiverem algum impacto neg­a­ti­vo na com­pat­i­bil­i­dade de algum user-agent eles serão dis­cu­ti­dos.

• rev e charset como atrib­u­tos da tag link e a.

• shape e coords como atrib­u­tos da tag a.

• longde­sc como atrib­u­to da tag img and iframe.

• tar­get como atrib­u­to da tag link.

• nohref como atrib­u­to da tag area.

• pro­file como atrib­u­to da tag head.

• ver­sion como atrib­u­to da tag html.

• name como atrib­u­to da tag img (use id instead).

• scheme como atrib­u­to da tag meta.

• archive, clas­sid, code­base, code­type, declare e stand­by como atrib­u­tos da tag object.

• val­ue­type e type como atrib­u­tos da tag param.

• axis e abbr como atrib­u­tos da tag td e th.

• scope como atrib­u­to da tag td.

Atributos

Alguns ele­men­tos gan­haram novos atrib­u­tos:

• O atrib­u­to aut­o­fo­cus pode ser especi­fi­ca­do nos ele­men­tos input (exce­to quan­do há atrib­u­to hid­den atribuí­do), textarea, select e but­ton.

• A tag a pas­sa a supor­tar o atrib­u­to media como a tag link.

A tag form gan­ha um atrib­u­to chama­do noval­i­date. Quan­do apli­ca­do o for­mulário pode ser envi­a­do sem val­i­dação de dados.

• O ele­men­to ol gan­hou um atrib­u­to chama­do reversed. Quan­do ele é apli­ca­do os indi­cadores da lista são colo­ca­dos na ordem inver­sa, isto é, da for­ma descen­dente.

• O ele­men­to field­set ago­ra per­mite o atrib­u­to dis­abled. Quan­do apli­ca­do, todos os fil­hos de field­set são desati­va­dos.

• O novo atrib­u­to place­hold­er pode ser colo­ca­do em inputs e textar­eas. • O ele­men­to area ago­ra supor­ta os atrib­u­tos hre­flang e rel como os ele­men­tos a e link

• O ele­men­to base ago­ra supor­ta o atrib­u­to tar­get assim como o ele­men­to a. O atrib­u­to tar­get tam­bém não está mais descon­tin­u­a­do nos ele­men­tos a e area porque são úteis para apli­cações web.

Os atrib­u­tos abaixo foram descon­tin­u­a­dos:

• O atrib­u­to bor­der uti­liza­do na tag img.

• O atrib­u­to lan­guage na tag script.

• O atrib­u­to name na tag a. Porque os desen­volve­dores uti­lizam ID em vez de name.

• O atrib­u­to sum­ma­ry na tag table.

NOVOS TIPOS DE CAMPOS

O ele­men­to input acei­ta os seguintes novos val­ores para o atrib­u­to type:

tel

Tele­fone. Não há más­cara de for­matação ou val­i­dação, proposi­tal­mente, vis­to não haver no mun­do um padrão bem definido para números de tele­fones. É claro que você pode usar a nova API de val­i­dação de for­mulários (descri­ta no capí­tu­lo 8) para isso. Os agentes de usuário podem per­mi­tir a inte­gração com sua agen­da de con­tatos, o que é par­tic­u­lar­mente útil em tele­fones celu­lares.

search

Um cam­po de bus­ca. A aparên­cia e com­por­ta­men­to do cam­po pode mudar ligeira­mente depen­den­do do agente de usuário, para pare­cer com os demais cam­pos de bus­ca do sis­tema.

email

E‑mail, com for­matação e val­i­dação. O agente de usuário pode inclu­sive pro­mover a inte­gração com sua agen­da de con­tatos.
url Um endereço web, tam­bém com for­matação e val­i­dação.

Datas e horas

O cam­po de for­mulário pode con­ter qual­quer um dess­es val­ores no atrib­u­to type:

• date­time

• date

• month

• week

• time

• date­time-local

Todos devem ser val­i­da­dos e for­mata­dos pelo agente de usuário, que pode inclu­sive mostrar um cal­endário, um sele­tor de horário ou out­ro auxílio ao preenchi­men­to que estiv­er disponív­el no sis­tema do usuário.

O atrib­u­to adi­cional step define, para os val­i­dadores e auxílios ao preenchi­men­to, a difer­ença mín­i­ma entre dois horários. O val­or de step é em segun­dos, e o val­or padrão é 60.

Assim, se você usar step=”300” o usuário poderá fornecer como horários 7:00, 7:05 e 7:10, mas não 7:02 ou 7:08.

num­ber

Veja um exem­p­lo do tipo num­ber com seus atrib­u­tos opcionais:

Resul­ta­do:

range

Vamos mod­i­ficar, no exem­p­lo aci­ma, ape­nas o val­or de type, mudan­do de “num­ber” para “range”:

col­or

O cam­po com type=”color” é um sele­tor de cor. O agente de usuário pode mostrar um con­t­role de seleção de cor ou out­ro auxílio que estiv­er disponív­el.

O val­or será uma cor no for­ma­to #ff6600.