Aprenda o que é HTML 5 e CSS 3 de uma vez por todas

O que é HTML5 e CSS3

Se você é um web designer que não manja muito de códigos, um iniciante na arte de criar um site ou apenas um curioso, aposto que você já ouviu falar de HTML 5 e CSS 3. Há alguns anos estes “novos padrões” vêm fazendo sucesso nas rodas de discussão dos desenvolvedores front-end (aqueles que programam a parte visual do site). Muitos falam empolgados sobre as novas possibilidades e sobre sua compatibilidade com os dispositivos e navegadores, outros apenas fingem que sabem o que estão falando, mas não entendem bulhufas do que se trata.

Assim como eu, que não sou web designer nem desenvolvedor, apenas um mero curioso, você deve ter se perguntado: “Mas que diabos é HTML 5 e CSS 3? E qual a diferença deles em relação ao bom e velho HTML e CSS?”

O que é HTML5 e CSS3?

Na real mesmo? Vamos com calma. Esses novos padrões não são nenhuma super tecnologia que vai revolucionar a existência humana através da criação de uma nação robô que poderá escravizar os seres humanos forçando-os a trabalhar em campos de concentração, sem intervalos para dormir, se alimentando apenas de pizza, esfihas do Habib’s e café (Wait! Nós já vivemos assim!).

HTML5 no blog

Piadas sem graça à parte, alguns aspectos das novas versões dos padrões da web, por menor que pareçam, já estão de fato revolucionando a maneira como os desenvolvedores programam a parte visível dos sites e, lógico, a experiência dos usuários nestas novas interfaces.

Marcações mais semânticas

Chegou a hora de dar um significado mais claro às coisas. Mas como descobrir o valor de cada informação em um emaranhado de códigos? Queremos saber se no meio do conteúdo existe um número de telefone ou o endereço de algum lugar e não apenas que aquilo é um <p>parágrafo</p>. Para tentar ser menos genérico na hora de programar visualmente o conteúdo, novas marcações, mais semânticas, foram criadas.

O HTML 5 trouxe então novas tags estruturais como <header>, <section>, <article>, <footer> e novas marcações semânticas como <progress>, <meter> e <figure>. Além de tudo isso, o novo padrão oferece suporte a áudio e vídeo sem a necessidade de plugins, imagens vetorias (<svg>) e bitmaps (<canvas>).

HTML 5 não é só HTML

É importante lembrar que, há séculos, os desenvolvedores front-end não trabalham apenas com HTML mas sim com o kit HTML+CSS+Javascript. O HTML diz onde está o conteúdo, o CSS organiza e faz o conteúdo aparecer todo bonitinho e faceiro, já o Javascript dá vida própria a tudo.

Como as novidades não vieram apenas para o HTML, o CSS na sua versão 3 e o Javascript (ninguém sabe direito qual a versão que está hoje) também queriam fazer parte da festa. E assim, o encontro foi chamado de HTML 5.

Falando sobre o CSS 3, ele trouxe algumas guloseimas para a festa. Entre elas está sua nova capacidade de formatação visual como a criação de elementos com bordas arredondadas, o uso de sombras, múltiplos backgrounds, layouts multi-colunas, novos seletores, uso de fontes externas, transformações 2D e 3D e animações.

Um ótimo exemplo das novas possibilidades do CSS 3 está neste desenho do Homer Simpson desenvolvido pelo programador front-end Bernard de Luna. A ilustração foi totalmente feita com os recursos do CSS 3, sem o uso de nenhuma imagem bitmap.

Em suma, tanto a CSS 3 quanto as inúmeras melhorias no Javascript ficaram dentro do assunto HTML 5 e a nomenclatura é dada ao trio e não apenas ao conteúdo HTML. Agora que você já está por dentro de tudo, se alguém aparecer falando alguma abobrinha sobre HTML 5, mande este link para ele!

Este é um guest post escrito por Alessandro Dórea, especialista em marketing digital na BaseKit.

Curtiu o artigo O que é HTML5 e CSS3? Ainda tem dúvidas ou sugestões sobre linguagem de sites? Vamos discutir um pouco sobre o assunto aqui nos comentários.

Sobre Convidado

Este artigo foi escrito por um colaborador convidado (guest post).
Adicionar a favoritos link permanente.

9 Comments

  1. Excelente Artigo, aos poucos vou aprendendo mais e mais, é só ter vontade e correr atrás que aprendemos tudo que quisermos.

  2. Jackson Soares

    Olá Alessandro Dórea Barbi-Cinti, seu artigo está ótimo e muito esclarecedor.

    Eu me encaixo no grupo dos curiosos e sempre tinha dúvidas sobre HTML5, mais o conteúdo desse artigo esclareceu alguns pontos.

  3. Sobre a versão do Javascript, na verdade o nome oficial da linguagem hoje é ECMAScript e está na versão 5 (ECMA-262 v5). As APIs de Javascript descritas na especificação do HTML5 não fazem parte da especificação do ECMA-262, por isso são do HTML5. Ótimo post. Obrigado!

  4. Gostei muito da postagem ,estou criando um blog em wordpress,que fala de php,javascript,cakephp,etc,quero que me ajudem a ganhar popularidade ,tenho 13 anos ,e ja pequei bem o php,trabalho com wordpress 🙂

  5. Evanyll Monteiro

    Cara, sou muito curioso e sempre procurei informações abalizadas sobre html5 e CSS3, mas só agora encontrei algo que me prendeu e que me deu prazer de ler. Tanto que vou voltar aqui outras vezes a fim de reler este mesmo post. Maravilhoso e esclarecedor. Parabéns e muito tank. Aquele abração, de coração, pois você é realmente porreta e arretado.

  6. HTML5 e CSS3 hoje em dia já são uma realidade.

    E são linguagens fantásticas que podem ser potencializadas com uso de Microdados.

    Microdados podem enriquecer a informação inserida em páginas web fornecendo complemento semântico ao HTML. Isso também pode influenciar nos resultados de buscas orgânicas através de SERPS mais interessantes para o usuário.

    Quem estiver interessados na dupla HTML5 e CSS3 indico pensar também no trio HTML5, CSS3 e Microformats.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *