Materiais de… / ...

/ Principais Tag'… Criado com o

Principais Tag's HTML

Inserindo Textos no HTML

Parágrafo - <p></p>

Tag utilizada para inserir textos como parágrafos.

HTML

<p>Meu parágrafo aqui</p> <p>Outro parágrafo aqui</p>

A tag parágrafo, tanto quanto as demais podem ser customizadas utilizando o css
posteriormente.
Títulos - <h1> a <h6>

Os títulos em HTML vão de h1 até h6. Sendo h1 o título de maior importância na página, e h6 o
de menor importância.

Quando falamos de importância, estamos nos referindo a importância Semântica. Isso na

prática quer dizer que os motores de busca e os leitores de tela utilizam essas tags para
entender a estrutura hierárquica do conteúdo de uma página web.
No seu uso, <h1> é utilizado para definir o título principal da página, e as demais tags <h2>
<h3> …, devem ser utilizadas para indicar as subseções em ordem hierárquica.

HTML

<h1> Seu título aqui </h1> <h2> Seu título aqui </h2> <h3> Seu título aqui
</h3> <h4> Seu título aqui </h4> <h5> Seu título aqui </h5> <h6> Seu título
aqui </h6>
Span - <span></span>
A tag Span é uma tag de container definida como um container genérico e é utizada para
aplicar estilos ou identificar pastes específicas do texto. É muito útil quando partes do texto
necessitam de uma formatação especial, sem alterar o significado ou a estrutura geral do
documento.
Vale ressaltar que a tag <span> não tem valor semântico próprio e é comumente utilizada para
aplicar ou manipular estilos em conjunto com o Javascript.

Aplicação

JavaScript

<p> Vamos utilizar o <span> Span </span> nesse parágrafo </p>

No exemplo acima a tag span me permite que eu altere por exemplo: a cor, o tamanho, ou seja,
qualquer atributo da palavra “Span” sem que esses atributos interfiram na minha tag de
parágrafo.
Strong - <strong></strong>
A tag define um texto importante ou enfatizado, geralmente colocado em negrito

JavaScript

<p> Utilizando a tag <strong> Strong </strong> </p>

Assim como com a tag <span>, no uso da tag <strong> é posível customizar diversos
atributos. Entretanto, vale salientar que a tag <strong> tem um valor semântico e serve para
enfatizar que o texto que ela envolve é importante. Dessa forma, os mecanismos de busca e
leitores de tela dão maior importância para essa parte do texto.

Em resumo, a tag <strong> auxilia na acessibilidade e compreensão do conteúdo pelos

leitores de tela e mecanismos de busca.
Label - <label></label>
A tag <label>, que traduzida quer dizer rótulo, é utilizada para associar um rótulo a um
elemento de controle de um formulário, inserindo uma descrição textual para um campo
específico, facilitando a compreensão do usuário.
Em termos de Valor Semântico, a <label> tem a capacidade de melhorar a experiência do
usuário, tornando os formulários mais acessíveis e compreenssíveis até mesmo para usuários
com deficiências visuais que dependem dos leitores de tela.

Quando falamos de formulários, estamos falando de uma parte muito importante dentro de
uma página web interativa. Por meio dos fomulários, é possível que os usuários forneçam
dados que podem ser guardados em servidores web para processamento.

Veremos adiante as tags importantes para os fomulários.

Aplicação da tag <label>

JavaScript

<h1>Exemplo de formulário com Label</h1> <form> <label>Nome:</label> <input

type="text" /> <label>Idade:</label> <input type="number" /> <button
type="submit">Enviar formulário</button> </form>
Negrito - <b></b>

A tag <b> deixa o seu texto em negrito. Ela não tem valor semântico, somente visual.

HTML

<p> Seu texto em <b>negrito</b></p>

Resultado:

Itálico - <i></i>

A tag <i> deixa o seu texto em itálico. Assim como a tab <b>, ela não tem valor semântico,
somente visual.

