Article image
Pedro Agostini
Pedro Agostini28/11/2024 15:35
Compartilhe

Guia Completo sobre as Principais Tags HTML

  • #HTML

O HTML (HyperText Markup Language) é a base da estrutura de qualquer página web. Ele define a semântica e a organização do conteúdo através de tags que identificam partes do documento. Abaixo, apresentamos uma análise detalhada das principais tags HTML e suas funcionalidades.

Tags Básicas de Estrutura

  • <head> Contém informações meta sobre o documento, como título, estilos, scripts e dados essenciais.
    <head>
      <title>Minha Página</title>
      <meta charset="UTF-8">
    </head>
  • <title> Define o título exibido na aba do navegador.
    <title>Meu Site</title>
  • <body> Representa o corpo do documento, onde todo o conteúdo visível é inserido.
    <body>
      <h1>Bem-vindo!</h1>
      <p>Este é o conteúdo principal.</p>
    </body>

Tags Semânticas de Estrutura

  • <header> Representa a seção de cabeçalho de um documento ou seção.
    <header>
      <h1>Minha Página</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#sobre">Sobre</a></li>
        </ul>
      </nav>
    </header>
  • <main> Indica o conteúdo principal da página, usado para melhorar a acessibilidade.
    <main>
      <article>
        <h2>Artigo Principal</h2>
        <p>Conteúdo relevante da página.</p>
      </article>
    </main>
  • <footer> Representa o rodapé do documento ou seção.
    <footer>
      <p>&copy; 2024 Minha Empresa</p>
    </footer>
  • <section> Delimita uma seção temática do documento.
    <section id="sobre">
      <h2>Sobre Nós</h2>
      <p>Informações sobre a empresa.</p>
    </section>
  • <div> Usada como contêiner genérico para agrupar elementos.
    <div class="card">
      <h3>Título</h3>
      <p>Texto do card.</p>
    </div>
  • <nav> Representa um conjunto de links de navegação.
     <ul>
        <li><a href="#inicio">Início</a></li>
        <li><a href="#contato">Contato</a></li>
      </ul>
    </nav>
  • <aside> Indica um conteúdo relacionado, como barras laterais.
    <aside>
      <h3>Links Úteis</h3>
      <ul>
        <li><a href="#artigo1">Artigo 1</a></li>
      </ul>
    </aside>
  • <article> Representa um conteúdo independente, como artigos ou postagens.
    <article> 
      <h2>Notícia</h2> 
      <p>Detalhes da notícia.</p> 
    </article>

Tags de Texto

  • <h1>, <h2>, <h3> Definem títulos, do mais importante (<h1>) ao menos relevante (<h6>).
    <h1>Bem-vindo!</h1>
    <h2>Seção Principal</h2>
  • <p> Representa um parágrafo de texto no documento.
    <p>Este é um parágrafo simples de texto no HTML.</p>
  • <blockquote> Indica uma citação em bloco.
    <blockquote>
      "O sucesso é a soma de pequenos esforços repetidos dia após dia."
    </blockquote>
  • <time> Representa uma data ou hora.
    <time datetime="2024-11-28">28 de novembro de 2024</time>
  • <q> Indica uma citação curta inline.
    <p>O professor disse <q>faça o seu melhor</q>.</p>
  • <strong> e <b> <strong> dá ênfase semântica forte, enquanto <b> aplica negrito visual.
    <strong>Aviso:</strong> Este conteúdo é importante.
    <b>Texto em negrito.</b>
  • <mark> Destaca o texto como se estivesse marcado.
    <p>Esta palavra está <mark>destacada</mark>.</p>
  • <i> Representa um texto com estilo diferenciado (geralmente itálico).
    <p>Texto em <i>itálico</i>.</p>
  • <sub> e <sup> Representam texto em subscrito e sobrescrito.
    H<sub>2</sub>O e E=mc<sup>2</sup>
  • <br> Insere uma quebra de linha.
    Texto antes da<br>quebra de linha.
  • <hr> Insere uma linha horizontal para separar conteúdo.
    <hr>

Tags de Formulário

  • <form> Define um formulário para coleta de dados.
    <form action="/submit" method="post">
      <label for="nome">Nome:</label>
      <input type="text" id="nome" name="nome">
      <button type="submit">Enviar</button>
    </form>
  • <input> Entrada de dados do usuário, com diversos tipos:
    <label>Texto:</label> <input type="text" />
    <label>Number:</label> <input type="number" min="0" step="2" max="99" /> 
    <label>Range:</label> <input type="range" min="0" max="100" value="100"/> 
    <label>Color:</label> <input type="color" />
    <label>Email:</label> <input type="email" />
    <label>URL:</label> <input type="url" />
    <label>File:</label> <input type="file" multiple />
    <label>Image:</label> <input type="image" />
    <label>Password:</label> <input type="password" />
    <label>Search</label> <input type="search">
    <label>Date</label> <input type="date" />
    <label>Week:</label> <input type="week" /> --No Firefox não funciona--
    <label>Month:</label> <input type="month" /> --No Firefox não funciona--
    <label>Checkbox:</label> <input type="checkbox" />
    <label>Radio:</label> <input type="radio" name="aceita" />
    <label>Hidden:</label> <input type="hidden" />
    <button> Botão para ações específicas.<button type="button">Clicável</button>
    <button type="menu">Menu</button>
    <button type="reset">Limpar</button>
    <button type="submit">Enviar</button>
  • <select> Cria uma lista suspensa.
    <select name="role">
                <option selected value="">Selecione Cargo</option>
                <option value="administrativo">Administrativo</option>
                <option value="gerente">Gerente</option>
                <option value="diretor">Diretor</option>
                <option value="presidente">Presidente</option>
    </select>
  • <checkbox> e <radio> Representam opções de múltipla escolha ou escolha única.
    <input type="checkbox" name="opcionais[]" value="queijo"> + Queijo <br>
    <input type="checkbox" name="opcionais[]" value="calabresa"> + Calabresa 
    <input type="checkbox" name="opcionais[]" value="cebola"> + Cebola
    <input type="checkbox" name="opcionais[]" value="azeitona"> + Azeitona 
    
    <p>Borda Recheada?</p>
    <input type="radio" name="borda" value="sim"> Sim 
    <input type="radio" name="borda" value="nao"> Não
    <p>Bebida</p>
    <input type="radio" name="bebida" value="suco"> Suco
    <input type="radio" name="bebida" value="refrigerante"> Refrigerante
    <input type="radio" name="bebida" value="agua"> Água
    <input type="radio" name="bebida" value="nenhum"> Nenhum
  • <fieldset> e <legend> Agrupam campos relacionados em um formulário.
    <fieldset>
      <legend>Informações Pessoais</legend>
      <label>Nome: <input type="text"></label>
    </fieldset>
  • <span> Define um contêiner inline, útil para estilização.
    <p>Texto com <span style="color: red;">destaque</span>.</p>
Compartilhe
Comentários (0)