Maiores Dicas de HTML: Tudo o que Você Precisa Saber para Começar

Redaçãojunho 24, 202401,4K views

Aprenda os conceitos essenciais de HTML com este guia completo para iniciantes. Abrange desde elementos e atributos HTML até a criação e formatação de páginas web, com exemplos claros e explicações detalhadas.

O cheatsheet de HTML é um recurso valioso para qualquer pessoa que trabalhe com HTML, oferecendo acesso rápido a elementos, atributos, tags, formulários e containers comuns. Seja você um iniciante ou um desenvolvedor experiente, este cheatsheet pode economizar tempo e melhorar sua produtividade. É uma ferramenta essencial, proporcionando uma coleção abrangente de trechos de código e exemplos ao seu alcance.

Estrutura Geral da Página

<!DOCTYPE html>
<html lang="pt-br">
<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>Exemplo</title>
</head>
<body>

</body>
</html>

Comentários

<!-- Este é um comentário -->

Os comentários são ignorados pelo navegador. Use-os para anotações no código.

Tags de Texto

Títulos

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

Nota: Só deve haver um <h1> por página.

Parágrafo

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

Listas

Lista não Ordenada

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Nota: <ul> só pode ter <li> como filhos diretos.

Lista Ordenada

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Adiciona números à frente de cada item da lista.

Listas Aninhadas

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    <strong>Sublista</strong>
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
</ul>

Links

Link Externo

<a href="https://www.example.com">Exemplo</a>
<a href="https://www.example.com" target="_blank">Exemplo</a>
<a href="https://www.example.com" target="_blank" title="Exemplo">Exemplo</a>

Nota: target="_blank" abre o link em uma nova janela.

Link de Email

<a href="mailto:email@example.com">Envie um email</a>

Link Âncora

<a href="#section">Ir para a seção</a>
<div id="section">Seção de destino</div>

Link para uma seção na mesma página.

Separadores

Quebra de Linha

Texto com <br /> quebra de linha.

Linha Horizontal

Texto acima<hr />Texto abaixo

Atributos

Classes

<a href="https://www.example.com" class="link">Exemplo</a>
<div class="header important">Cabeçalho</div>

Ids

<a href="https://www.example.com" id="link-id">Exemplo</a>

Ids devem ser únicos em uma página.

Containers

Div

<div>Exemplo</div>
<div class="container">Exemplo</div>

Elemento de bloco, usado para agrupar conteúdo.

Span

<span>Exemplo</span>
<span class="highlight">Exemplo</span>

Elemento inline, usado para agrupar conteúdo dentro de uma linha de texto.

Tags de Mídia

Imagem

<img src="imagem.jpg" alt="Descrição da imagem" width="400" />

Vídeo

<video src="video.mp4" controls></video>

Áudio

<audio controls src="audio.mp3"></audio>

Tags de Formulário

Formulário

<form action="/submit">
  <label for="name">Nome:</label>
  <input type="text" id="name" name="name" required />
  <input type="submit" value="Enviar" />
</form>

Botão

<button class="button">Clique aqui</button>

Estilização

Negrito

<strong>Texto em negrito</strong>

Itálico

<em>Texto em itálico</em>

CSS no HTML

CSS Interno

<head>
  <style>
    body {
      background: #f8f5ff;
    }
    h1 {
      color: purple;
      text-align: center;
    }
  </style>
</head>

CSS Externo

<head>
  <link rel="stylesheet" href="style.css" />
</head>

JavaScript no HTML

JavaScript Interno

<body>
  <h1>Exemplo</h1>
  <script>
    alert("Hello, World!");
  </script>
</body>

JavaScript Externo

<body>
  <h1>Exemplo</h1>
  <script src="script.js"></script>
</body>

SEO

Título

<title>Título do Site - Marca</title>

Meta Descrição

<head>
  <meta name="description" content="Descrição do site.">
</head>

Tabelas

Estrutura da Tabela

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Sobrenome</th>
      <th>Nacionalidade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>João</td>
      <td>Silva</td>
      <td>Brasileiro</td>
    </tr>
    <tr>
      <td>Ana</td>
      <td>Souza</td>
      <td>Brasileira</td>
    </tr>
  </tbody>
</table>

Esta cheatsheet de HTML cobre os conceitos básicos e avançados, facilitando o aprendizado e a referência rápida para desenvolvedores de todos os níveis.