HTML

<p> Esse é o meu <i>texto</i> em itálico </p>

Resultado:
Sublinhado e Riscado - <u></u> e <s></s>

JavaScript

<u>Texto com Sublinhado</u> <s>Texto com Riscado</s>

Resultado

Texto com Sublinhado

Texto com Riscado

• Importante salientar que essas tags raramente serão encontradas. Isso porque é possível
adicionar essas estilizações utilizando o CSS.

• Textos Riscados são ignorados pelos leitores de tela.

• É importante ter cuidado com o uso do sublinhado nas páginas web, pois os usuários
podem interpretar palavras sublinhadas como links.
Quebra de linha - <br>

Essa tag não necessita de fechamento. Sua função é a quebra de linha.

HTML

<p>Primeiro texto </p><br> <p>Segundo texto </p><br> <p>Terceiro texto </p>

<br>

Resultado:
Bônus - Atributo title

O atributo “title” é utilizado dentro das tags HTML para fornecer informações adicionais sobre
um elemento. A informação adicionada no atributo “title” somente é mostrada quando o
usuário passar o mouse sobre o item.

JavaScript

<a href="https://comunidade.devclub.com.br/home" title="Visite nossa

Comunidade"> Clique aqui </a>

O uso do atributo title é uma boa prática recomendada para melhorar a acessibilidade (pois os
mecanismos de leitura de tela os reconhecem), e usuabilidade de um site, fornecendo
informações adicionais ou explicativas sobre determinados elementos.
 Título do site - <title></title>

A tag <title> fica dentro da tag <head>, e nela é definido o título do documento. Essa
informação é mostrada na barra de título dos navegadores.
A tag <title> também tem um papel importante para o SEO (Search Engine Optimization). Ela
desempenha um papel importante na comunicação com os motores de busca, como por
exemplo o Google.

HTML

<title> Título do Meu site </title>

Resultado:

Tags Estruturais e Semânticas HTML

Tag estrutural: Div - <div></div>

Também conhecidas como “CAIXAS” as <div> são muito utilizadas e desempenham um papel
importante na organização das páginas Web. Na prática, as divs definem as divisões da
página, funcionando como grandes e pequenos containeres para posicionar os conteúdos.
As divs também são fundamentais para a contrução de páginas flexíveis, dinâminas e
responsivas, pois as suas divisões permitem uma estilização única ou coletiva por meio do
uso de ‘classes’ e ‘ids’.
Posso ter diversas divs dentro da minha página, tudo conforme a disposição dos meus
elementos.

HTML

<div class="header"> <h1>Aqui vai a headline principal da minha página</h1>

<nav> <a href="">Primeiro link</a> <a href="">Segundo link</a> <a
href="">Terceiro link</a> <a href="">Quarto link</a> </nav> </div> <div
class="main">Aqui vai o conteúdo principal da minha página</div> <div
class="aside">Aqui vai ser um elemento lateral</div> <div
class="footer">Aqui vai o rodapé da minha página</div>

Resultado:

É possível observar que sem estilização as divs ficam posicionadas uma abaixo da outra, no
CSS será possível definir o tamanho e a posição de cada uma.
Nota relevante

É possível contruir páginas web com as divs e/ou também com as tags estruturais
semânticas que mostraremos logo na sequencia. Cada uso tem a sua vantagem e cabe ao
desenvolvedor a tomada de decisão em qual usar.
Tags estruturais semânticas: <header>, <main>, <footer>, <aside>, dentre outras:

• têm significado semântico direto ao conteúdo

• facilitam a compreensão do layout e estrutura da página

• melhora a acessibilidade, pois as tecnologias assistivas podem entender melhor a

estrutura do conteúdo

• mecanismos de busca (SEO) podem usar as informações semânticas para entender a

estrutura e importância do conteúdo.

Utilizando divs com classes

• são mais práticas caso precise de mais flexibilidade ou personalização no layout

