Guia Estelar de HTML

Começando do começo:

HTML = Hypertext (hipertexto) Markup (marcação) Language (linguagem).
<> = Tags.

<h1> = Caixa de título.
Elementos vazios só tem uma "<>", como o "<img src="" alt="">".

Atributosbooleanos:

Atributos booleanos não precisam de conteúdo. Possuem dois tipos de valores, sendo eles verdadeiro ou falso, não havendo texto, apenas essas duas opções.

Exemplo:
<input type="text" disabled>

Voltar ao índice.

Atributos Globais

Atributos globais são atributos aplicáveis em todas as Tags.
As principais são:

class — além de classificar as Tags, é usada para aplicar estilo css e também para acessar com o Java Script.
<div class="conteúdo"> </div>

contenteditable — usado para editar o conteúdo da página, porém não é mantido após salvar.
<div contentedtable="true"> </>

data-* — usado para expandir os tipos de atributos que podemos usar para fazer mais tarde lógica no Java Script , utilizado em css também.
<div data-qualquercoisaaqui=""> </div>
Escrito com "-" ou tudo junto.

hidden — usado para esconder uma Tag.
<div class="carrinho" hidden> conteúdo </div>

id — usado apenas 1 por Tag para identificação, para também mais tarde usar no Java Script e css.
<div id="texto"> conteúdo </div>
 
<div id="texto2"> conteúdo </div>

style — aplica a estilização na Tag, normalmente não se usa "style" dentro da Tag, mas sim em arquivos externos.
<div style="color: red"> conteúdo </div>

tabindex — usado para ordenar o Tab na página.
<div tabindex="3"> </div>
<div tabindex="1"> </div>
<div tabindex="2"> </div>

title — serve para definir um título para a Tag, quando colocamos o mouse descansando em cima do conteúdo da página.

Outros Atributos Globais

Voltar ao índice.

Aninamento de Tags

<em>para deixar o conteúdo em itálico.</em>
<b>para deixar o conteúdo em negrito.</b>
<strong>em negrito e com maior importância.</strong>

Voltar ao índice.

Caracteres Reservados

&&amp;
/&sol;
\&bsol;
(&lpar;
)&rpar;
[&lsqb;
]&rsqb;
=&equals;
<&lt;
>&gt;
"&quot;
'&apos;
Espaços       entre as palavras.&nbsp;
Quebra de linha.<br>

Voltar ao índice.

Anatomia Documento

<!DOCTYPE html>— diz ao navegador que estamos a trabalhar com HTML 5.
<html></html>— o próprio HTML, elemento raiz, o inicio da cadeia.
<head></head>— contém configurações importantes para página, mas não ainda o que o usuário vai ver.
<meta>— onde vai representar vários tipos de metadados da página.
<title></title>— título da página.
<body></body>— onde haverá conteúdo visual da página.

Voltar ao índice.

Títulos e Parágrafos

<hx></hx> - indo de 1 à 6 é a tag para título, 1 sendo o maior e 6 sendo o menor, a hierarquia indo de título, subtítulo e etc.
<p></p> - este sendo a tag de parágrafo.

Voltar ao índice.

Listas

Listas no HTML são feitas da seguinte forma:

  1. <li> </li> - colocar os elementos da lista.
  2. <ul> </ul> - para uma lista não ordenada.
  3. <ol> </ol> - para uma lista ordenada.

<hx> Lista de alguma coisa: </hx>
 <ol>
   <li> Conteúdo 1 </li>
   <li> Conteúdo 2 </li>
   <li> Conteúdo 3 </li>
 </ol>

Voltar ao índice.

Citações

<blockquote>,<code>e ocite.
São configurados dessa maneira, por exemplo:
<blockquote cite="exemplo">
O<strong>Elemento HTML<code>&lt;blockquote&gt;</code></strong>(ou<em>HTML Block Quotation Element</em>) indica que um texto externo foi citado.
</blockquote>
O Elemento HTML <blockquote> (ou HTML Block Quotation Element) indica que um texto externo foi citado.

