5 coisas que você não sabia que poderia fazer com html

Sep 14, 2025

Como

Vamos enfrentá-lo, o desenvolvimento da Web pode facilmente se tornar uma bagunça. HTML, CSS e Javascript. Todos evoluíram de origens humildes ao longo de muitos anos e são amplamente equívocas em termos de como você deve usá-los. Como resultado, é muito fácil construir uma bagunça querível. Aderindo aos padrões e aproveitar as mais recentes melhorias nas especificações não garante um bom código, mas certamente pode ajudar.

Em qualquer tipo de desenvolvimento de software, a modularidade é rei quando se trata de construir código sustentável. Como resultado, você vai querer ficar de olho nos componentes da Web. O suporte do navegador não é ótimo, mas se você se agarra polifills. , você pode chegar à frente da curva e começar a aproveitar elementos personalizados para estruturar seu código imediatamente. Este estilo de desenvolvimento é o futuro, por isso vale a pena se familiarizar com isso agora.

Keep code streamlined for clearer understanding — Mantenha o código simplificado para a compreensão mais clara

A própria HTML5 introduziu uma série de novos elementos (e depreciou vários) para ajudar a incentivar boas práticas de codificação. Você pode ter ouvido falar de marcação semântica, que se refere ao uso dos elementos descritivos do HTML5, como & lt; Artigo & GT; e & lt; figura e gt; para indicar o tipo de conteúdo que eles contêm.

Isso pode realmente ajudar na limpeza do seu código, pois os elementos HTML identificarão imediatamente, por exemplo, quais partes representam a barra de menus, suas seções de conteúdo, o rodapé e assim por diante.

Também ajudará se você aproveitar os mais recentes padrões de JavaScript. JavaScript também pode ficar confuso, mas se tornou muito mais fácil trabalhar nos últimos anos. A sintaxe ES6 é amplamente suportada nos navegadores, e características como funções e classes de seta podem tornar sua vida muito mais fácil - ainda assim muitos desenvolvedores não estão familiarizados ou cautelosos de usá-los.

Continuando o tema do desenvolvimento modular, o JavaScript também suporta o carregamento do módulo, o que pode ajudá-lo a gerenciar suas dependências de forma limpa.

01. Reconhecer e sintetizar a fala

The sound of things to come — O som das coisas para vir (Crédito de imagem: Foto de Jason Rosewell em Unsplash)

Estes teriam sido funções complexas que exijam software especializado, mas agora estão sendo construídas diretamente nos navegadores. A API de fala da Web possui componentes que suportam texto para fala e fala para texto. Este último deles usará um serviço on-line (Chrome usa a API do Discurso do Google Cloud) ou o serviço de reconhecimento de fala nativa do dispositivo. Espere ver isso sendo usado amplamente nos dispositivos móveis no futuro.

02. Exibir um selecionador de cores

Choosing the right colour — Escolhendo a cor certa (Crédito de imagem: Foto por Scott Webb em Unsplash)

Trivial Como pode parecer, este é um ótimo exemplo de como o HTML5 é simplificar tarefas comuns que anteriormente teriam necessárias codificação personalizada de um componente intermediário bastante complexo. & lt; tipo de entrada = "cor" & gt; exibirá um selecionador de cores visual quando clicado, usando um seletor de cores nativo do dispositivo. Isso pode ser particularmente útil com tela HTML. É amplamente suportado com exceção do Safari no celular.

03. Recolour o Ui do Navegador

Colour themes for browsers — Temas de cor para navegadores (Crédito de imagem: Foto de Marko Blažević em Unsplash)

Isso pode oferecer um bom toque estético em plataformas móveis. & lt; meta nome = "conteúdo temático" conteúdo = "# ffffff" / & gt; é projetado para instruir o navegador para recolover a barra de ferramentas ao visualizar seu site. Infelizmente, é um pouco não padronizado, então enquanto "Theme-color" Funciona com Chrome, Firefox e Opera, no iOS você precisará "Apple-Mobile-Mobile-Web-App-Status-Bar-Bar" (Funciona apenas no modo de tela cheia).

04. Imagens diferentes para telas diferentes

Specifying the image and the resolution — Especificando a imagem e a resolução (Crédito de imagem: Foto por Tran Mau Tri TAM em Unsplash)

Espero que você já esteja implementando design responsivo, caso em que suas imagens sejam redimensionando para se adequar à viewport. Isso não é perfeito, já que você vai forçar o usuário a baixar a maior versão da imagem, então downsampling. Digite o HTML5. & lt; quadro e gt; elemento, que permite especificar imagens diferentes a serem exibidas dependendo da resolução da tela, o site está sendo visualizado.

05. Vibrar seu telefone

Shakin' all over — Shakin todo mais (Crédito da imagem: Foto por Gilles Lambert em Unsplash)

A API de vibração não ambiguamente chamada expõe uma única função, vibrar (), que fará exatamente o que diz sobre dispositivos que o suportam. A função leva uma lista descrevendo um padrão de vibração como argumento. Trabalhará no Chrome, Firefox e Ópera, embora você esteja sem sorte na borda ou safári. É relatado que alguns anúncios estão usando isso para atrair a atenção do usuário, então o júri está fora se é realmente uma boa ideia.

Este artigo originalmente apareceu em Web designer edição 266. Compre aqui .

Artigos relacionados: