HTML5

Faculdade de Tecnologia Senac Goiás
Curso: Gestão da Tecnologia da Informação – Not.
Componente: Fundamentos de T.I
Professora: Kelly
Alunos: Danillo Gomes, Edson Castro, Flávio Nunes e Victor Hugo.
AEC
22/05/2015
HTML5
Introdução ao HTML
Ao se deparar com uma página da Web no navegador, o que você vê, na perspectiva mais simples
possível, são apenas palavras. É raro encontrar uma página da Web que contenha apenas texto puro.
Mais do que meramente palavras, o que você vê e lê contém características de estilo. Os projetistas de
modernas páginas da Web possuem acesso a centenas de fontes diferentes, diversos tamanhos de fonte,
muitas cores e mesmo vários alfabetos (e.g. espanhol, japonês, russo). Os navegadores modernos podem
exibir a maioria deles de maneira precisa. Páginas da Web podem conter imagens, videoclipes e músicas
de fundo. Podem incluir menus do tipo drop-down, caixas de busca, links clicáveis para produtos ou outras
páginas no mesmo sítio, ou links para páginas de outros sítios. Alguns sítios da Web fornecem mesmo
opções para a personalização da exibição da página de modo a acomodar preferências pessoais ou
deficiências como limitação visual, surdez ou daltonismo. Uma página contém frequentemente caixas de
conteúdo que se movem (rolam) enquanto o restante da página mantém-se imóvel.
Uma gama de tecnologias (como CSS, JavaScript, Flash, AJAX, JSON) pode ser usada para definir os
elementos de uma página da Web. Contudo, na base da estrutura de uma página da Web está
a HTML (HyperText Markup Language ou, em português, Linguagem de Marcação de HiperTexto). Sem
HTML não haveria página da Web alguma. HTML é o que o navegador "lê" para apresentar a página ao
usuário em frente ao computador. As especificações e padrões da HTML são geridas pelo World Wide
Web Consortium (W3C) e pelo Web Hypertext Application Technology Working Group (WHATWG). O
WHATWG considera a HTML um "padrão vivo", em constante evolução, ao passo que o W3C trabalha
tanto com o padrão estabelecido quanto com a sua evolução. A versão mais atual do padrão HTML é
o HTML5 e a sua evolução é o HTML 5.1.
Conceitos e origem do HTML5
HTML5 (Hypertext Markup Language, versão 5) é uma linguagem para estruturação de conteúdo para a
World Wide Web e é a linguagem base para a distribuição de conteúdo na Internet.
Originalmente desenvolvida pelo WHATWG, foi endossada pelo W3C em 2007, reconsiderando sua
decisão de encerrar o desenvolvimento da HTML em favor da XHTML. O Web Hypertext Application
Technology Working Group (WHATWG), criado em 2004 por desenvolvedores da Apple, Fundação Mozilla
e Opera Software, iniciou o trabalho do novo padrão HTML quando o W3C estava se concentrando no
futuro desenvolvimento do XHTML 2.0. A especificação HTML 4.01 não tinha sido atualizado desde 2001.
Em 2009, o W3C decidiu descontinuar o padrão, passando a trabalhar junto com o WHATWG no
desenvolvimento do HTML5.
É importante, para quem deseja aprender a produzir páginas para a web, entender que a HTML não se
destina a definir a apresentação da página na tela, e sim estruturar o conteúdo, determinando as partes do
todo e como cada seção da página se relaciona com as outras. Por exemplo, definem-se na HTML, quais
linhas de texto representam títulos e qual o nível de cada título, não importando de que tamanho e cor o
navegador vai renderizar cada um. Esta nova versão traz reconsiderações importantes quanto ao papel
original do HTML no mundo da Web, com atenção especial à semântica e acessibilidade.
Motivos que levaram ao desenvolvimento da linguagem html5
Quando Steve Jobs e a Apple bloquearam o Adobe Flash, a partir da linha de dispositivos móveis da Apple
(iPhone, iPad, iPod Touch), as principais reivindicações da Apple contra o Flash foram que era um
processador muito pesado, um devorador de bateria, e que HTML5 era um melhor padrão para o futuro.
Rich Tehrani, perito da indústria da comunicação, visionário, autor e colunista americano, chama isso de
"imposto Apple". De acordo com o Projeto de Arquivo HTTP, um site que rastreia mais ou menos 17.000
sites e permite comparar a estatística web ao longo do tempo, o Flash experimentou uma queda de 2% em
uso nos últimos quatro meses. Passou de 49%, em 15 de novembro de 2010, para 47%, em 29 de março
de 2011.
Esta queda está claramente ligada à mudança para o HTML5. Rich Tehrani escreveu sobre como a lenda
do investimento Roger McNamee, diretor e co-fundador da Elevation Partners, vê como certa um ciclo de
expansão, 15 anos pós-Internet, decorrente do HTML5. Este é um interessante retrato que Roger prevê,
simplesmente pela mudança para o HTML5. Muitos podem achar que ele está sendo um pouco dramático
quanto ao impacto do HTML5, então talvez devamos olhar para a taxa de somente 4,5% de desemprego,
uma economia em expansão, e défices baixos.
Apesar de previsões de fim e números alarmantes quanto ao declínio da utilização do Flash, muitos ainda
se perguntam se tais constatações ainda podem ser tidas como precipitadas. Devido às qualidades
indiscutíveis do Flash, responsável por uma revolução na Web no início da década, principalmente em
relação a software online e animação, muitos tendem a duvidar sobre sua extinção. O Flash se
aperfeiçoou principalmente em relação a sua linguagem de programação, a Action Script. Com ele, foi
possível criar aplicações de Intranet, ensino a distância e enriquecimento da interatividade, com vídeos,
textos e imagens, que jamais havia sido visto até o momento.
Entretanto, o HTML 5 chegou nos proporcionando atividades nunca antes vistas na internet. Dentre elas,
está a possibilidade de colocar vídeos em sites, sem necessidade de plug-in. Além disso, ele se integra
melhor com softwares online, como editores de texto, chats e reprodutores de mídia. Outra novidade é seu
maior suporte a tecnologia ponto-a-ponto, um dos pontos que eram tidos como mais fortes no Flash.
Mesmo que o Flash acabe não se extinguindo, é certo que haverá uma reformulação no jeito que
produzimos sites. Por enquanto, parece ser um exagero afirmar que o Flash irá se extinguir, porém, só o
tempo dirá os verdadeiros rumos que a internet tomará. Um dos motivos que levam especialistas a
acreditarem que Flash não acabará de um dia para o outro, é que mesmo com a perpetuação do HTML 5,
ele continuará por muitos anos como o mais poderoso software de animação da web.
Uma substituição gradativa pelo HTML 5 é provável que ocorra no futuro, mas ainda não existe uma
previsão certa. Dentre estas substituições, pode-se dizer que a reprodução de vídeo em HTML 5 é dada
como certa. Para grande maioria, o Flash terá seu espaço garantido nas animações, jogos e softwares,
principalmente os de dispositivos móveis.
Vantagens do HTML 5