O<blockquote>para uma citação que você queira deixa maior, tendo uma estilização mais diferente;
O<code>altera a grafia para mostrar que é um código.
Ociteé um atributo usado para citar a URL. Dessa maneira:

O<cite></cite>:

O <cite></cite> é a tag usada para colocar o citar link direto no texto.

Exemplo:

De acordo com<a href="exemplo" target="_blank"><cite>página MDN blockquote</cite></a>:
De acordo com página MDN blockquote:
O<q></q>, usado para citação curta com aspas:

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

<q cite="link">MDN Elemento q</q>
MDN Elemento q

MDN q page.

Voltar ao índice.

Abreviações

<abbr title="">HTML</abbr>

Usamos <abbr title="Hypertext Markup Language"> HTML </abbr> para estruturar nossos documentos da web.
 
Então, se colocarmos o mouse em cima da abreviação, teremos a palavra inteira:

Usamos HTML para estruturar nossos documentos da web.

Voltar ao índice.

Detalhes de contato

Tag <address></address> do autor da pagina, por exemplo.

Guilherme Renkens
Adamantina, SP

Voltar ao índice.

Listas de descrição

<dl></dl> - Tag para lista de descrições.
<dt></dt> - Tag para o termo da descrição.
        <dd></dd> - Tag para descrição.

Glossário:

HTML:
Hypertext
É um hipertexto com possibilidades..
Markup
Marcação do texto
Language
Linguagem com sua semântica e sintaxe..

Voltar ao índice.

Representação de código

<code></code> - Muda a cor do conteúdo para representar código.
<pre></pre> - Tag para criar um bloco de código, mantém os espaços em branco. 

                                    Exemplo de <pre>

Voltar ao índice.

Elementos Genéricos

<div></div> - Tag usada para agrupar conteúdo.
<span></span> - Tag usada para agrupar texto, em uma ideia horizontal.

Camiseta R$ 99,90

Voltar ao índice.

Tabelas

Prós:
  • Visualização de dados via linhas e colunas;
  • Boa acessibilidade para leitura de dados;
Contras:
  • Pouco flexível;
  • Precisa de estilização para melhor visualização;
Não usar:
  • Para criar seu layout;

Voltar ao índice.

Tabela básica

<table></table>

Para fazer uma tabela básica, precisarei da tag <table></table>, dentro dela usarei a tag <tr></tr> (table row) para criar uma linha na tabela, e dentro dela usarei a tag <th></th> para o cabeçalho.

Depois farei o tr novamente, só que agora não sendo o cabeçalho, e sim o td.

Exemplo:
<table>
   <tr>
    <th>Nome</th>
    <th>Idade</th>
   </tr>
   <tr>
    <th>Guilherme</th>
    <th>26</th>
   </tr>
 </table>
Nome Idade
Guilherme 26

Voltar ao índice.

Organizando tabelas

<thead></thead>,<tbody></tbody>,<tfoot></tfoot>e<caption></caption>.

Colocarei o cabeçalho na tag<thead></thead>, o corpo no<tbody></tbody> e criarei o rodapé usando o<tfoot></tfoot> colocando os dados totais.

Por fim, posso colocar a tag<caption></caption> para descrever sobre o que a minha tabela é.

Exemplo:
<table>
 <caption>Pessoas por idade</caption>
  <thead>
   <tr>
    <th>Nome</th>
    <th>Idade</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Guilherme</td>
    <td>26</td>
   </tr>
   <tr>
    <td>Diego</td>
    <td>25</td>
   </tr>
  </tbody>
  <tfoot>
   <tr>
    <td>Total:</td>
    <td>2 Pessoas</td>
   </tr>
  </tfoot>
 </table>
Pessoas por idade
Nome Idade
Guilherme 26
Diego 25
Total: 2 Pessoas

Voltar ao índice.

Tabela complexa