• existe a possibilidade de navegadores mais antigos não darem suporte total a tags
semânticas HTML5

Cabeçalho - <header></header>

Essa tag define um cabeçalho, ou seja, a parte do topo, onde inicia-se a página.

Não há uma regra específica que deve haver nele, porém o que comumente encontramos são:
a logo, revelando a identidade da página, links de navegação, textos introdutórios, formulário
de pesquisa, e outros.

HTML

<header> <h1>Olá!</h1> </header>

Resultado:
Conteúdo Principal <main></main>

Essa tag representa o conteúdo principal do seu corpo, ou seja, o conteúdo principal da sua
página.

HTML

<main> <h1>Esse é um h1</h1> <p>Sou um parágrafo</p> <button>Sou um

botão</button> <p>Estamos todos dentro da tag main</p> </main>

Resultado:
Rodapé - <footer></footer>

Essas tags definem um rodapé para a página, geralmente utilizadas no final da página;

HTML

<footer> Algumas informações de copyright ou talvez alguma outra informação

</footer>

Resultado:
Sessões da página - <section></section>

Essa tag define uma sessão para sua página. Utilizada para separar e organizar os conteúdos.

HTML

<section> <h1>Cabeçalho</h1> <p>O resto do contéudo do seu site</p>

</section>

Resultado:
Artigos - <article></article>

Essa tag define um artigo da sua página. Ela é utilizada para separar o conteúdo da sua
página. É mais utilizada para criação de blogs, um artigo de revista ou jornal, página de
conteúdos e etc.
É usada para definir conteúdos independentes, ou seja, o navegador reconhece que o
conteúdo dessa tag é uma unidade distinta e relevante por si só.

HTML

<article> <h1>Tema de Um artigo </h1> <p>xsnjnducduc d jvvnennd nnueniwenod

ewnenunfec dnicnuc wiwdjueb jdndbucbc bub8ub</p> </article> <article>
<h1>Tema de Um artigo </h1> <p>xsnjnducduc d jvvnennd nnueniwenod ewnenunfec
dnicnuc wiwdjueb jdndbucbc bub8ub</p> </article> <article> <h1>Tema de Um
artigo </h1> <p>xxsnjnducduc d jvvnennd nnueniwenod ewnenunfec dnicnuc
wiwdjueb jdndbucbc bub8ub<p> </article>

Resultado:
Conteúdo Lateral - <aside></aside>

A tag <aside> é utilizada para apresentar um conteúdo que está relacionado ao conteúdo
principal da página, e que pode ser considerado como um “extra” ou um conteúdo secundário.
Comumente é utilizada para incluir elementos como barras laterais, notas, informações
adicionais ou qualquer conteúdo que faça relação com o conteúdo principal da página.
O conteúdo da tag <aside> geralmente não é considerado vital para a compreensão do
conteúdo da página, mas ainda assim é relevante e complementar. Em ur artigo, é comum
encontrar links relacionados, informações adicionais ou até mesmo anúncios.

HTML

<main> <h1>Eu amo o DevClub!</h1> </main> <aside> <h4>DevClub</h4> <p>

DevClub é uma formação completa de programação, onde você sai do completo
zero ao avançado, se tornando um programador full stack. </p> </aside>

Resultado:
 Navegação - <nav></nav>

Essa tag define um conteúdo de navegação. Por isso, é muito utilizado em conjunto com listas
e na criação de menus. Ou seja, uma seção com links de navegação.

HTML

<nav> <ul> <li><a href="#">Página Principal</a></li> <li><a

href="#">Sobre</a></li> <li><a href="#">Contato</a></li> </ul> </nav>

Resultado:

Elementos da Página HTML

Formulário - <form></form>

Formulários HTML são elementos fundamentais na interatividades das páginas. Com eles é
possível que os usuários forneçam dados que podem ser enviados para os servidores para
processamento.

Os formulários são formados por um conjunto de tags, dentre as principais: <form>, <input>,
<textarea>, <select>, dentre outras.

