Espero que você tenha aprendido bastante na nossa última "texto aula". A seção de tags de conteúdo é super importante, principalmente por conta da semântica.

Essas são as tags que usamos:

• header : define o cabeçalho do conteúdo;
• main: define o conteúdo principal;
• aside: define um conteúdo separado do conteúdo principal (como um menu lateral);
• section: define uma seção de conteúdo;
• article: define um artigo de conteúdo;
• span: usado para um conteúdo qualquer, pode ser usado para conter uma classe de estilo (elemento de linha);
• div: usado para um conteúdo qualquer, pode ser usado para conter uma classe de estilo (elemento de bloco);

Acima temos um exemplo de como poderia funcionar a estrutura de site genérico.

SEO é uma otimização para os motores de busca, isto é, um conjunto de técnicas que influenciam os algoritmos dos buscadores a definir o ranking de uma página para determinada palavra-chave que foi pesquisada.

Clique aqui para saber mais.

Antigamente os sites eram feitos usando somente divs, com as tags semânticas fica muito mais fácil entender cada parte do código. Por isso sempre opte por deixar seu site 100% semântico, até porque os robozinhos do Google (aqueles que te mostram as páginas principais) dão preferência por sites assim. Fica a dica.

Deixando o conteúdo ainda mais legal...

Para isso podemos usar imagens. Para acrescentar uma imagem ao corpo documento basta abrir a tag <img>. Essa tag recebe como atributos src="", para especificar o caminho até a imagem em questão, alt="", é um texto alternativo, que será mostrado no local da imagem caso a URL dada esteja errada, e title="", o título que será mostrado quando o usuário passar o mouse em cima.

Lembrando que você pode adicionar .gif, além de .png, .jpeg ou .svg. O caminho da imagem pode ser local, ou você pode copiar o endereço da imagem no Google Imagens, por exemplo. Clique para saber mais sobre.

Um exemplo disso:

E para quebras de linhas podemos usar <br> ou <hr> (esse gera uma linha além da quebra). Como o foco aqui é aprender as tags do HTML, esses elementos nos bastam, mas quando começarmos a estilizar com CSS, dê preferência a ele, certo?

Agora deixo um desafio: criar um site semânticamente estruturado com as tags que aprendemos até agora. Deixarei a janela de código do Codepen abaixo, mas se sinta a vontade para criar suas páginas lá no site também.

See the Pen código vazio by paolaguedes (@paolaguedes) on CodePen.