Dicionário HTML: Tudo o que você precisa saber para uma consulta rápida
HTML é a principal linguagem de marcação utilizada quando o assunto é a criação de páginas na web. Com apenas HTML e CSS, você pode criar páginas incríveis com diversas funcionalidades úteis para seus usuários. Para te ajudar a construir seu projeto, separamos alguns comandos que são essenciais na formatação do conteúdo.
Começando sua página
A primeira etapa para criar uma página na web é definir sua estrutura. No HTML, é preciso definir alguns detalhes, como o tipo de documento, o elemento que inicia a formatação, as informações gerais, etc. Também é nessa estruturação que você faz links com arquivos externos de estilo ou codificação, por exemplo. Por tanto, anote alguns dos comandos essenciais:
<!DOCTYPE html>: Definir o tipo de elemento que informa ao navegador a versão do HTML utilizada.
<html></html>: Definir o elemento raiz, essencial para iniciar a formatação em HTML.
<meta></meta>: Inserir metadados.
<head></head>: Inserir informações gerais sobre o documento.
<style></style>: Inserir informações de estilo, como definições de CSS.
<link></link>: Estabelecer relações entre o documento e arquivos externos.
<title></title>: Inserir título da barra superior do navegador ou na página.
Na prática: confira um exemplo da estrutura aplicada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
</head>
</html>
A partir de agora, é necessário inserir alguns elementos importantes para que sua página comece a tomar forma de verdade. Separamos alguns dos comandos essenciais e interessantes para você inserir no seu documento:
<body></body>: Conteúdo do documento.
<header></header>: Cabeçalho do documento.
<main></main>: Conteúdo principal dentro do body.
<footer></footer>: Rodapé do documento.
Esses são comandos fundamentais para a sua página ficar estruturada. Confira no exemplo como o código ficaria com eles:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Com estes comandos, você consegue inserir mais informações como menus, seções, composições, botões, quebras de linha, entre outros:
<nav></nav>: Adicionar um menu de navegação.
<section></section>: Adicionar seções no documento.
<aside></aside>: Adicionar seções localizadas em barras laterais.
<article></article>: Inserir composição independente em um documento.
<button></button>: Inserir botão.
<div></div>: Inserir um elemento de divisão.
<span></span>: Inserir conteúdo agrupado.
<br/>: Realizar quebra de linha.
<hr/>: Inserir linha horizontal para separação de conteúdos.
<!-->: Inserir comentário.
<details></details>: Inserir informações adicionais.
<summary></summary>: Adicionar sumário ou legenda para um elemento <details></details>.
<a></a>: Inserir hiperlink, deve ser acompanhado pelo atributo href=””.
<adress></adress>: Inserir informações de contato.
<applet></applet>: Aplicação executada em janela de outra aplicação.
<area></area>: Marcar espaços definidos dentro de imagem.
<base></base>: Endereço URL utilizado por todos o endereços relativos dentro do documento.
<basefont></basefont>: Definir a fonte padrão.
<embed></embed>: Incorporar conteúdo externo.
<dialog></dialog>: Caixa de diálogo ou outro componente interativo.
<fieldset></fieldset>: Agrupar elementos.
<legend></legend>: Rótulo para o conteúdo do seu ancestral <fieldset>.
<hgroup></hgroup>: Cabeçalho principal de uma seção do documento agrupado com quaisquer cabeçalhos secundários.
<ins></ins>: Marcar conteúdos inseridos no documento.
<meter></meter>: Valor escalar dentro de um intervalo conhecido ou valor fracionário.
<noscript></noscript>: Definir seção de HTML a ser inserida quando um tipo específico de script não é suportado.
Exemplo da aplicação de alguns elementos:
<!--Inserindo um comentário no meio do código-->
<button>Clique aqui</button>
<br>
<hr>
Você pode pesquisar mais no blog da <a href="https://blog.revelo.com.br">Revelo</a>. <br>
<span>Você pode inserir um texto agrupado para organizar seu conteúdo.</span>
Elementos textuais
Pronto, sua página está estruturada! Agora, precisamos focar nos elementos textuais e audiovisuais para que o conteúdo fique organizado, legível e bem atrativo para seu público-alvo. Com esses comandos, você define uma série de parâmetros para qualificar seu texto:
<h1></h1> <h2></h2> <h3>/<h3> <h4></h4> <h5></h5> <h6></h6>: Níveis de texto, do maior ao menor.
<p></p>: Inserir parágrafo.
<b></b>: Inserir texto em negrito.
<strong></strong>: Inserir texto com maior intensidade e importância.
<i></i>: Inserir texto em itálico.
<pre>: Inserir texto pré-formatado.
<em></em>: Maior ênfase no texto em itálico.
<u></u>: Inserir texto sublinhado.
<mark></mark>: Inserir texto em destaque.
<del></del>: Identificar parte de texto que foi excluída.
<dfn></dfn>: Instância de definição de um termo.
<abbr>: Abreviação de um termo.
<figure></figure>: Inserir um conteúdo independente.
<figcaption></figcaption>: Inserir a legenda para um conteúdo.
<code></code>: Inserir um fragmento de código.
<kbd></kbd>: Definir uma entrada do teclado.
<q></q>: Inserir uma pequena citação.
<cite></cite>: Fazer referência a um trabalho.
<blockquote></blockquote>: Inserir uma citação longa.
<acronym></acronym>: Sequência de caracteres que compõem um acrônimo ou abreviação.
<center></center>: Centralizar elemento.
Exemplo de como utilizar as tags:
<h1>Título</h1>
<h2>Título secundário</h2>
<p><b>Conteúdo</b> do <em>texto</em> criado sobre as <strong>PRINCIPAIS</strong> tags <u>HTML</u>.</p>
Elementos audiovisuais
Uma boa página web é composta não somente por textos, concorda? É interessante inserir elementos audiovisuais para tornar o conteúdo mais interessante e atrativo. Por isso, confira alguns comandos que você pode utilizar para fazer essas inserções:
<img>: Inserir imagem, associando atributo source src=””.
<video></video>: Inserir vídeo, associando atributos source src=”” e type=””.
<audio></audio>: Inserir áudio, associando atributos source src=”” e type=””.
<iframe></iframe>: Incluir recursos de outra página nesta página, utilizando atributo source src=””.
Inserindo listas
As listas são essenciais quando você precisa organizar itens na sua página, seja no meio do conteúdo ou até mesmo no menu de navegação. Existem modelos diferentes de lista e você precisa se atentar aos comandos certos para criá-las corretamente:
<ol></ol>: Criar lista ordenada (ex: item 1, item 2, item 3).
<li></li>: Inserir elementos na lista.
<ul></ul>: Lista não ordenada (ex: item 2, item 1, item 3).
<select>: Inserir menu com opções.
<option>: Inserir opções do select.
<dl></dl>: Criar lista de termo/descrição.
<dt></dt>: Criar termo/nome do dl.
<dd></dd>: Criar descrição do termo/nome.
Confira abaixo como o código ficaria com alguns destes elementos inseridos:
<ul>
<li>Primeiro item da lista não ordenada</li>
<li>Segundo item da lista não ordenada</li>
<li>Terceiro item da lista não ordenada</li>
</ul>
<ol>
<select name="select">
<option value="Item1">Item 1</option>
<option value="Item2" selected>Item 2</option>
<option value="Item3">Item 3</option>
</select>
</ol>
Inserindo tabelas
Além da listas, também é possível inserir tabelas no seu código HTML. O processo é fácil, basta utilizar alguns dos comandos abaixo:
<table></table>: Criar tabela.
<caption></caption>: Inserir legenda da tabela.
<tr></tr>: Inserir linha na tabela
<td></td>: Inserir coluna na tabela.
<th></th>: Inserir célula de cabeçalho.
<colgroup></colgroup>: Criar grupo de colunas.
<col></col>: Definir propriedades da coluna.
Confira o exemplo do código de uma tabela simples:
<table border="1">
<tr>
<th>Coluna 0</th>
<th>Coluna 1</th>
<th>Coluna 2</th>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 5</td>
<td>Item 6s</td>
</tr>
</table>
Inserindo formulários
Os formulários são importantes ferramentas de coleta de informações dos usuários que trafegam pela sua página. Por isso, é importante formatá-los adequadamente para que sejam intuitivos e fáceis de preencher. Confira alguns comandos que vão ajudá-lo na criação do seu formulário:
Elementos estruturais essenciais para a criação de um formulário:
<form></form>: Iniciar um formulário.
<input></input>: Campos de preenchimento.
<placeholder></placeholder: Indica ao usuário que tipo de informação deve ser inserida no campo.
Atributos que podem (e devem) ser definidos:
<input type="text">: Inserir campo para preenchimento com texto.
<input type="password">: Inserir campo para preenchimento no formato de senha.
<input type="radio">: Inserir campo para seleção de apenas uma opção de um número limitado de opções.
<input type="checkbox">: Inserir campo para seleção de uma ou mais opções de um número limitado de opções.
<input type="button">: Inserir botão.
<input type="color">: Inserir campo para escolha de cores.
<input type="email">: Inserir campo para inserção de e-mail.
<input type="file">: Inserir campo para upload de arquivo.
<input type="hidden">: Esconder dado para não aparecer ao utilizador do formulário.
<input type="image">: Inserir campo para upload de imagem.
<input type="number">: Inserir campo para número.
<input type="date">: Inserir campo para data.
<input type="tel">: Inserir campo para telefone.
<input type="range">: Inserir campo para definir intervalo entre valores.
<input type="search">: Inserir campo para pesquisa.
<input type="datetime-local">: Inserir campo para data e hora local.
<input type="week">: Inserir campo para semana.
<input type="month">: Inserir campo para mês.
<input type="url">: Inserir campo para URL.
<input type="submit">: Enviar informações do formulário.
<input type="reset">: Resetar campos.
<input type=”text” list=”stack”>: Inserir campo com opções pré-selecionadas.
<inputmode="numeric">: Exibir teclado numérico.
<inputmode="decimal">: Exibir teclado decimal.
<inputmode="tel">: Exibir teclado telefônico, com + * #.
<inputmode="search">: Exibir teclado para pesquisa, com botão go/ir.
<inputmode="url">: Exibir teclado para acesso à URL, com / e .com.
<inputmode="email">: Exibir teclado para inserção de e-mail, inserindo @.
<textarea></textarea>: Inserir área de texto.
<label></label>: Definir rótulo para elemento de input.
<keygen></keygen>: Especificar um campo gerador de par de chaves em formulário.
<map></map>: Comando utilizado com os elementos <area> para definir um mapa de imagem.
*Dica: se o atributo for file , você pode especificar o tipo de arquivo a ser aceito com o atributo accept . Você deve adicionar um id e o formato, podendo ser: o formato que você deseja aceitar, por exemplo: accept=".doc,.docx" , ou os formatos pré-definidos, que são: accept="audio/* , accept="video/*" ou accept="image/*" .
Confira abaixo alguns exemplos de formulários com os atributos aplicados:
<input type="text" placeholder="Insira seu nome aqui"/>
<input type="password" placeholder="Insira sua senha aqui"/>
<input type="color" placeholder="Selecione uma cor"/>
<input type ="number" placeholder="Insira sua idade" inputmode="numeric"/> <input type="datetime-local"/>
<input type="radio" name="color" value="Azul"><label for="Azul">Azul</label><br> <input type="radio" name="color" value="Roxo"><label for="roxo">Roxo</label><br> <input type="radio" name="color" value="Color"><label for="vermelho">Vermelho</label> <input type="checkbox" name="Item 1" checked><label for="scales">Item 1</label><br> <input type="checkbox" name="Item 2" checked><label for="scales">Item 2</label><br> <input type="checkbox" name="Item 3" checked><label for="scales">Item 3</label><br> <input type="checkbox" name="Item 4" checked><label for="scales">Item 4</label><br> <input type="file"/>
<input type="week"/>
<input type="search" placeholder="Pesquisar"/>
<input type="text" list="stack">
<datalist id="stack">
<option value="Blog Revelo">Blog Revelo</option>
<option value="Guia HTML">Guia HTML</option>
</datalist>
A linguagem de marcação HTML possui uma infinidade de recursos disponíveis e estes foram os principais que você precisa conhecer para montar sua página na web. Para estilizar as funcionalidades, não esqueça de inserir os atributos “class” e/ou “id”, pois eles serão tags as quais você identificará seus elementos quando criar o arquivo CSS.
Além disso, eles poderão ser utilizados por arquivos JavaScript e, por isso, a dica é defini-los no momento em que você estiver escrevendo seu código.
Neste artigo, você conferiu um dicionário de tags HTML super prático com dicas para construir páginas completas cheias de funcionalidades interessantes para atrair a atenção do seu público. Curtiu?
Salve este conteúdo nos seus favoritos para pesquisar sempre que precisar!
Até logo!
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.