A Aula Espaço para subtítulo porque sim

Introdução

1

Este é o Título Principal (h1)

Aqui pode ir qualquer texto equivalente a uma tagline ou "subtítulo": nomes dos autores, um adendo ao título, qualquer coisa assim.

Eu sou um texto escrito em HTML e estou me apresentando. Este título que você acabou de ver usa a tag <h1>, que serve para destacar o nível mais alto da hierarquia de títulos. É normalmente usado uma única vez por página para identificar o assunto principal.

Subtítulo de Segundo Nível (h2)

Agora estou usando a tag <h2>, que representa um subtítulo abaixo do h1. A hierarquia é importante: h2 está subordinado ao h1, indicando uma seção dentro do tema principal.

Sub-subtítulo (h3)

Este é um <h3>, que fica dentro do contexto do h2. Assim, a hierarquia de títulos ajuda a organizar o documento, permitindo que leitores e mecanismos de busca compreendam a estrutura do conteúdo.

Sub-sub-subtítulo (h4)

Sub-sub-sub-subtítulo (h5)
Sub-sub-sub-sub-subtítulo (h6)

Veja que eu posso usar negrito com <strong> para destacar algo importante, e também posso usar itálico com <em> para dar ênfase a uma parte do texto. Além disso, consigo exibir texto em sobrescrito (<sup>), como em 210 = 1024, e em subscrito (<sub>), como na fórmula química da água H2O.

2

Eu sou uma citação feita com a tag <blockquote>. Essa tag é usada quando você deseja destacar uma citação em bloco, geralmente de outra fonte.

Essa tag possui recuo lateral esquerdo, assim como a ABNT sugere para citações em geral. No entanto, essa tag pode ser usada mesmo se o texto em questão não for uma citação.

Listas Ordenadas e Não Ordenadas

A seguir, mostro um exemplo de lista ordenada (<ol>):

  1. Primeiro item
  2. Segundo item com um texto propositalmente mais longo, que se estende por várias palavras e até mesmo várias linhas, para que possamos observar como a quebra de linha e o espaçamento entre linhas funcionam dentro de um item de lista.
  3. Terceiro item

E aqui uma lista não ordenada (<ul>):

Figura com Legenda

Exemplo de imagem com legenda usando <figure> e <figcaption>

Notas de rodapé

É assim que funciona uma nota de rodapé . O conteúdo da nota fica no final do documento, e o botão precisa ter o atributo "data-for" corretamente preenchido , para corresponder à nota correta.

Caixa lateral

Do lado direito, um exemplo de uma caixa lateral. O elemento só precisa ser um aside ou ter a classe .lateral para isso. Ele aparecerá ao lado da tag anterior.

No caso desta caixa lateral ficar mais alta do que seu irmão, devido a seu conteúdo e por causa do CSS Grid, ele vai fazer o elemento irmão dele ter muito espaço embaixo.

Para resolver isso, coloque mais tags dentro de uma div com a classe .subgrid.

Tabelas

Agora, um exemplo de tabela usando <table>, com mais linhas e colunas.

A tabela precisa estar envolvida em uma tag <div> com a classe .container-table. Ela será adicionada automaticamente através de JS.

Exemplo de caption de uma table.
Nome Idade Profissão Cidade
Ana 25 Designer São Paulo
João 30 Engenheiro Rio de Janeiro
Maria 28 Professora Belo Horizonte
Carlos 40 Médico Curitiba
Fernanda 22 Estudante Porto Alegre
Lucas 35 Programador Recife
Sofia 27 Arquiteta Florianópolis

Links

Posso criar links com a tag <a>. É preferível que o texto da tag descreva para onde leva, como por exemplo, este acesso para o site do CIAR/UFG.

No entanto, em muitos casos, até por motivos de padrões ABNT, colocar a URL no texto da tag é obrigatório, e como não mexemos em conteúdo, ficaria algo assim: https://www.exemplo.com.br/subpagina/pagina.php?arg=valor&hash=bWH9bcQYFgaK4Xs. Neste caso, a tag recebe uma classe automaticamente que permite o texto quebrar em mais lugares e evitar linhas gigantes.

Incorporação de Vídeo

Com a tag <iframe> é possível incorporar conteúdo de outras páginas, como vídeos do YouTube. Veja um exemplo abaixo:

Notas de rodapé