O HTML5 é a última versão de Hypertext Markup Language (Linguagem de marcação de texto), o código para estruturar páginas na web. Nessa atualização, foram incluídos vários recursos que otimizam a exibição de vários tipos de conteúdos nos navegadores, como a exibição de artigos, imagens, vídeos, áudios criação de gráficos.
Neste post, daremos 5 dicas de HTML5 que deveriam estar presente em um bom curso de HTML5. Vamos lá!
1. Cabeçalho e metadados
No cabeçalho de uma página web, são incluídos diversos itens relacionados à forma como a página será exibida e que a descrevem para navegadores e mecanismos de busca. Alguns deles são:
- descrição da página;
- keywords, palavras que ajudam os buscadores a identificar se na página há o tipo de conteúdo que o usuário busca;
- indicação de quais tipos de caracteres serão exibidos; e
- inclusão de javascript e CSS.
2. Estruturação de textos
O HTML5 trabalha com tags semânticas, como posts em um blog, endereços, rodapés e legendas, que melhoram a exibição do conteúdo. Elas tornam a página mais intuitiva para os navegadores, que, assim podem exibir o texto de forma mais legível para o usuário.
Nessa versão especialmente foram incluídas tags como:
- <main>: onde fica situado o principal conteúdo da página;
- <header>: ideal para títulos de textos e mensagens;
- <figcaption>: tag para legendas em figuras;
- <figure>: tags entre as quais figuras e uma legenda são inseridas;
- <article>: tags dentro das quais o conteúdo completo de artigos é colocado.
3. Formulários
Na última atualização, foram incluídas diversas funções que facilitam a estruturação e validação de formulários. Também foram desenvolvidos métodos que facilitam a criação de ferramentas que interagem com o usuário.
O fieldset, por exemplo, agrupa itens de formulários como campos para inserção de texto, checkbox, combobox e botões. Já o datalist contém vários elementos, cada um em uma tag <option>, que ficam disponíveis para uso em outros elementos. Ele pode ser usado para um autocomplete para um input, por exemplo.
Os atributos oninput e o campo output permitem que, em um formulário HTML (sem uso de javascript ou acesso a uma aplicação de backend), se possam aplicar funções sobre dados inseridos em um formulário pelo usuário, agilizando assim rotinas como validação e outras.
Ainda, foram acrescentados atributos e tags para melhoria da interação com o usuário, como autofocus, progress, e parâmetros para indicar o tipo de campo, como e-mail, texto e numérico. Eles tornam mais fácil verificar se os campos são preenchidos com o tipo correto de informação.
4. Inserção de áudio e vídeo
Com HTML5, a exibição de áudios, vídeos e imagens foi bastante simplificada. Foi eliminada a necessidade de utilização de plugins para a exibição um vídeo ou uma animação, por exemplo, o que deixa a página mais leve e segura.
Com <audio>, pode-se incluir controles e o link para o arquivo de áudio. Já com <video> temos funções e atributos que permitem:
- localizar o vídeo e incluir controles;
- indicar largura, altura;
- configurar se ele será exibido logo ao abrir a página ou após o usuário clicar em play; e
- link para imagem que fica sobre o vídeo antes de ser exibida.
No caso de textos com legenda, no próprio HTML podemos colocar o link para o arquivo com as legendas.
5. Criação de gráficos e animações
No HTML5 temos a tag <canvas>, dentro da qual podem-se desenhar gráficos de forma rápida e dinâmica. É necessário usar um código Javascript para desenhar os gráficos dentro dela, que não comporta apenas um container para os gráficos, mas, sim, disponibiliza diversos métodos para desenhar retângulos, linhas, textos e acrescentar de imagens.
Vimos assim que o HTML5 contém diversas atualizações que agilizam o desenvolvimento de páginas web, com recursos que ajudam a criar projetos mais dinâmicos e seguros. Com essas dicas de HTML5, é possível ter uma referência de qual conteúdo deve estar presente em um bom curso para que possa criar páginas dinâmicas e interativas, aproveitando bem os recursos da linguagem.
Está interessado em aprender tudo o que precisa para criação de páginas web? Conheça os cursos da MX Cursos. Você vai encontrar aulas de HTML5, CSS, Javascript, Jquery, Bootstrap, diversas linguagens e frameworks para a criação de páginas responsivas, interativas e com design atraente e moderno!