O HTML5 é a quinta versão do HyperText Markup Language (HTML), a linguagem de marcação utilizada para estruturar e exibir conteúdo na web. Lançado em 2014, o HTML5 trouxe várias melhorias e recursos avançados em relação às versões anteriores.

• 👏 Como programar em HTML?

Uma das principais vantagens do HTML5 é a inclusão de elementos semânticos, como <header>, <nav>, <section>, <article>, <footer>, que ajudam a estruturar o conteúdo de forma mais clara e acessível para os usuários e mecanismos de busca.

Além disso, o HTML5 introduziu suporte nativo para elementos multimídia, como áudio e vídeo, sem a necessidade de plugins externos. Também trouxe o elemento <canvas>, que permite a criação de gráficos e animações.

Outro recurso importante é a capacidade de criar aplicativos web offline, utilizando o armazenamento local do navegador, permitindo que os usuários acessem conteúdo mesmo sem conexão à internet.

O HTML5 é amplamente utilizado para o desenvolvimento de sites e aplicativos web responsivos e interativos. É suportado por todos os principais navegadores e é compatível com dispositivos móveis.

A história do desenvolvimento do HTML5 envolveu uma colaboração entre a comunidade de desenvolvimento web e o World Wide Web Consortium (W3C), o órgão responsável pelos padrões da web. Foram realizadas diversas melhorias e atualizações para tornar a web mais poderosa e acessível para todos.

Conhecer o HTML5 é essencial para desenvolvedores web, designers e profissionais envolvidos na criação de conteúdo online. 

Com o HTML5, é possível criar páginas web modernas, responsivas e ricas em recursos, proporcionando uma experiência aprimorada para os usuários!

O que é e para que serve HTML5?

O HTML5 é a quinta versão do HyperText Markup Language (HTML), que é a linguagem de marcação utilizada para estruturar e exibir conteúdo na web. O HTML5 é uma atualização significativa em relação às versões anteriores, trazendo novos recursos e melhorias que aprimoram a experiência de desenvolvimento e navegação na web.

O HTML5 é usado para criar a estrutura e a semântica de páginas web. Ele permite definir cabeçalhos, parágrafos, imagens, links, tabelas, formulários e outros elementos que compõem o conteúdo de uma página.

 Além disso, introduziu recursos como suporte nativo para áudio, vídeo e gráficos interativos usando o elemento <canvas>, o que permite uma experiência multimídia rica diretamente no navegador.

Uma das vantagens do HTML5 é a sua compatibilidade com dispositivos móveis. Com o HTML5, é possível criar páginas responsivas que se adaptam automaticamente a diferentes tamanhos de tela, proporcionando uma experiência consistente em desktops, smartphones e tablets.

O HTML5 também oferece recursos para criação de aplicativos web, permitindo que desenvolvedores criem aplicativos executados diretamente no navegador, sem a necessidade de instalação ou download.

Além disso, o HTML5 é frequentemente combinado com outras linguagens como CSS (Cascading Style Sheets) para estilizar a aparência dos elementos e JavaScript para adicionar interatividade e funcionalidades avançadas.

Ao atrelar outras linguagens como CSS e JavaScript ao HTML5, é possível criar experiências mais dinâmicas, interativas e visualmente atraentes. O CSS é usado para estilizar e posicionar os elementos da página, enquanto o JavaScript permite adicionar comportamentos e funcionalidades, como animações, validação de formulários e interações com o usuário.

Como baixar HTML5 grátis?

É importante ressaltar que o HTML5 é uma especificação e um padrão da web, não um software específico para download. O HTML5 é suportado pelos navegadores modernos, como Google Chrome, Mozilla Firefox, Microsoft Edge e Safari, e, portanto, não é necessário baixar o HTML5 em si.

Para começar a desenvolver e utilizar o HTML5, você precisa de um editor de código, como Visual Studio Code, Sublime Text ou Atom, para escrever e editar seu código HTML5. Esses editores estão disponíveis gratuitamente e podem ser baixados a partir dos seus respectivos sites oficiais.

Além disso, tenha um navegador moderno instalado no seu dispositivo para visualizar e testar suas páginas web. Como mencionado anteriormente, os principais navegadores, como Google Chrome e Mozilla Firefox, já suportam o HTML5 nativamente. Você pode baixar esses navegadores gratuitamente diretamente dos seus sites oficiais.

Portanto, o processo de “baixar o HTML5” consiste em obter um editor de código e um navegador moderno para começar a desenvolver e visualizar suas páginas HTML5.

Ao utilizar o editor de código, você poderá criar e editar arquivos HTML5, salvando-os com a extensão “.html”. Em seguida, você pode abrir esses arquivos no seu navegador para visualizar e testar a funcionalidade do seu código.

Qual a diferença entre HTML e HTML5?

HTML5 é uma versão avançada e atualizada do HTML, trazendo várias melhorias e recursos em relação às versões anteriores. Algumas das principais diferenças entre HTML e HTML5 são:

• Semântica: O HTML5 introduziu novas tags semânticas, como <header>, <nav>, <section>, <article> e <footer>, que ajudam a estruturar o conteúdo de forma mais clara e significativa. Melhorando, assim, a acessibilidade e a indexação por mecanismos de busca.
• Multimídia: O HTML5 oferece suporte nativo para elementos multimídia, como áudio e vídeo, sem a necessidade de plugins externos, como o antigo Adobe Flash Torna a reprodução de mídia mais fácil e acessível.
• Gráficos e animações: O HTML5 introduziu o elemento <canvas>, que permite a criação de gráficos e animações diretamente no navegador, sem a necessidade de plugins externos.
• Armazenamento local: O HTML5 inclui recursos para armazenamento local no navegador, como o Web Storage e o IndexedDB. Permite que os aplicativos web armazenem dados no dispositivo do usuário, mesmo quando estão offline.
• Compatibilidade móvel: O HTML5 foi desenvolvido com foco em dispositivos móveis, oferecendo recursos para criar páginas web responsivas que se adaptam a diferentes tamanhos de tela e resoluções.
• APIs avançadas: O HTML5 fornece uma série de APIs poderosas, como a Geolocation API, a Drag and Drop API e a WebSockets API, que permitem que os desenvolvedores criem aplicativos web ricos em recursos.

No geral, o HTML5 é considerado mais vantajoso em relação ao HTML tradicional devido às suas melhorias em semântica, multimídia, gráficos, armazenamento local e compatibilidade móvel. 

Ele oferece uma experiência mais rica e interativa para os usuários, além de simplificar o desenvolvimento e a manutenção de páginas web. É amplamente suportado pelos navegadores modernos e é a escolha preferencial para o desenvolvimento web atualmente.

Qual a versão atual do HTML5?

A versão mais atual do HTML5 é o HTML 5.2. Lançado em 2017, o HTML 5.2 é uma atualização da linguagem HTML e traz melhorias e recursos adicionais em relação às versões anteriores. Os desenvolvedores web utilizam o HTML5.2 para criar elementos e estruturar páginas da web, incluindo texto, hiperlinks e conteúdo multimídia.

Como colocar HTML5?

Para começar a utilizar o HTML5, siga este passo a passo:

• Escolha um editor de código: Primeiro, escolha um editor de código de sua preferência. Alguns exemplos populares incluem Visual Studio Code, Sublime Text e Atom. Esses editores são gratuitos, oferecem recursos avançados e suporte a várias linguagens de programação, incluindo HTML5.
• Crie um novo arquivo HTML: Abra o editor de código e crie um novo arquivo em branco. Salve-o com a extensão “.html” para indicar que é um arquivo HTML.
• Escreva o código HTML: Agora, você está pronto para começar a escrever o código HTML5. Utilize as tags HTML para estruturar e organizar seu conteúdo. Inclua elementos como <html>, <head>, <body>, <header>, <nav>, <section>, <article>, <footer>, entre outros, conforme necessário.
• Adicione elementos e atributos: Utilize as tags HTML para inserir elementos como texto, imagens, links, listas e formulários em seu documento. Explore os diversos atributos disponíveis para estilizar, posicionar e interagir com os elementos.
• Teste no navegador: Salve o arquivo HTML e abra-o em um navegador para visualizar o resultado. O navegador interpretará o código HTML e exibirá a página de acordo com a estrutura e os estilos aplicados.
• Aprimore seu conhecimento: Continue a explorar e aprender novos recursos e técnicas do HTML5. Existem muitos recursos online, tutoriais e cursos que podem ajudá-lo a aprimorar suas habilidades.

Lembre-se de que o HTML5 é uma linguagem de marcação, não de programação, utilizada para estruturar e exibir conteúdo na web. Ele é complementado por CSS para estilização e JavaScript para interatividade. Ao dominar o HTML5, você terá uma base sólida para criar páginas web modernas e interativas.

Onde programar em HTML5?

Existem várias plataformas disponíveis onde é possível programar em HTML5. Abaixo, mencionarei algumas das principais:

• Ambiente de desenvolvimento integrado (IDE): IDEs como Visual Studio Code, Sublime Text e Atom são amplamente utilizados por desenvolvedores web. Eles oferecem recursos avançados, como realce de sintaxe, autocompletar, depuração e integração com sistemas de controle de versão.
• Plataformas de desenvolvimento web: Existem plataformas online que permitem criar e hospedar sites e aplicativos web usando HTML5. Algumas das mais populares incluem WordPress, Wix e Squarespace. Essas plataformas fornecem recursos de criação visual, facilitando o desenvolvimento de sites mesmo para pessoas sem experiência em programação.
• Frameworks front-end: Frameworks como Bootstrap, Foundation e Bulma oferecem uma estrutura predefinida e componentes reutilizáveis para desenvolver interfaces responsivas e estilizadas. Eles incorporam o HTML5 como base, juntamente com CSS e JavaScript, para facilitar o desenvolvimento de projetos web.
• Plataformas de jogos: Para desenvolvimento de jogos em HTML5, existem plataformas como Phaser, Construct e ImpactJS. Elas fornecem recursos específicos para criação e implementação de jogos, incluindo física, animação e manipulação de sprites.

Essas são apenas algumas das plataformas disponíveis para programar em HTML5. A escolha da plataforma depende do tipo de projeto, da experiência do desenvolvedor e dos recursos desejados. 

Independentemente da plataforma escolhida, o HTML5 é amplamente suportado pelos navegadores modernos e oferece a flexibilidade e a capacidade de criar páginas web interativas, aplicativos e jogos.

Como fazer um site HTML5?

Para criar um site em HTML5, siga algumas dicas simples.

Antes de iniciar o desenvolvimento do site, é importante planejar sua estrutura, definir os objetivos, identificar o público-alvo e mapear as páginas e funcionalidades necessárias.

Crie um arquivo HTML e defina a estrutura básica utilizando as tags <html>, <head> e <body>. Inclua meta tags, título e vincule arquivos CSS e JavaScript, se necessário.

Utilize CSS para estilizar o site, definindo cores, fontes, tamanhos, layout, etc. Considere a responsividade para que o site se adapte a diferentes dispositivos e tamanhos de tela.

Adicione o conteúdo textual e multimídia às páginas utilizando as tags apropriadas, como <h1> para títulos, <p> para parágrafos, <img> para imagens e <video> para vídeos. Faça a otimização de tudo para SEO!

Crie uma navegação intuitiva e fácil de usar, utilizando links e menus para que os visitantes possam acessar as diferentes páginas do site. Caso deseje adicionar interatividade, utilize JavaScript para criar animações, validações de formulários e outros recursos dinâmicos.

Quanto ao uso do HTML5 em plataformas como WordPress ou Wix, ambas suportam o HTML5. No caso do WordPress, você pode criar um tema personalizado em HTML5 e importá-lo para a plataforma. No Wix, você pode criar um site personalizado e incorporar o código HTML5 conforme necessário.

No entanto, note que essas plataformas também possuem recursos específicos e opções de design que podem simplificar o processo de criação de um site. Portanto, considere se a utilização dessas plataformas atende às suas necessidades e objetivos antes de optar por desenvolver um site completamente personalizado em HTML5.

O que forma a estrutura de uma página web?

Aqui temos uma associação muito forte com o que vemos no software Word, pois vamos criar uma página com elementos como:

• Títulos;
• Parágrafos;
• Listas;
• Tabelas;
• Imagens;
• e outros elementos;

