HTML - Elementos

Elementos de Nível de Bloco

Elementos de nível de bloco são elementos HTML que começam em uma nova linha e ocupam toda a largura disponível por padrão. Eles criam uma caixa de nível de bloco, o que significa que têm uma quebra de linha antes e depois do elemento. Alguns exemplos comuns de elementos de nível de bloco incluem <div>, <p> e <h1> a <h6>.

<div>Este é um elemento de nível de bloco.</div>

O elemento <div> é um contêiner genérico que é frequentemente usado para agrupar outros elementos e aplicar estilos ou layouts a eles. O elemento <p> representa um parágrafo de texto, enquanto os elementos <h1> a <h6> representam diferentes níveis de títulos, sendo <h1> o nível mais alto e <h6> o mais baixo.

Elementos de nível de bloco são usados para criar a estrutura principal de uma página web, como títulos, parágrafos, seções e mais. Eles podem conter outros elementos de nível de bloco, bem como elementos inline.

Elementos Inline

Elementos inline são elementos HTML que não começam em uma nova linha e ocupam apenas a largura necessária. Eles criam uma caixa de nível inline, o que significa que não têm uma quebra de linha antes ou depois do elemento. Alguns exemplos comuns de elementos inline incluem <span>, <a> e <img>.

<span>Este é um elemento inline.</span>

O elemento <span> é um contêiner genérico para conteúdo inline e é frequentemente usado para aplicar estilos ou direcionar partes específicas do texto. O elemento <a> representa um hiperlink, que permite aos usuários navegar de uma página web para outra. O elemento <img> é usado para incorporar imagens em uma página web.

<a href="https://example.com">Clique aqui</a>

Elementos inline são usados para formatar ou estilizar partes específicas de texto ou conteúdo dentro de um elemento de nível de bloco. Eles não devem conter elementos de nível de bloco, mas podem estar contidos dentro deles.

Elementos de Texto

Elementos de texto estruturam e formatam o conteúdo textual em uma página da web. Os elementos de texto mais básicos são os cabeçalhos e parágrafos. Os cabeçalhos, representados pelas tags <h1> a <h6>, definem a hierarquia e importância do conteúdo, sendo <h1> o nível mais alto e <h6> o mais baixo. Os parágrafos, representados pela tag <p>, agrupam frases relacionadas.

Outros elementos de texto incluem elementos de formatação como <strong> para texto em negrito, <em> para texto em itálico, <sup> para sobrescrito e <sub> para subscrito. Esses elementos adicionam ênfase ou significado especial a partes específicas do texto.

Elementos Estruturais

Elementos estruturais definem a estrutura geral e o layout de uma página da web. O elemento <div> é um contêiner genérico que agrupa outros elementos e aplica estilos ou layouts a eles. O elemento <span> é semelhante ao <div>, mas é um elemento inline e é usado para aplicar estilos ou direcionar partes específicas do texto.

Outros elementos estruturais incluem <header>, <footer>, <nav>, <section> e <article>. O elemento <header> representa conteúdo introdutório ou um grupo de links de navegação, enquanto o elemento <footer> contém informações sobre o autor, direitos autorais ou links para páginas relacionadas. O elemento <nav> define um conjunto de links de navegação. O elemento <section> representa uma seção independente de conteúdo, e o elemento <article> representa uma composição autônoma, como uma postagem de blog ou artigo de notícia.

Elementos de Mídia

Elementos de mídia incorporam conteúdo multimídia em uma página da web. O elemento <img> exibe imagens, enquanto os elementos <video> e <audio> incorporam conteúdo de vídeo e áudio, respectivamente.

<img src="imagem.jpg" alt="Uma descrição da imagem">

O atributo src especifica a URL do arquivo de mídia, e o atributo alt fornece texto alternativo para leitores de tela e mecanismos de busca.

Elementos de Lista

Elementos de lista criam listas ordenadas e não ordenadas. Uma lista não ordenada, representada pela tag <ul>, é usada quando a ordem dos itens não é importante. Uma lista ordenada, representada pela tag <ol>, é usada quando a ordem dos itens é importante. Os itens da lista, representados pela tag <li>, são os itens individuais dentro de uma lista.

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

Elementos de Tabela

Elementos de tabela criam tabelas para exibir dados em linhas e colunas. O elemento <table> define a tabela, enquanto <tr> representa uma linha da tabela, <th> representa uma célula de cabeçalho da tabela e <td> representa uma célula de dados da tabela.

<table>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
  </tr>
  <tr>
    <td>Linha 1, Célula 1</td>
    <td>Linha 1, Célula 2</td>
  </tr>
  <tr>
    <td>Linha 2, Célula 1</td>
    <td>Linha 2, Célula 2</td>
  </tr>
</table>

Elementos de Formulário

Elementos de formulário criam formulários interativos para entrada do usuário. O elemento <form> define o formulário, enquanto vários outros elementos criam diferentes tipos de entradas. O elemento <input> cria campos de texto, botões de opção, caixas de seleção e mais, dependendo do valor de seu atributo type. O elemento <label> fornece um rótulo de texto para um campo de entrada, tornando-o mais acessível e fácil de usar.

Outros elementos de formulário incluem <button> para criar botões clicáveis, <select> para criar menus suspensos e <textarea> para criar campos de entrada de texto de várias linhas.

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Enviar</button>
</form>