Eu já vi esse site e esse site , mas isso é muito para digerir. Quais são as principais coisas do HTML5 que o tornam diferente / melhor do que o HTML / CSS antigo comum (X)?
23
O HTML5 é enorme , mas também incrível .
Na minha opinião, é principalmente sobre interoperabilidade . A especificação vai e especifica até casos extremos para tentar garantir que todos os navegadores leiam a marcação da mesma maneira .
Em segundo lugar, o HTML5 possui vídeo e áudio, que fazem exatamente o que o nome diz que faz. Se você deseja incluir vídeo ou áudio, o HTML5 deve reduzir as necessidades de seu plug-in.
Em terceiro lugar, o HTML5 inclui muita acessibilidade e ajuda semântica. Por exemplo, elementos como <section>e <article>ajudam as máquinas a descobrir qual conteúdo deve ser. Novos tipos de entrada como <input type=email>também podem ser úteis pelos mesmos motivos, embora os novos tipos de entrada incluam UIs personalizadas que os tornam úteis mesmo para leitores humanos "comuns".
Observe que os novos recursos de formulários são muito mais que novos tipos de entrada. Ele também inclui suporte para texto de espaço reservado e vários outros atributos.
O HTML5 inclui <canvas>, o que permite desenhar formas 2D (e, com WebGL, 3D) como gráficos ou até renderizar jogos.
O comportamento antigo agora é padronizado, como o antigo do Internet Explorer contentEditable.
O DOCTYPE é finalmente decente! Agora você pode memorizá-lo!<!DOCTYPE html>
Especificar a codificação também é mais fácil, com <meta charset=utf-8>.
Se você deseja enviar dados para o cliente e associá-los a elementos, agora pode fazê-lo com atributos customizados. Por exemplo, <div data-status=open>Open</div>agora é finalmente permitido. Observe que os nomes de atributos customizados devem ser prefixados data-.
Agora você pode incluir SVG e MathML em documentos HTML. Anteriormente, você só podia fazer isso com documentos XHTML.
Entre as várias novas funções e campos que o HTML5 define, uma das mais impressionantes é classList, que permite manipular o atributo de classe mais facilmente. Em vez de ter que getAttribute / setAttribute e usar hacks complexos para descobrir quais classes um elemento possui e remover uma classe específica desse elemento, classList torna essas situações difíceis muito simples.
Também existem várias especificações relacionadas, como Web Workers, Web Sockets e IndexedDB, que não fazem parte do HTML5, mas todos falam sobre elas como se fossem. Eles são muito úteis para aproveitar os computadores com vários núcleos, se comunicar com os servidores e armazenar dados localmente.
Quanto ao CSS3, inclui suporte para animações , transições , bordas arredondadas e o modelo de caixa flexível .
Também novos no CSS3 são os novos seletores, que simplificam a correspondência de elementos específicos em uma página (como apenas as linhas pares ou ímpares em uma tabela).
Opacidade, novas unidades, letreiro e rubi também fazem parte do CSS3.
Eu acho que abrange praticamente todas as partes importantes.
Para acompanhar os recursos e especificações de suporte, você pode verificar Quando posso usar . Inclui recursos HTML5 e CSS3 e coisas como SVG, PNG, CSS2.1 e CSS2. Ele também rastreia seu status de aprovação (Recomendação, Recomendação Proposta, Recomendação de Candidato, Esboço de Trabalho, padrão da IETF). O FindMeByIP mantém matrizes de recursos CSS3 suportados apenas, pelo navegador.
Ocorreram algumas alterações e simplificações da sintaxe nos parafusos e porcas:
<!DOCTYPE html>languageAtributo simplificado para a<html>tag:<html lang="en">(ainda pode incluir
xmlnsexml:langse você deseja conformidade com XML)<meta>Tag dedicada paracharset:<meta charset="utf-8" />scriptnão aceita maistypeatributo, requercharsetscripts remotos:<script src="/media/js/jquery.js" charset="utf-8"></script>(scripts em linha não precisam de atributos adicionais)O HTML5 permite que sua marcação seja muito mais semântica e, em geral, muito mais fácil de ler / gravar e ter tamanhos de arquivo menores. Em vez de ter
<div id="nav">, você apenas tem<nav>. Não parece muito, mas acrescenta-se.Muitos elementos de XHTML1 e HTML4 foram preteridos. Os seguintes elementos não são suportados em HTML5:
<acronym>,<applet>,<basefont>,<big>,<center>,<dir>,<font>,<frame>,<frameset>,<noframes>,<s>,<strike>,<tt>,<u>e<xmp>.Vários novos elementos no HTML5 destinam-se a adicionar apenas mais marcações semânticas e não farão nada, exceto fornecer uma alternativa mais significativa a
<div>. Estes novos elementos incluem:<article>,<section>,<aside>,<hgroup>,<header>,<footer>,<nav>,<time>,<mark>,<figure>, e<figcaption>.Os formulários HTML5 são bastante aprimorados.
Novos tipos de entrada
Novos atributos:
Novos elementos
<keygen>,<datalist>,<output>,<meter>E<progress>Poderíamos entrar em formulários o dia todo, mas aqui estão alguns recursos para explicar melhor todas essas coisas novas.
CSS3 traz o maravilhoso das consultas de mídia . As consultas de mídia são tão, tão, tão boas. Não disponível no IE8 e abaixo, mas será suportado pelo IE9.
CSS3 tem contadores de incremento . Você pode usá-los para numerar elementos automaticamente sem uma lista ordenada usando o
:beforepseudo-seletor e ocontentestilo quando uma lista ou numeração ordenada seria semanticamente incorreta. (Por exemplo, numerando as etapas de preenchimento dos campos do formulário.)Se você é um fã das redefinições de CSS, há uma redefinição de CSS em HTML5 disponível no HTML5 Doctor. Fiz três adições a essa redefinição para minhas páginas pessoais:
text-rendering: optimizeLegibility;adicionado aos estilos na definição de<body>labelincluído na definição cominputeselectuma vez que precisavertical-align: middle;inse:focusde Redefinição de CSS de Eric Meyer adicionados novamente emUma redefinição concorrente chamada reset5 está disponível, mas ainda não a avaliei pessoalmente. Baseia-se em ambos os resets Eric Meyer e HTML5 médico.
A Folha de dicas de segurança do HTML5 rastreia erros nos recursos HTML5, conforme implementados em vários navegadores, e também inclui erros nos recursos existentes, que também são bons para acompanhar.
No entanto, o uso de elementos HTML5 não torna seu código automaticamente semântico. O WHATWG escreveu um artigo chamado <seção> não é apenas uma "divisão semântica <" explicando que não é simplesmente um elemento de contêiner.
Como tudo no mundo, existe uma estrutura para aplicativos da Web HTML5 chamada SproutCore , criada por um ex-engenheiro da Apple chamado Charles Jolley.
Além de html5rocks.com, você pode acompanhar html5doctor.com e html5gallery.com .
fonte
Há o layout básico, como raio da borda, sombras (caixa / texto), suporte a rgba e assim por diante; É por isso que o CSS3 é mais conhecido. Mais interessantes são as tags de tela, de vídeo, armazenamento local, websockets e assim por diante, que criarão experiências de usuário muito mais ricas em HTML / JS / CSS simples. Esses recursos podem ser uma ótima alternativa para o Flash na Web sem a necessidade de plug-ins adicionais.
fonte
Acho os novos elementos HTML bastante interessantes ... alguns deles são substituições semânticas promissoras para
divs genéricos . Os novos elementos promissores incluemarticle,section,aside,figure,nav,header, efooter, entre outros. Eu realmente gosto da idéia de elementos semânticos substituindo recipientes sem sentido.Ah, sim, um item relacionado: o muito simplificado
doctype- finalmente, algo que posso digitar de memória!fonte
( Esta é a minha resposta para uma pergunta semelhante em webapps.stackexchange.com )
Os Threads do Canvas e do Worker Web são os aspectos mais interessantes do HTML5 para mim. Eu escrevi alguns aplicativos da Web que usam esses recursos:
GioAUTHor [sic] faz uso extensivo da tela para permitir traçar caminhos em um mapa e, em seguida, encontrar a rota mais curta do início ao fim (através do algoritmo de Dijkstra em JavaScript).
O JavaScript Thread Demo faz uso limitado da tela, mas mostra o uso de Worker Threads, completo com o código de demonstração. Ele também usa o controle deslizante input type = "range" do HTML5 .
O suporte ao navegador HTML5 é tão variado quanto os próprios navegadores. Existe um site interessante (em HTML5, natch) sobre a prontidão para HTML5 que mostra quem está pronto para o que.
fonte
No que diz respeito ao CSS3 - consulte http://css3please.com/ para ver o que você pode fazer.
Quanto mais tarde o seu navegador, maior a probabilidade de você ver os efeitos.
fonte
As tags de áudio e vídeo permitem a apresentação de mídia sem a necessidade de um plug-in como o Flash ou o Silverlight, e o mais importante funciona nos navegadores iPhone e iPad. Há alguns problemas que precisam ser resolvidos com relação a codecs e gerenciamento de direitos digitais.
fonte
Jeremy Kieth acaba de lançar um livro realmente bom sobre o tópico "HTML5 para Web Designers". Você pode querer verificar isso.
É o primeiro livro de A Book Apart. Altamente recomendável para intermediários a designers avançados. A ++
http://books.alistapart.com/
NOTA : você pode ter que esperar para obter uma cópia impressa
fonte
Isso não oferece uma opinião sobre a importância, mas é um delta útil entre os HTMLs 4 e 5.
Meus 2 ¢ nas principais melhorias:
<section>e o novo algoritmo de esboço de cabeçalho (eu disse que eram apenas meus 2 ¢)<input type=email>data-*atributos<audio>e<video>fonte
Porque ninguém colocou isso ainda:
O HTML5 é excelente para o que todos listaram, mas também inclui geolocalização padrão, trabalhadores da Web, soquete da Web, canvas e armazenamento local. Todas essas ferramentas fazem parte da especificação HTML5, que usa muito JavaScript nos bastidores para fazer isso acontecer.
fonte