Todo o texto que você ve em um site, como este que você está lendo, é constituído por HTML. Porém ele não aparece, o HTML é oculto e o navegador só exibe o resultado final como texto. Os elementos são criados a partir de tags, para gerar o texto.

As tags tem uma importância fundamental no HTML, vamos dedicar uma sessão a ela.

O que são tags?

Tudo que é escrito em HTML parte das tags, e elas são constituídas dos mesmos elementos, todas elas.

Então para criar um parágrafo, utilizamos:

<p>Este é um parágrafo</p>

Isso vai gerar um texto comum em um site, porém veja a forma que ele foi codificado

Obs: esta forma de codificar algo também é chamada de sintaxe.

A sintaxe da tag é bem simples, temos a presença de uma tag de abertura e uma tag de fechamento.

A tag de abertura é formada pelo sinal de menor, nome da tag e sinal de maior, exemplo:

<p>.

Entre tags de conteúdo inserimos texto, que é o que será exibido, desta maneira:

<p>Este é um texto.

E para indicar onde é concluído o elemento, temos a tag de fechamento, que é sempre idêntica a tag de aberta com adição de uma barra, veja:

<p>Este é um texto</p>

Temos assim novamente o parágrafo criado, e conforme mencionado antes a tag é fundamental uma parte importante para entendermos o que é HTML.

HTML5 e erros na hora de programar

O HTML não nos pune com erros sendo exibidos na tela, então se fizermos algo errado teremos que notar no que é exibido na tela. Isso é diferente das outras linguagens de programação, que nem deixam o software executar, caso algum erro seja identificado.

Ou seja, é importante seguir a sintaxe do HTML para evitar erros invisíveis e até mesmo os visíveis 🙂

Os atributos do HTML5

As tags por si só são muito úteis, mas geralmente queremos incrementá-las com funcionalidades extras. E então precisamos inserir atributos, eles são muitos e podem nos providenciar uma gama enorme de vantagens.

Um exemplo é a tag de links, quando queremos que o usuário acesse outra página

Veja como ela é criada:

<a href=”https://www.google.com”>Ir para o Google</a>

Temos a anatomia igual a outra tag de parágrafo, ou seja, abertura, conteúdo e fechamento

Mas você notou algo diferente, certo?

O atributo href determina o site que seremos redirecionados ao clicar no link que é gerado pela tag a. Então não somente nesta tag, mas em diversas outras temos atributos que vão ajudar a deixar o nosso site cada vez mais interessante para o usuário.

Podemos configurar diversos parâmetros, como na tag imagem, que nos permite colocar qual imagem queremos inserir no site através da tag.

Encadeamento de elementos (Nesting)

No HTML5 podemos encadear tags, isso é muito utilizado para, por exemplo, separar o site em sessões. Então vamos inserindo tags dentro de outras tags para que o site fique corretamente estruturado.

Algumas tags não aceitam esse recurso chamado nesting, geralmente as de conteúdo, mas há suas exceções. Um bom exemplo de aninhamento é a tag div, veja:

<div>

<h1>Meu título</h1>

<p>Meu conteúdo</p>

</div>

Note que inserimos dois elementos dentro da tag div, um título e um parágrafo. O conteúdo da tag div são as tags h1 e p, e ela serve justamente para isso, um container de elementos

Não há limite de aninhamento de tags, mas temos que manter o bom senso, para deixar o nosso código limpo também. 

Esta ferramenta é muito poderosa ao estruturar layouts, escolher ou não aninhar tags vem também da sua experiência em desenvolver sites. Ou seja, não precisa ficar muito preocupado com isso, quando mais você codifica, mais saberá escolher a estrutura correta.

Tags sem fechamento

Nem todas as tags possuem o fechamento, geralmente quando não possuem conteúdo podemos omitir a tag que fecha. Um bom exemplo é a tag img, que insere imagens no site

Veja ela sendo utilizada:

<img src=”minhaimagem.jpg” alt=”Conteúdo da imagem”>

Note que esta tag tem dois atributos principais:

• src: Caminho até a imagem, pode ser externa também;
• alt: Descriçã do que a imagem representa;

E então como não há conteúdo, sem ser dos atributos, não inserimos o fechamento!