Aceitação por todos os dispositivos
Armazenamento de dados offline
Grandes empresas envolvidas
Rentabilidade
Desvantagens do HTML5




Segurança
Armazenamento local limitado
Dados locais podem ser manipulados
Sincronização dos aplicativos offline
Aplicações que possuem HTML5



Google Docs
Angry birds
Scribd
Elementos HTML5
Esta página lista todos os elementos do padrão HTML5, descrito por sua tag de abertura e agrupadas por
função. Ao contrário do que o índice do elemento HTML que lista todas as tags possíveis, padrão, nãopadrão, os válidos, obsoletos ou obsoleto, esta lista apenas os elementos HTML5 válidos. Somente
aqueles devem ser utilizados em novos sites
O símbolo
indica que o elemento foi adicionado em HTML 5. Note-se que outros
elementos listados, podem ter sido modificados ou mantidos pelo HTML5.
Elemento raiz
Elemento
Descrição
<html>
Representa a raiz de um documento HTML ou XHTML. Todos os outros
elementos devem ser descendentes desse elemento.
Metadatos do documento
Elemento
Descrição
<head>
Representa uma coleção de metadados sobre o documento, incluindo links suas definições
de scripts e folhas de estilo.
<title>
Define o título do documento , apresentado na barra de título do navegador ou na guia da
página. Ele só pode conter texto e todas as tags contidas não são interpretados.
<base>
Define a URL base para URL relativa na página .
Elemento
Descrição
<link>
Usado para linkar JavaScript e CSS externo o documento HTML .
<meta>
Define os metadados que não podem ser definidas usando outro elemento HTML .
<style>
Style tag usada para escrever CSS iline.
Scripting
Elemento
Descrição
<script>
Define um script interno ou link para um script externo. A linguagem de script é JavaScript
<noscript>
Define um conteúdo alternativo a ser exibido quando o navegador não suporta scripts..
<template>
Container para conteúdo no lado cliente instanciado em tempo de execução usando
JavaScript.
Seções
Elemento
Descrição
<body>
Representa o principal conteúdo de um documento HTML. Há apenas
um elemento <body> em um documento.
<section>
Define a seção do Documento.
<nav>
Define uma seção que contém apenas links de navegação
<article>
Define que pode existir de forma independente do resto
do conteúdo. Esta Tag poderia ser um post no fórum, um artigo de
revista ou jornal, uma entrada de log da Web, um comentário enviado
pelo usuário, ou qualquer outro item independente doconteúdo.
<aside>
Define um conteúdo reservado do resto do conteúdo da página. Se
for removida, o conteúdo restante ainda fazem sentido.
São elementos que representam os seis níveis de titulos de cabeçalhos
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> dos documentos. Um elemento título descreve brevemente o tema
da seção.
<hgroup>
Agrupa um conjunto de <h1> para <h6> elementos quando um
título tem vários níveis. *tag excluida da documentação do html5 pelo
W3C.
<header>
Define o cabeçalho de uma página ou seção. Muitas vezes contém um
logotipo, o título do site e uma menu de navegação doconteúdo.
Elemento
Descrição
<footer>
Define o rodapé de uma página ou seção. Muitas vezes contém um
aviso de copyright, alguns links para
informações legal ouendereços para dar feedback.
<address>
Define uma seção que contém informações de contato, como endereço
e telefone.
<main>
Define o conteúdo principal ou importante no documento. Existe
apenas um elemento <main> no documento.
Agrupando conteúdo
Elemento
Descrição
<p>
Define uma parte que deve ser exibido como um paragrafo.
<hr>
Representa uma ruptura temática entre parágrafos de um artigo ou seção ou qualquer
conteúdo mais longo.
<pre>
Indica que o seu conteúdo é pré-formatado e que este formato deve ser preservada.
<blockquote>
Representa uma citação.
<ol>
Define uma lista ordenada de itens, que é uma lista que mudam o seu significado,
se alterar a ordem dos seus elementos
<ul>
Define uma lista não ordenada.
<li>
Define um item de uma lista de uma ol ou de um ul.
<dl>
Representa uma Lista de Definição
<dt>
Representa um item da Lista de Definição <dd>.
<dd>
Representa a definição dos termos listados imediatamente antes dele.
O elemento figura representa um conteúdo de fluxo, opcionalmente com um subtítulo.
<figure>
<figcaption>
Representa a legenda do Figure.
<div>
Representa um contêiner genérico sem nenhum significado especial.
Text-level semantics
Elemento
Descrição
<a>
Representa um contêiner genérico sem nenhum significado especial Representa
Elemento
Descrição
um hyperlink, ligando a outro recurso.
<em>
Representa a enfâse do conteudo.
<strong>
Representa a importância de um pedaço de texto com o forte elemento não altera o sentido
da frase.
<small>
Representa lado comentário , que é o texto como um aviso legal, um autor que não é
essencial para a compreensão do documento.
<s>
Representa o conteúdo que é nolonger precisos e pertinentes.
<cite>
Representa thetitle de uma obra.
<q>
Representa um inlinequotation .
<dfn>
Represents a term whose definition is contained in its nearest ancestor content.
<abbr>
Represents an abbreviation or an acronym , eventually with its meaning.
<data>
Associates to its content a machine-readable equivalent . (This element is only in the
WHATWG version of the HTML standard, and not in the W3C version of HTML5).
<time>
Represents a date and time value, eventually with a machine-readable equivalent.
<code>
Represents some computer code .
<var>
Represents a variable, that is an actual mathematical expression or programming context, an
identifier representing a constant, a symbol identifying a physical quantity, a function
parameter, or a mere placeholder in prose.
<samp>
Represents the output of a program or a computer.
<kbd>
Represents user input , often from the keyboard, but not necessary, it may represent other
input, like transcribed voice commands.
<sub>,<sup> Represents a subscript , respectively a superscript.
<i>
Represents some text in an alternate voice or mood, or at least of different quality, such as a
taxonomic designation, a technical term, an idiomatic phrase, a thought or a ship name.
<b>
Represents a text which to which attention is drawn for utilitarian purposes . It doesn't convey
extra importance and doesn't implicate an alternate voice.
<u>
Represents unarticulate non-textual annoatation, such labeling the text as being misspelt or
labeling a proper name in Chinese text.
<mark>
Represents text highlighted for reference purposes, that is for its relevance in another
context.
<ruby>
Represents content to be marked with ruby annotations , short runs of text presented
alongside the text. This is often used in conjunction with East Asian language where the
Elemento
Descrição
annotations act as a guide for pronunciation, like the Japanese furigana .
<rt>
Represents the text of a ruby annotation .
<rp>
Represents parenthesis around a ruby annotation, used to display the annotation in an
alternate way by browsers not supporting the standard display for annotations.
<bdi>
Represents text that must be isolated from its surrounding for bidirectional text formatting. It
allows to embed span of text with a different, or unknown, directionality.
<bdo>
Represents the directionality of its children, in order to explicitly override the Unicode
bidirectional algorithm.
<span>
Represents text with no specific meaning. This has to be used when no other text-semantic
element conveys an adequate meaning, which, in this case, is often brought by global
attributes like class, lang, or dir.
<br>
Represents a line break .
<wbr>
Represents a line break opportunity , that is a suggested wrapping point in order to improve
readability of text split on several lines.
Edições
Elemento
Descrição
<ins>
Defines an addition to the document.
<del>
Defines a removal from the document.
Conteúdo embutido
Elemento
Descrição
<img>
Represents an image .
<iframe>
Represents a nested browsing context , that is an embedded HTML document.
<embed>
Represents a integration point for an external, often non_HTML, application or interactive
content.
<object>
Represents an external resource , which will be treated as an image, an HTML subdocument or an external resource to be processed by a plugin.
<param>
Defines parameters for use by plugins invoked by <object> elements.
<video>
Represents a video , and its associated audio files and captions, with the necessary
interface to play it.
Elemento
Descrição
<audio>
Represents a sound , or an audio stream .
<source>
Allows authors to specify alternative media resources for media elements
like <video> or <audio>.
<track>
Allows authors to specify timed text track for media elements like <video> or <audio>.
<canvas>
Represents a bitmap area that scripts can be used to render graphics, like graphs, game
graphics, any visual images on the fly.
<map>
In conjunction with <area>, defines an image map .
<area>
In conjunction with <map>, defines an image map .
<svg>
Defines an embedded vectorial image .
<math>
Defines a mathematical formula .
Tabulação de dados
Elemento
Descrição
<table>
Represents data with more than one dimension .
<caption>
Represents the title of a table .
<colgroup> Represents a set of one or more columns of a table.
<col>
Represents a column of a table.
<tbody>
Represents the block of rows that describes the concrete data of a table.
<thead>
Represents the block of rows that describes the column labels of a table.
<tfoot>
Represents the block of rows that describes the column summaries of a table.
<tr>
Represents a row of cells in a table.
<td>
Represents a data cell in a table.
<th>
Represents a header cell in a table.
Formulários
Elemento
Descrição
<form>
Represents a formular , consisting of controls, that can be submitted to a server for
processing.
Elemento
Descrição
<fieldset>
Represents a set of controls .
<legend>
Represents the caption for a <fieldset>.
<label>
Represents the caption of a form control.
<input>
Represents a typed data field allowing the user to edit the data.
<button>
Represents a button .
<select>
Represents a control allowing the selection among a set of options .
<datalist>
Represents a set of predefined options for other controls.
<optgroup>
Represents a set of options , logically grouped.
<option>
Represents an option in a <select> element, or a suggestion of a <datalist> element.
<textarea>
Represents a multiline text edit control .
<keygen>
Represents a key pair generator control .
<output>
Represents the result of a calculation .
<progress>
Represents the completion progress of a task.
Represents a scalar measurement (or a fractional value), within a known range
<meter>
Elementos interativos
Elemento
Descrição
<details>
Represents a widget from which the user can obtain additional information or controls.
<summary>
Represents a summary , caption , or legend for a given <details>.
<command>
Represents a command that the user can invoke.
<menu>
Represents a list of commands .
Referência
http://pt.wikipedia.org/wiki/HTML5
https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/HTML5_element_list