THead complexa

  1. Criei o table.
  2. Coloquei a descrição com o caption.
  3. Criei o thead para começar a o cabeçalho
  4. Abri o tr dentro para a linha e coloquei dentro deste 3th, o primeiro sendo vazio.
  5. Na próxima linha, os produzidos e vendidos.
  6. Com o emmet, criei 4 th e coloquei os produzidos e vendidos.
  7. Ainda estava desorganizado, então usei o atributo rowspan="2" na primeira linha para ocupar 2 linhas e empurrar os elementos para o lado.
  8. Como sobraram duas colunas vazias, usei o atributo de coluna colspan="2" nas duas lojas.
Exemplo:
<table>
  <caption>Produzidos x Vendidos por Loja</caption>
  <thead>
   <tr>
    <th rowspan="2"></th>
    <th colspan="2">Afonso Pena</th>
    <th colspan="2">Antônia Pereira</th>
   </tr>
   <tr>
    <th>Produzidos</th>
    <th>Vendidos</th>
    <th>Produzidos</th>
    <th>Vendidos</th>
   </tr>
  </thead>
 </table>
Produzidos x Vendidos por Loja
Afonso Pena Antônia Pereira
Produzidos Vendidos Produzidos Vendidos

TBody complexo

Dando continuidade à tabela:

  1. Criei o tbody.
  2. Abri uma linha com o tr com o nome do produto, que será um th (um cabeçalho).
  3. Com o emmet, criei 4 td p/ colocar o tanto de produtos produzidos e vendidos.
  4. Repeti o processo, dessa vez, para outro produto.
Exemplo:
<table>
  <caption>Produzidos x Vendidos por Loja</caption>
  <thead>
   <tr>
    <th rowspan="2"></th>
    <th colspan="2">Afonso Pena</th>
    <th colspan="2">Antônia Pereira</th>
   </tr>
   <tr>
    <th>Produzidos</th>
    <th>Vendidos</th>
    <th>Produzidos</th>
    <th>Vendidos</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th>Vassouras</th>
    <td>50</td>
    <td>30</td>
    <td>20</td>
    <td>20</td>
   </tr>
   <tr>
    <th>Baldes</th>
    <td>10</td>
    <td>10</td>
    <td>30</td>
    <td>25</td>
   </tr>
  </tbody>
 </table>
Produzidos x Vendidos por Loja
Afonso Pena Antônia Pereira
Produzidos Vendidos Produzidos Vendidos
Vassouras 50 30 20 20
Baldes 10 10 30 25

Voltar ao índice.

Melhorando o aspecto com colgroup

Passos:

  1. Coloquei a tag <colgroup></colgroup>.
  2. Dentro, coloquei 3 col
  3. Onde na segunda coloquei o atributo style="background-color:red;".
  4. E na terceira style="background-color:blue;".
  5. Porém, ainda está desorganizado. Por isso, colocarei span="2" para alinhar a cor com a coluna.
Exemplo:
<table>
  <caption>Produzidos x Vendidos por Loja</caption>
  <colgroup>
   <col span="2" style="background-color: red;">
   <col span="2" style="background-color: blue;">
  </colgroup>
  <thead>
   <tr>
    <th rowspan="2"></th>
    <th colspan="2">Afonso Pena</th>
    <th colspan="2">Antônia Pereira</th>
   </tr>
   <tr>
    <th>Produzidos</th>
    <th>Vendidos</th>
    <th>Produzidos</th>
    <th>Vendidos</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th>Vassouras</th>
    <td>50</td>
    <td>30</td>
    <td>20</td>
    <td>20</td>
   </tr>
   <tr>
    <th>Baldes</th>
    <td>10</td>
    <td>10</td>
    <td>30</td>
    <td>25</td>
   </tr>
  </tbody>
 </table>
Produzidos x Vendidos por Loja
Afonso Pena Antônia Pereira
Produzidos Vendidos Produzidos Vendidos
Vassouras 50 30 20 20
Baldes 10 10 30 25

Voltar ao índice.

Melhorando acessibilidade

scope

Usei o atributoscope, para permitir que essa acessibilidade saiba que o escopo do cabeçalho é relacionado com o agrupamento, ou a coluna, ou a linha.