Estrutura básica do HTML5

Até agora vimos tags isoladas, mas na verdade o HTML requer uma configuração base para qualquer site. Você deve criar esta estrutura em qualquer projeto que inicia, com algumas diferenças de configuração, mas a estrutura sempre será essa.

Veja o código inicial completo:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Título</title>

</head>

<body>

<h1>Conteúdo do site</h1>

</body>

</html>

Primeiramente temos a declaração de DOCTYPE isso informa aos navegadores que o documento é um site de HTML5. Depois temos a tag html, que abraça todas as outras tags do documento. E então uma divisão muito importante entre head e body.

Estas duas tags tem propósitos distintos:

• head: Onde inserimos as tags de configuração;
• body: Onde inserimos as tags de conteúdo;

Temos diversas tags de configuração, as da estrutura base se referem a:

• <meta charset=”UTF-8″>: define o encode da paǵina;
• <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: define que os elementos podem se adaptar para diferentes dispositivos;
• <title>Título</title>: define o título que aparece na barra superior do navegador;

Temos outras que podem configurar o ícone que aparece na barra do navegador (favicon) e também inserir folhas de estilo na página (CSS).

Como são muitas as tags, sugiro que lembre apenas que são as tags de configuração, também chamadas de meta tags. E no body temos todas as tags de conteúdo, que representam todos aqueles elementos que o usuário vê.

Conseguimos então separar elas novamente em duas coisas distintas, para você não se confundir. Sendo head tudo que a pessoa que acessa o site não ve, e body tudo o que ela pode ver.

Lembre-se também que você pode acessar qualquer código HTML de qualquer site, por isso não deve colocar informações sensíveis. Para ver o código clique com o botão direito do mouse na página e depois acesse a opção “Inspecionar”.

Uma tela como esta deve abrir:

Na parte esquerda temos o HTML e na parte direito o CSS, o estilo da página. O código pode variar de complexidade, e você não precisa entender tudo que está escrito nele.

Basta saber que tem a opção de verificá-lo, seja de que site for.

Meus cursos de HTML e CSS

Atualmente possuo dois cursos super completos de HTML e CSS, que vão desde o básico até o avançado das linguagens.

• HTML e CSS – O início: como o nome diz, é um curso que vai tratar desde o básico do HTML e do CSS, sem precisar de conhecimento para realizar o curso. Você vai criar 5 projetos para adicionar ao seu portfólio.
• HTML e CSS – Técnicas Avançadas: este curso é para quem já sabe o básico e quer avançar ainda mais no HTML e também no CSS, criaremos projetos responsivos com recursos modernos como o Flexbox. O curso também possui 5 projetos para você desenvolver.

Os principais elementos do HTML

Agora que você já entende o que é HTML5 e também já se situou sobre os principais recursos e seu propósito, vamos explorar as principais tags.

Os títulos (headings)

Esta tag tem diversas variações, começando do h1 e indo até o h6. Serve principalmente para inserir títulos e subtítulos no site. E quando você usa h1 em vez de h4? Depende da importância do título que você quer inserir.

Quando mais ele fazer conexão com o propósito da página, mais perto do h1 ele deve estar

Ou seja, o título principal deve ser um h1, por exemplo.

Veja os headings:

Título principal

Um título menos importante

Note que as letras ficam maiores também escolhendo o h1, por exemplo, mas você não deve utilizar estas tags com este propósito.

Toda a parte de estilo, incluindo o tamanho da fonte, deve ficar a cargo do CSS.

Tag para parágrafo

Os parágrafos servem para conteúdo, quando precisamos comunicar algo.

Já o utilizamos antes, veja:

<p>Insira um texto aqui…</p>

Tags de link (redirecionamento)

Esta tag é utilizada para levarmos um usuário para outro página, que pode ser do nosso site ou não. Basta inserir a URL de destino no atributo href, veja:

<a href=”https://www.google.com”>Ir para o Google</a>

Às vezes também é necessário que o site abra em nova aba, para ele não sair do nosso site, por exemplo. Isso pode ser feito através do atributo target, veja:

<a href=”https://www.google.com” target=”_blank”>Ir para o Google</a>

Agora ao clicar neste link uma nova aba é aberta, e a do nosso site continua aberta também.

