Design
Introdução ao HTML
Elementos Básicos

HTML: Elementos Básicos#

Vamos começar lembrando os pontos principais dos conceitos básicos:

os marcadores que começam com < e terminam com > são chamados de tags;
quando uma tag começa apenas com o símbolo < seguido de uma palavra, ela é uma tag de abertura;
quando uma tag começa com os símbolos <!-- seguidos de uma palavra, ela é uma tag de fechamento;
em ambos os casos, a palavra é o nome da tag.
a parte do texto entre uma tag de abertura e sua tag de fechamento correspondente é o conteúdo dessas tags;
o trio formado por tag de abertura, tag de fechamento e conteúdo é chamado de elemento;
quando um elemento está dentro de outro, chamamos o externo de pai ou contêiner e chamamos o interno de filho;
elementos com o mesmo pai são chamados de irmãos;
atributos são expressões que podemos escrever em uma tag de abertura para adicionar ou modificar propriedades do elemento;
geralmente, um atributo é escrito na forma CHAVE="VALOR";
algumas tags, chamadas de self-closing, não têm fechamento.

Estamos prontos para desempacotar o exemplo e introduzir alguns elementos básicos.

Elementos h1, h2, h3#

Os elementos h1, h2, h3 representam diferentes níveis de título (heading) no documento, em ordem de hierarquia:

h1 representa o título primário, ou seja, algo como o "HTML: Elementos Básicos" desta página;
h2 representa um título secondário (subtítulo), ou seja, algo como o "Elementos h1, h2, h3" desta página;
h3 representa um título terciário (subsubtítulo)

e assim em diante. Existe também h4, h5, h6, mas é muito raro um documento precisar de tanta profundidade.

Repare que no Chrome os títulos são maiores e em negrito. Quanto mais importante, maior a fonte. Lembre-se: quem estabelece esse visual é o Chrome, não o HTML.

Elemento img#

A self-closing tag img representa uma imagem (image).

Elemento figure#

O elemento figure representa uma figura. Uma figura é um conjunto de uma ou mais imagens e, opcionalmente, uma legenda.

Elemento ul#

O elemento ul representa uma lista não-ordenada (unordered list). Os filhos desse elemento devem ser elementos li.

Repare que no Chrome esses filhos têm uma bolinha à esquerda. Lembre-se: quem estabelece esse visual é o Chrome, não o HTML.

Elemento ol#

O elemento ol representa uma lista ordenada (ordered list). Os filhos desse elemento devem ser li.

Repare que no Chrome esses filhos têm uma numeração à esquerda. Lembre-se: quem estabelece esse visual é o Chrome, não o HTML.

Elemento li#

O elemento li representa um item de lista (list item). O pai desse elemento deve ser ul ou ol e um irmão desse elemento deve ser li também.

Elemento p#

O elemento p representa um parágrafo (paragraph).

Elemento em#

O elemento em representa ênfase (emphasis).

Repare que no Chrome os elementos enfatizados são em itálico. Lembre-se: quem estabelece esse visual é o Chrome, não o HTML.

Espaços em branco#

Antes de concluir, cabe uma observação importante. Repare que o conteúdo do segundo p é o texto abaixo.

    Para garantir o seu <em>bolo de cenoura fofinho</em>, lembre-se de testar o
    fermento antes de adicioná-lo à massa e peneire a farinha de trigo! Isso
    vai garantir que um bolo de cenoura fofo, leve e ainda mais delicioso!

Esse texto tem quebras de linha e espaços em branco à esquerda de cada linha. No entanto, no documento mostrado pelo navegador, não vemos quebras e nem espaços.

Espaços em branco no HTML

Isso acontece porque o navegador transforma toda sequência de espaços em branco (espaços, tabs, quebras de linha) em um único espaço.

Ou seja, para o navegador, o código

Hi  <p>
    Hello
  World       </p>
        Universe

é igual ao código

Hi <p>Hello World</p> Universe

Pode parecer estranho à primeira vista, mas essa transformação na verdade facilita a vida do desenvolvedor. Se ela não fosse feita, todos os espaços, tabs e quebras de linha que escrevêssemos no código apareceriam no documento. Nesse caso, para garantir que o documento fique correto, teríamos que escrever código muito menos legível!

Exercise 1

Answer

É possível obter esse mesmo resultado utilizando diversas combinações de elementos diferentes. Inclusive tecnicamente não é necessário usarmos nenhuma tag de lista, mas isso é uma péssima ideia. Lembre-se do que conversamos na primeira parte deste handout: "Não vou escrever HTML pensando em visual". Isso quer dizer que devemos pensar na semântica (significado) dos elementos. Na imagem acima temos: uma lista ordenada (ol) contendo 3 itens (li) e, em cada item, algumas palavras com ênfase (em).

Apenas como curiosidade, o HTML que gerou a imagem acima é:

<ol>
    <li>Fundação (<em>Isaac Asimov</em>)</li>
    <li>Fundação e Império (<em>Isaac Asimov</em>)</li>
    <li>Segunda Fundação (<em>Isaac Asimov</em>)</li>
</ol>

Estamos quase terminando. Falta apenas ver a estrutura básica.