Desenvolvimento HTML

O que é HTML5? Aprenda tudo sobre HTML5 (tags, atributos e mais)

20 de setembro de 2021

O que é HTML5? Aprenda tudo sobre HTML5 (tags, atributos e mais)

Neste artigo você vai aprender o que é HTML5, e também conseguirá dar os primeiros passos na linguagem HTML 5, que é tão utilizada na programação

O que é HTML capa

Fala programador(a), beleza? Hoje quero te apresentar melhor o HTML5, uma linguagem de marcação utilizada em qualquer projeto de desenvolvimento web!

Veja o conteúdo do artigo em vídeo também (criando um projeto):

O que HTML significa?

Permita-me começar da definição do que realmente HTML significa, pois isso vai ajudar a entender melhor todos os seus recursos posteriormente

HTML é um acrônimo para Hypertext Markup Language, ou seja, é uma linguagem de marcação e não de programação

E o que isso implica de fato?

Basicamente não podemos realizar condicionais lógicas, estruturas de repetição, funções e outros recursos que uma linguagem de programação tem

Isso simplifica muito as coisas, pois temos como única finalidade estruturar as páginas web

Podemos pensar que o HTML é a estrutura de uma obra, sendo utilizada apenas para formar o alicerce

Para deixá-la finalizada em termos de acabamento iremos utilizar uma outra tecnologia, o CSS

E para adicionar funcionalidades e interações com o usuário utilizamos JavaScript

Essa tríade compõe o desenvolvimento web front-end, mas vamos focar no HTML, que é o assunto principal aqui

O que forma a estutura 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ívels

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:

estrutura html de uma pagina

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:

<h1>Título principal</h1>
<h3>Um título menos importante</h3>

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>

As 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:

exemplo de comentarios no HTML5

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 aritgo 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 tecnologiasO link acima contém um cupom de desconto para os cursos!

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x