Quebrar linha e linha horizontal

Apesar de não serem muito utilizadas, há duas tags que podem realizar ações semelhantes. A br pode quebrar uma linha, ou seja, pular a linha do conteúdo.  E a hr pode inserir uma linha horizontal, uma espécie de divisão no site.

Veja como empregar elas:

<br>

<hr>

Como são tags sem conteúdo, não necessitam de fechamento.

Comentários no HTML

Os comentários são tags inseridas dentro do body, mas que não aparecem para o usuário final. Eles servem para uma comunicação interna do time de desenvolvimento, como a identificação de separação de sessões do site.

São muito úteis enquanto programamos, veja:

<!-- parte inicial -->

<h1>Título da parte inicial

<!-- fim do site -->

Aqui inserimos dois comentários no site, evidenciando duas sessões distintas

A sintaxe é composta pela abertura: <!–

Algum conteúdo, que é o comentário em si e depois temos o fechamento –>

É uma tag especial, por isso a sua sintaxe é levemente diferente.

Veja o exemplo abaixo de comentários reais:

Note que aqui temos também definições de sessões, feitas por meio de comentários!

Listas ordenadas

Listas são estruturas fundamentais do HTML, temos dois tipos e o menos utilizado é o da lista ordenada.

Realmente a funcionalidade fica limita, pois é muito específica.

Vamos utilizar este tipo quando temos uma sequência de passos a ser seguida, por exemplo

Veja na prática:

<ol>

<li>Primeiro passo</li>

<li>Segundo passo</li>

<li>Terceiro passo</li>

</ol>

A tag ol significada ordered list (lista ordenada) e o li list item, esse li é utilizado como o item também das não ordenadas.

Listas não ordenadas

As listas mais utilizadas no HTML acabam sendo as não ordenadas, pela sua flexibilidade

Podemos listar qualquer tipo de conteúdo, e ainda com CSS podemos criar menus horizontais com base nelas.

Exatamente como os que ficam na barra de navegação, ou seja, uma tag para você ficar ligado! 🙂

Veja um exemplo:

<ul>

<li>Primeiro passo</li>

<li>Segundo passo</li>

<li>Terceiro passo</li>

</ul>

Veja que a sintaxe é a mesma, só mudamos ol para ul, que significa unordered list. Como dito antes, as listas são fundamentais para quem quer entender o que é HTML5 a fundo, e dominar a linguagem.

Tag para imagens

Como visto anteriormente é possível adicionar imagens ao HTML por meio da tag img.

Ela leva dois atributos essenciais, a source (src) caminho da imagem e alt, uma espécie de legenda que dá um contexto para a imagem exibida.

<img src=”minhaimagem.jpg” alt=”Conteúdo da imagem”>

O HTML5 permite também imagens de sites externos, e não apenas do servidor que está hospedado o projeto.

Deixando texto em negrito

Para deixar o texto em negrito temos duas tags a b e a strong. Elas tem leves diferenças, em uma área do HTML5 que é chamada de semântica. Porém no efeito visual, tem a mesma aparência.

Veja como utilizar: <p>Uma palavra <b>forte</b></p>

A palavra forte, que está entre a tag b, será representada em negrito.

Utilizamos também esta tag para identificar importância no texto.

Deixando texto em itálico no HTML5

Para os textos ficarem em itálico também temos duas tags: i e em.

Novamente elas tem efeitos semânticos distintos, porém o visual é o mesmo

Veja a aplicação: <p>Uma palavra com <i>ênfase</i></p>

É bom comentar novamente que os estilos devem ser deixados para o CSS, utilize negrito ou itálico para adicionar importância/ênfase ao seu conteúdo onde é necessário.

Conclusão

Neste artigo você aprendeu o que é HTML5 e também quais são as principais tags do HTML. O assunto é bem abrangente e alguns tópicos são considerados até complexos, para programar sites simples o conhecimento adquirido aqui é suficiente.

Agora a próxima etapa é se especializar em assuntos relacionados, como os formulários em HTML. E também a linguagem de estilos CSS, que anda de mãos dadas com o HTML em qualquer site.

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias O link acima contém um cupom de desconto para os cursos!