A tag form é usada para envolver todos os elementos do formulário e definir como os dados
serão enviados. Os inputs coletam diversos tipos de dados como textos, senhas, dentre
outros, o textarea é utilizados para textos mais longos e o selecr para listas.
Com o javascript é possível adicionar interatividade ao formulário, como validações,
atualização dinâmica de campos e manipulação de eventos.

No exemplo abaixo temos um formulário de contato com três campos obrigatórios devido ao
atributo “required". Neles recebemos o nome, o email e a mensagem do usuário.
Há um botão com o seu type=“submit”, quando temos dentro de uma tag <form>, um botão
com o type Submit, segnifica que al ser clicado ele irá enviar os dados para onde for definido
na tag form. No exemplo adicionamos um funcão javascript que coletou os dados e os
mostrou no console.

Caso não tenha visto nada de javascript ainda não se preocupe, logo mais esse conteúdo
ficará mais claro.

JavaScript

// Basicamente a tag form envolve todos os elementos do formulário <form

onsubmit="enviarFormulario(e)"> <label for="nome">Nome:</label> <input
type="text" id="nome" name="nome" required> <label for="email">E-mail:
</label> <input type="email" id="email" name="email" required> <label
for="mensagem">Mensagem:</label> <textarea id="mensagem" name="mensagem"
rows="4" required></textarea> <button type="submit">Enviar</button> </form>
<script> function enviarFormulario(e) { event.preventDefault(); var nome =
document.getElementById("nome").value; var email =
document.getElementById("email").value; var mensagem =
document.getElementById("mensagem").value; var dadosFormulario = { nome:
nome, email: email, mensagem: mensagem }; console.log("Dados do
Formulário:", dadosFormulario); } </script>
Inputs - <Input />

Os inputs são os locais onde é possível entrar diversos tipos de dados. Eles de diferenciam
por meio do atributo type.

Os atributos type têm valor semântico pois define o tipo de controle de entrada que será
exibido na inferface do usuário. A escolha do tipo não interfere apenas na aparência, mas
também influencia como o usuário interafe com o campo de entrada e como os dados são
tratados.

Alguns exemplos de valores do atributo “type” nos inputs.

HTML

Tarefa: Iniciar um novo projeto e experimentar cada tipo de input. // Campo

para entrada de texto, aqui o usuário pode digitar qualquer texto <label
for="nome">Nome:</label> <input type="text" id="nome" name="nome" required>
// Campo para entrada de email <label for="email">E-mail:</label> <input
type="email" id="email" name="email" required> // O input também pode ser
utilizado como um botão <label for="button">Botão:</label> <input
type="button" id="button" value="Clique-me" /> // O input checkbox pode ser
marcado ou desmarcado. O atributo checked // quer dizer que ele se iniciará
marcado. <label for="checkbox">Checkbox:</label> <input type="checkbox"
id="checkbox" name="checkbox" checked /> <label for="checkbox">Aceito os
termos</label> // O input color funciona como seletor de cor, no value
define-se a cor inicial <label for="color">Cor:</label> <input type="color"
id="color" name="color" value="#ff0000" /> // O input date serve para datas
<label for="date">Data:</label> <input type="date" id="date" name="date" />
// Esse é para Data e hora <label for="datetime-local">Data e Hora Local:
</label> <input type="datetime-local" id="datetime-local" name="datetime-
local" /> // O input tipo file serve para upload de arquivos, é possível
definir // os formatos que serão aceitos <label for="file">Arquivo:</label>
<input type="file" id="file" name="file" /> // O hidden fica invisível
<label for="hidden">Campo Oculto:</label> <input type="hidden" id="hidden"
name="hidden" value="valor_oculto" /> // Um imput com formato de imagem
<label for="image">Imagem:</label> <input type="image" id="image"
name="image" src="https://via.placeholder.com/50" alt="Botão de Imagem" />
// Input para entrada de mês <label for="month">Mês:</label> <input
type="month" id="month" name="month" /> // Input para entrada de número
<label for="number">Número:</label> <input type="number" id="number"
name="number" min="1" max="10" value="5" /> // Input para entrada de senha
onde os caracteres ficam escondidos <label for="password">Senha:</label>
<input type="password" id="password" name="password" /> // Input com botões
de única ou múltipla escolha. Caso o name seja igual // para todas as
opções, só será possível escolher uma <label for="radio">Botões de Rádio:
</label> <input type="radio" id="radio1" name="radio" value="opcao1" checked
/> <label for="radio1">Opção 1</label> <input type="radio" id="radio2"
name="radio" value="opcao2" /> <label for="radio2">Opção 2</label> // Inputs
para intervalos <label for="range">Intervalo:</label> <input type="range"
id="range" name="range" min="0" max="100" value="50" /> // Input para limpar
todo o formulário <label for="reset">Resetar:</label> <input type="reset"
id="reset" value="Limpar" /> // Input para pesquisar <label
for="search">Busca:</label> <input type="search" id="search" name="search"
placeholder="Pesquisar..." /> // Input com função de botão submit <label
for="submit">Enviar:</label> <input type="submit" id="submit" value="Enviar
Formulário" /> // Input para entrada de telefone <label for="tel">Telefone:
</label> <input type="tel" id="tel" name="tel" pattern="[0-9]{3}-[0-9]{2}-
[0-9]{3}" placeholder="123-45-678" /> // Input para texto <label
for="text">Texto (Padrão):</label> <input type="text" id="text" name="text"
placeholder="Digite seu texto" required /> // Input para hora <label
for="time">Hora:</label> <input type="time" id="time" name="time" /> //
Input para link <label for="url">URL:</label> <input type="url" id="url"
name="url" placeholder="https://example.com" /> // Input para Semana <label
for="week">Semana:</label> <input type="week" id="week" name="week" />
É importante complementar que apesar de existir diversos tipos de inputs, os mais utilizados
são os de texto, email, senha, de número, checkbox, radio e arquivo. Cabe ao desenvolvedor
fazer a melhor escolha para a entrada dos seus dados.

Inputs podem ser estilizados com o CSS.

Botão - <button></button>
Os botões são elementos cruciais na interatividade dentro de uma página web. Dentro das
nossas páginas, podemos ter diversas ações, como o envio de um formulário, a execução de
uma função que faz algum cálculo, a troca de light mode para dark mode, e outra infinidade de
coisas conforme a imaginação do dev. Sabemos que essas ações são acionadas por meio de
Eventos, e um evento que o button é especialista é o evento de clique.
Clique em um button e o faça feliz.

Assim como os inputs, os buttons aceitam o atributo type. Em seus usos mais comuns temos:

JavaScript

<form> <!-- Botão de Envio dos dados --> <button

type="submit">Enviar</button> <!-- Botão para redefinir --> <button
type="reset">Redefinir</button> </form>

Botões para acionar ações do lado do cliente usando Javascript por meio do evento de clique

JavaScript

<button onclick="minhaFuncao()">Clique-me</button>

Botões que acionam ações na interface

JavaScript

<button onclick="abrirMenu()">Abrir Menu</button>

Botões aceitam outras tags em seu conteúdo

JavaScript

<button> <img src="icone.png" alt="Ícone"> Clique em mim </button>

A aparência e o comportamento padrão dos botões podem ser alterados usando CSS
Links - <a></a>
A tag <a> (âncora) no HTML tem o seguinte formato:

HTML

<a href="https://www.google.com">Clique aqui e vá para o Google</a>

Resultado:

Nesta tag, podemos notar a presença crucial do href. HREF é uma abreviação de “hypertext
reference” em inglês, que traduzido é “referência de hipertexto”. Na prática, ele é utilizado para
especificar o destino de um link em um documento HTML.

Dentre as utilidades da tag a temos:

Links para outras páginas dentro do mesmo site ou Links para páginas externas.

JavaScript

<a href="pagina_interna.html">Página Interna</a> <a

href="https://www.outrasite.com">Outro Site</a>

Navegação interna entre seções específicas da mesma página utilizando “ids”

JavaScript

<a href="#secao1">Ir para Seção 1</a> ... <h2 id="secao1">Seção 1</h2>

Download de arquivos

JavaScript

<a href="material_de_apoio.pdf" download>Download do Documento</a>

Envio de emails

JavaScript

<a href="mailto:suporte@devclub.com.br">Enviar E-mail</a>

Link para outros recursos

JavaScript

<a href="imagem.jpg">Abrir Imagem</a> <a href="video.mp4">Assistir ao

Vídeo</a>

Links para redes sociais

JavaScript

<a href="https://www.youtube.com/rodolfomori" target="_blank">You Tube</a>

<a href="https://www.instagram.com/rodolfomorii"
target="_blank">Instagram</a>

Nessa demosntração pudemos notar a presença do “target=_blanck”. Adicionamos esse

atributo para que o nosso link seja aberto em uma nova aba.
Geralmente utilizamos esse recurso quando queremos manter o usuário no nosso site,
mesmo que ele clique para ir para outro ambiente. Cabe uma observação para o uso dos
navegadores em dispositivos móveis na qual na maioria das vezes o usuário se perde com as
abas abertas, e se nesse caso ele tentar voltar para a sua página, ele não conseguirá, até que
encontre a aba correta.

Tags de Âncora podem ser customizadas com CSS e podem assumir até o formato de um
botão caso o desenvolvedor queira.
Também é possível adicionar a tag <a> dentro de outras tags ou por fora também.
Por exemplo:
Caso queira que quando o usuário clicar em qualquer lugar dentro de uma div, ele seja
direcionado para algum local:

JavaScript

<a href="https://www.exemplo.com"> <div> <!-- Conteúdo da div, que pode

incluir texto, imagens, etc. --> Clique aqui para ser direcionado </div>
</a>
Imagem - <img>
A tag <img> é usada para incorporar imagens dentro de uma página Web.

HTML

<h1>Eu amo meu cachorro</h1> <img src="foto-de-cachorro.jpg" alt="foto do

meu cachorro">

Resultado:

Como pudemos ver, a tag <img> é composta por dois atributos principais, o src (source) que é
um atributo obrigatório e especifica o caminho ou URL da imagem.
O outro atributo principal que pudemos ver na tag <img> foi o “alt”. O alt fornece um texto
alternativo para a imagem, e é exibido caso a imagem não seja carregada. O alt também é
utilizado por leitores de tela para fins de acessibilidade.
A tag <a> não precisa de fechamento, e também aceita os parâmetros width e heigth para
definir largura e altura.

JavaScript

<img src="imagem.jpg" alt="Descrição da imagem" width="300" height="200">

Alguns atributos são opcionais e pode ser adicionados na tag <img> para melhorar a
experiência do usuário. Tais como:

• title → Fornece um texto de dica que aparece quando o usuário passa o mouse sobre a
imagem

• loading → Especifica como a imagem deve ser carregada. Podendo ser: “auto” (padrão),
“eager”(carregamento imediato) ou “lazy”(carregamento preguiçoso, útil para otimização
de desempenho).

• style → usado para aplicar estilos diretamente na imagem para alterar a borda por
exemplo.

JavaScript

<img src="logo.png" alt="Logo DevClub" title="Logo do DevClub colorida"

width="800" height="600" style="border: 1px solid #ccc;" >
Vídeo - <video></video>
A tag <video> é utilizada para incorporar conteúdo em vídeo em uma página web.

HTML

<h1>Meu vídeo</h1> <video src="1063472734-preview.mp4" autoplay

poster="imagemprevia.jpg"></video>

Resultado: