Tudo que você precisa para saber usarTags e atributos no HTML
HTML (HyperText Markup Language) é a linguagem padrão usada para criar e estruturar páginas na web. Cada página web que você vê em um navegador é construída a partir de um documento HTML, que define a estrutura básica do conteúdo, como textos, imagens, links, vídeos, e outros elementos interativos.
Como o HTML Funciona
O HTML usa "tags" ou "marcadores" para identificar diferentes tipos de conteúdo e suas funções na página. Existem dois tipos de tags, as Tags de Abrir e Fechar e as Tags Auto-fechantes.
Tags de Abrir e Fechar
Esse tipo de tag é composta por uma tag de abertura e uma tag de fechamento. A tag de abertura inicia o elemento e a tag de fechamento encerra o elemento, sendo possível adicionar conteúdos e outras tags entre essas.
O nome da tag de abertura é envolvida por sinais de maior e menor <nome> e o nome da tag de fechamento é envolvida pelos mesmos sinais, entretanto com a adição de um símbolo de barra após o sinal de menor </nome> .
Exemplo:
<p>Este é um parágrafo.</p>
Neste exemplo:
<p>é a tag de abertura para um parágrafo.</p>é a tag de fechamento para o parágrafo.- O texto "Este é um parágrafo." é o conteúdo do elemento.
Tags Auto-Fechantes
Esse tipo de tag não precisa de uma tag de fechamento. Essas tags são usadas para elementos que não têm conteúdo interno, como imagens, quebras de linha, entre outros.
Exemplo:
<img src="imagem.jpg" alt="Descrição da Imagem" /> <br />
Tags auto-fechantes também podem ser finalizadas com /> ao invés de > . Essa prática permite compatibilidade com a linguagem de marcação XML, que era uma necessidade ao escrever arquivos XHTML antes da chegada do HTML5. O uso dessa prática voltou com a chegada de ferramentas modernas de desenvolvimento JavaScript que se baseiam em XML.
<img src="imagem.jpg" alt="Descrição da Imagem" /> <br />
Como criar uma Página Web
Uma página web HTML começa com a declaração <!DOCTYPE html>, seguida por uma tag <html>, que envolve todo o conteúdo da página. Dentro da tag <html>, há duas seções principais: <head> e <body>.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Minha Página Web</title>
</head>
<body>
<h1>Bem-vindo à Minha Página</h1>
<p>Este é um exemplo de parágrafo na minha página.</p>
</body>
</html>
Você pode usar um editor de texto como o Bloco de notas do Windows ou uma ferramenta de desenvolvimento como o Visual Studio Code, colar o código acima, e salvar o arquivo com a extenção correta (Exemplo:minha_pagina.html), com isso, basta clicar nesse arquivo para abrir sua página web recém criada no navegador.
Instruções especiais
Instruções especiais em HTML são fragmentos ou estruturas que desempenham papéis específicos e não se encaixam na definição tradicional de "tags" HTML. A maioria dessas instruções entrou em desuso com a evolução dos navegadores e a chegada do HTML5, então, para fins de desenvolvimento de software moderno as instruções especiais mais relevantes são:
Declaração do DOCTYPE
Define o uso da versão mais atualizada do HTML, o HTML5, sendo responsável por avisar ao navegador quais tags e atributos são válidos e como ele deve interpreta-los.
<!DOCTYPE html>
Comentários
Trechos de código que não são exibidos na página web e são usados para adicionar anotações ou desativar partes do código HTML.
<!-- Este é um comentário. -->
<p>Texto visível na página.</p>
<!--
<p>Este parágrafo está comentado e não será exibido.</p>
-->
Entidades de Caracteres
Sequências que representam caracteres especiais e reservados em HTML.
© (representa "©") < (representa "<") > (representa ">") &
(representa "&") (representa um espaço não separável)
O que são e como adicionar atributos
Atributos fornecem informações adicionais sobre um elemento HTML e são colocados dentro da tag de abertura. Eles são usados para definir características ou propriedades específicas de um elemento.
Tipos de atributos:
- Atributos com Valor: São atributos que têm um valor associado. A sintaxe é
atributo="valor". Esses atributos são usados para fornecer informações específicas sobre o elemento. Exemplo:
Neste exemplo:<a href="https://www.example.com" target="_blank">Visite o Exemplo</a>href="https://www.example.com"especifica o URL para o link.target="_blank"define que o link deve ser aberto em uma nova aba.
- Atributos Sem Valor: São atributos que não possuem um valor. A presença do atributo por si só ativa um comportamento específico. A sintaxe é simplesmente
atributo. Exemplo:
Neste exemplo:<input type="checkbox" checked />checkedé um atributo booleano que indica que a caixa de seleção deve estar marcada. Não é necessário atribuir um valor; a presença do atributo já indica o comportamento.
- Atributos Opcionais: Alguns atributos podem ter valores padrão ou podem ser omitidos, dependendo do elemento e do contexto. Eles podem ser incluídos conforme necessário para ajustar o comportamento do elemento.
Exemplo:
Neste exemplo:<img src="imagem.jpg" alt="Descrição da Imagem" width="300" />alt="Descrição da Imagem"fornece um texto alternativo para a imagem.width="300"define a largura da imagem.
Lista de tags e atributos possíveis
Existe uma infinidade de tags e atributos que você pode ver entrando em MDN Web Docs - HTML elements reference, entretanto para se criar uma página web completa, poucas tags realmente são necessárias. Isso acontece porque, a grande maioria de tags existe para fins de melhorar a buscas em sites como Google, e para fins de acessibilidade.
Não é muito incomum criar um site usando tags básicas, e dependendo do propósito, e no futuro alterar algumas para tags específicas.
Dito isso, vou listar as tags mais populares para construir qualquer tipo de página web.
<a></a>
Descrição: Define um link.
Atributos Possíveis: href, target, title, rel, id, class
<div></div>
Descrição: Define uma divisão ou seção em um documento.
Atributos Possíveis: id, class
<span></span>
Descrição: Define uma seção de texto em linha.
Atributos Possíveis: id, class
<p></p>
Descrição: Define um parágrafo de texto.
Atributos Possíveis: id, class
<img>
Descrição: Define uma imagem.
Atributos Possíveis: src, alt, width, height, id, class
<br>
Descrição: Define uma quebra de linha.
Atributos Possíveis: id, class
<hr>
Descrição: Define uma linha horizontal.
Atributos Possíveis: id, class
<ul></ul>
Descrição: Define uma lista não ordenada.
Atributos Possíveis: id, class
<li></li>
Descrição: Define um item em uma lista (ordenada ou não).
Atributos Possíveis: value, id, class
<table></table>
Descrição: Define uma tabela.
Atributos Possíveis: id, class
<tr></tr>
Descrição: Define uma linha em uma tabela.
Atributos Possíveis: id, class
<th></th>
Descrição: Define uma célula de cabeçalho em uma tabela.
Atributos Possíveis: rowspan, colspan, id, class
<td></td>
Descrição: Define uma célula de dados em uma tabela.
Atributos Possíveis: rowspan, colspan, id, class
<form></form>
Descrição: Define um formulário para entrada de dados.
Atributos Possíveis: action, method, id, class
<input>
Descrição: Define um controle de entrada em um formulário.
Atributos Possíveis: type, name, value, placeholder, id, class
<textarea></textarea>
Descrição: Define um campo de entrada de múltiplas linhas.
Atributos Possíveis: rows, cols, id, class
<button></button>
Descrição: Define um botão clicável.
Atributos Possíveis: type, name, value, id, class
<label></label>
Descrição: Define um rótulo para um controle de formulário.
Atributos Possíveis: for, id, class
<select></select>
Descrição: Define um menu suspenso.
Atributos Possíveis: name, id, class
<option></option>
Descrição: Define uma opção em um menu suspenso.
Atributos Possíveis: value, id, class
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
Descrição: Define títulos de diferentes níveis, sendo <h1> o mais importante e <h6> o menos.
Atributos Possíveis: id, class
<iframe></iframe>
Descrição: Define um quadro de embed de outro documento.
Atributos Possíveis: src, width, height, id, class
<meta>
Descrição: Define metadados sobre o documento.
Atributos Possíveis: name, content, charset, id, class
<link>
Descrição: Define a relação entre o documento e um recurso externo.
Atributos Possíveis: href, rel, type, id, class
<style></style>
Descrição: Define estilos CSS internos para o documento.
Atributos Possíveis: id, class
<script></script>
Descrição: Define scripts para o documento, como JavaScript.
Atributos Possíveis: src, type, id, class
<video></video>
Descrição: Define um vídeo para reprodução.
Atributos Possíveis: src, controls, autoplay, loop, muted, width, height, id, class
<audio></audio>
Descrição: Define um controle de áudio para reprodução.
Atributos Possíveis: controls, autoplay, loop, muted, src, id, class
<source>
Descrição: Especifica um arquivo de vídeo ou áudio para o elemento <video> ou <audio>.
Atributos Possíveis: src, type
Está pronto para falar sobre suas metas e objetivos?Estou disponível para responder suas perguntas
Ainda precisa daquela motivação extra?Leia algumas das histórias de sucesso dos alunos
Andrey, 19 anos
Finalizou o ensino médio e estava um tanto quanto perdido sobre o que fazer do futuro. Conquistou seu primeiro emprego da vida em uma Software House ganhando 4 mil reais.
Kaique, 27 anos
Estudante de nutrição, trabalhando a vida toda em diferentes empregos para se sustentar. Conquistou seu primeiro emprego na área em uma empresa de escala nacional ganhando 10 mil reais.
Lucas, 22 anos
Iniciou algumas faculdades, mas sem sucesso, estava procurando formas de ganhar a vida como músico. Conquistou seu primeiro emprego da vida em uma Software House ganhando 6 mil reais.