O atributo é escrito scope="".

<table>
  <caption>Produzidos x Vendidos por Loja</caption>
  <colgroup>
   <col span="2" style="background-color: red;">
   <col span="2" style="background-color: blue;">
  <qcolgroup>
  <thead>
   <tr>
    <th rowspan="2"></th>
    <th colspan="2" scope="col">Afonso Pena</th>
    <th colspan="2" scope="col">Antônia Pereira</th>
   </tr>
   <tr>
    <th scope="col">Produzidos</th>
    <th scope="col">Vendidos</th>
    <th scope="col">Produzidos</th>
    <th scope="col">Vendidos</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th scope="row">Vassouras </th>
    <td>50</td>
    <td>30</td>
    <td>20</td>
    <td>20</td>
   </tr>
   <tr>
    <th scope="row">Baldes </th>
    <td>10</td>
    <td>10</td>
    <td>30</td>
    <td>25</td>
   </tr>
  </tbody>
 </table>
Produzidos x Vendidos por Loja
Afonso Pena Antônia Pereira
Produzidos Vendidos Produzidos Vendidos
Vassouras 50 30 20 20
Baldes 10 10 30 25

Voltar ao índice.

Meta

<meta>

A tag <meta> serve paradefinir metadados,como:

Codificação de caracteres especiais:
<meta charset="UTF-8">

e...

Portabilidade para dispositivos mobiles:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta normalmente virá com o atributo:

  • name- para especificar a meta;
  • content- para conteúdo;
  • charset- para caracteres especiais.

Voltar ao índice.

Favicon

Favicon é uma abreviação que referia-se aos ícones dos favoritos nos navegadores, alguns anos atrás, e nos dias de hoje acabou pegando este termo.

Antigamente ele era por 16 píxeis, porém com o avanço da tecnologia isso mudou.

Para colocarmos o ícone usaremos a tag <link> com o atributo rel="icon" para representar relação/relacionamento de icon, no caso a tag link vai conter um ícone, depois o href para mostrar onde está o ícone.

<link rel="icon" href="../html-icon.png">

Voltar ao índice.

Meta SEO

Lembrando: o <meta></meta> estará sempre dentro do <head></head>

Veremos agora das metas que são importantes para SEO.
Essa já foi vista anteriormente e é a mais comum:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Autor:

Temos também o de autor, para definir o autor da página, para possuirmos propriedade sobre a página.

<meta name="author" content="Fulano da Silva">

Descrição de sites:

Este meta é usado para descrição de sites, caso você não tenha esse meta, o navegador irá procurar qualquer texto seu, mas muito melhor escolher o que você quer que apareça.

<meta name="description" content="Um website para iniciantes em programação">

Resultados da busca no Google:

Esse meta diz para o robô do google o que queremos que ele faça, ele é responsável por colocar os resultados da busca , por exemplo.
É possível dizer ao robô seguir links na página, através do follow, ou o contrário com o nofollow , ou "indexar" a página, através do index, ou noindex.

<meta name="robots" content="index, follow">

Voltar ao índice.

Meta Social

Lembrando: o <meta></meta> estará sempre dentro do <head></head>

Metadados Facebook:

Existem metadados personalizados por empresas de redes sociais, como Facebook, que criou o Open Graph, que é um tipo de metadado se quisermos colocar um tipo de conteúdo especial, caso queiramos compartilhar o link da nossa página no Facebook.

<meta property="og:image" content="https://cdn-images-1.medium.com/max/92/1*TkXVfLTwsHdwpUEjGzdi9w@2x.jpeg">
<meta property="og:description" content="Aqui vem um texto para ser mostrado ao compartilhar no Facebook">
<meta property="og:title" content="Um site da Rocketseat">

São exemplos de metadados, que o Facebook procura na hora que compartilhamos a nossa página, como imagens, descrição, texto e outros.

Metadados Twitter:

O Twitter usa o atributo name, diferente do Facebook que resolveu usar o property.

<meta name="twitter:title" content="Rocketseat">

Voltar ao índice.