Trabalhando com Elementos HTML

Semântica


Dar significado
Elementos Semâmticos
"Quando o HTML é feito de forma bem estruturada, de forma semântica, tem-se melhores resultados."

Perguntas que podem serem feitas para se pensar de forma semântica:

1. Quais são os elementos que melhor descrevem o que farei?
2. Farei um título? (se sim, terei de usar "tal" elemento).
3. Colocarei aqui um elemento do lado do outro?
4. Farei uma lista? Ela tem ordem?
5. Farei um artigo? Então precisarei separar sessões.
6. Minha página tera um cabeçalho? Um rodapé?

Cabeçalhos e Parágrafos

Temos 6 tamanhos diferentes para usarmos em títulos, sendo eles: h1, h2, h3, h4, h5 e h6. Sendo h1 o maior e h6 o menor.

Listas

Ordenadas e Não ordenadas.

Exemplo de Lista Não Ordenada:

-> Suco Detox:

  • 3 Folhas de couve;
  • 1 Laranja;
  • 1 Pedaço de gengibre;
  • 300ml de água;
  • Adoçante a gosto;
  • Gelo a gosto.

    • Usamos <li>; para adicionarmos uma formatação de lista. Podemos também multiplicar o <li> pela quantidade de vezes que forem necessárias. digitando por exemplo: li*(número).

    Podemos tornar essa lista ordenada colocando a condição <li>, dentro da condição <ol>, pois ela vai ordenar essa lista como podemos ver em seguida:

    -> Suco Detox:

    1. 3 Folhas de couve;
    2. 1 Laranja;
    3. 1 Pedaço de gengibre;
    4. 300ml de água;
    5. Adoçante a gosto;
    6. Gelo a gosto.

    Perceba que teve um recuo ao adicionarmos a condição <ol>, esse recuo pode haver também sem a necessidade de tornar essa lista ordenada. Façamos da seguinte forma:

    No lugar da condição <ol>, utilizaremos a condição <ul>. Ela mantera os pontos no lugar dos números e adicionará os recuo como podemos observar à seguir:

    -> Suco Detox:

    Citações

    Exemplo Blockquote:

    O Elemento HTML <bloquote> (ou HTML Block Quoation Element) indica que um texto externo foi citado.

    Exemplo Cite:

    De acordo com Página Rocketseat

    O elemento quote — <q> — é usado para citações curtas que não precisam de parágrafos ou quebras de linha. -- Rocketseat.

    Abreviações

    <abbr> : Utilização para criar abreviação de palavras se colocarmos o mouse em cima da abreviação, teremos a palavra inteira.

    Exemplo Abbr:

    Usamos HTML para estruturar nossos documentos da web.

    Detalhes de Contato

    <address> : A tag usada para apenas colocar detalhes de contato, não endereço em si, mas por exemplo o autor da página.

    Exemplo Address:

    Guilherme B. Nunes
    São Leopoldo, RS

    Listas de Descrição

    <dl> : Tag para lista de descrição.
    <dt> : Tag para o termo de descrição.
    <dd> : Tag para a descrição.

    Exemplo Lista de Descrição:

    Glossário

    <dl>
        <dt> Hypertext </dt>
              <dd> É um hiper texto com possibilidades... </dd>
         <dt> Markup </dt>
              <dd> Marcação do Texto </dd>
         <dt> Languague </dt>
              <dd> com sua semântica e sintaxe.... </dd>
    </dl>

    Representação de código

    <code> : Muda a cor do conteúdo para representar o código.
    <pre> : Tag para criar um bloco de código, mantendo espaços em branco.

    Exemplo Representação de código:

    <pre>
       <code>
          <lt>
       <code>
    <pre>

    Elementos Genéricos

    <div> : Tag usada para agrupar conteúdo em forma de blocos.
    <span> : Tag usada para agrupar conteúdo (normalmente textos) em forma de linha.

    Exemplo de elementos genéricos:

    <div class="cart">
        <span> Camiseta </span>
        <span> $ 99,00 </span>
    </div>