Prof. Leon Blog

Appearance

Exemplos: Tags e Elementos ​

← Voltar para a aula

Headings ​

Escolha o nível e veja o resultado. Headings maiores (h1) têm mais peso visual e semântico:

Título de exemplo

<h2>Título de exemplo</h2>

Formatação de texto ​

Escolha uma tag e veja como ela muda o mesmo trecho de texto:

Isto é um texto com HTML é divertido no meio da frase.

Importância (negrito por padrão).

<p>Isto é um texto com <strong>HTML é divertido</strong> no meio da frase.</p>

Citações: <q> vs <blockquote> ​

Os dois marcam citações, mas em contextos diferentes. Edite a citação e o autor e compare o resultado:

<q>: em linha, aspas automáticas

Como dizia Leonardo da Vinci: A simplicidade é o último grau de sofisticação.

<p>Como dizia Leonardo da Vinci: <q>A simplicidade é o último grau de sofisticação.</q></p>

<blockquote>: em bloco, com atribuição

A simplicidade é o último grau de sofisticação.

Leonardo da Vinci
<blockquote>
  <p>A simplicidade é o último grau de sofisticação.</p>
  <footer>Leonardo da Vinci</footer>
</blockquote>

Por que <q> não precisa de aspas digitadas

O navegador insere as aspas ao redor do conteúdo de <q> automaticamente, via CSS. Se você digitar aspas manualmente dentro de <q>, elas aparecem em dobro. <blockquote> não recebe aspas automáticas: por ser um elemento de bloco, a citação já se destaca do texto ao redor, e a fonte costuma ser indicada com <footer><cite>.

Propriedades de imagem ​

Ajuste os atributos de <img> sobre a foto do campus da UPF e veja o resultado, incluindo o que acontece quando a imagem falha ao carregar:

Campus da UPF em 2009
<img src="/UPF2009.jpg" alt="Campus da UPF em 2009" width="320" />

Montar uma tabela ​

Ajuste linhas e colunas e observe a estrutura <thead>/<tbody> gerada:

Coluna 1Coluna 2Coluna 3
Linha 1, Col 1Linha 1, Col 2Linha 1, Col 3
Linha 2, Col 1Linha 2, Col 2Linha 2, Col 3
Linha 3, Col 1Linha 3, Col 2Linha 3, Col 3
<table>
  <thead>
    <tr>
      <th>Coluna 1</th>
      <th>Coluna 2</th>
      <th>Coluna 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Linha 1, Col 1</td>
      <td>Linha 1, Col 2</td>
      <td>Linha 1, Col 3</td>
    </tr>
    <tr>
      <td>Linha 2, Col 1</td>
      <td>Linha 2, Col 2</td>
      <td>Linha 2, Col 3</td>
    </tr>
    <tr>
      <td>Linha 3, Col 1</td>
      <td>Linha 3, Col 2</td>
      <td>Linha 3, Col 3</td>
    </tr>
  </tbody>
</table>

Tipos de input ​

Escolha um type e veja como o navegador renderiza o campo nativamente:

Valida formato de e-mail e mostra teclado apropriado em celulares.

<input type="email" id="demo-input" />