Neste artigo, aprenderemos sobre marcação de texto, títulos, formatação de código, links e elementos de citação em HTML.
Antes da explicação, é importante saber que a marcação de texto em HTML é usada para marcar a semântica do texto e não para formatação visual (apresentação). No entanto, alguns elementos de formatação podem alterar o formato visual do texto.
As tags HTML são para marcação (principalmente semântica) e não para apresentação.
Elementos de Formatação de Texto
Se você precisa destacar um texto, uma palavra ou caractere de maneira diferente, existem alguns elementos:
Elemento p
para Parágrafos
Todos os parágrafos (nem todos os textos) devem estar dentro de um elemento de parágrafo.
Aqui está um trecho de código:
<p>
A tag p é usada para criar parágrafos. Ela formata o conteúdo como um parágrafo e não quebra linhas por padrão.
</p>
<p>Um segundo parágrafo estará em uma nova linha.</p>
O resultado deste código é:
Elemento small
para Texto Menor
Primeiramente, não recomendo o uso do elemento small
porque ele não tem significado semântico, e toda formatação deve ser feita com CSS.
O elemento small
permite que um texto dentro de suas tags de abertura e fechamento seja menor do que o restante do texto.
Aqui está um trecho de código:
<p>
É possível indicar que uma palavra será <small>menor</small> do que as outras.
</p>
O resultado deste código é:
Elemento strong
para Conteúdo Importante
Se você tiver palavras ou textos importantes, é bom usar o elemento strong
. Observe que strong
geralmente é em negrito, mas isso não é relevante; pense apenas na semântica.
E o Elemento b
?
O elemento b
é para conteúdos que merecem atenção, mas não são mais importantes do que o restante do texto, e não é necessário alterar a voz ou o tom em leitores de tela. Um exemplo comum de uso é palavras-chave em um texto.
Aqui está um trecho de código:
<p>
Se eu quiser indicar que algo é <strong>importante</strong>, posso usar a tag strong.
<br />Mas também existe uma tag para <b>negrito</b>, que é a tag b. Qual é a diferença?
</p>
O resultado do trecho de código é:
Elemento em
para Ênfase
Se você precisa de mais ênfase em um conteúdo específico, use o elemento em
. Esse conteúdo não é mais importante do que o restante do texto, pois para importância, usamos strong
. Observe que em
geralmente é em itálico, mas isso não é relevante; pense apenas na semântica.
E o Elemento i
?
O elemento i
é para voz ou tom alternativo em leitores de tela ou termos específicos, como designação taxonômica, um termo técnico ou uma frase idiomática de outro idioma. É importante observar que termos em diferentes idiomas do texto principal geralmente devem estar em itálico, mas o itálico deve ser indicado no CSS. No HTML, termos ou textos em diferentes idiomas devem ser anotados com o atributo lang
.
Aqui está um trecho de código:
<p>
Se eu quiser indicar que algo é <em>ênfase</em>, posso usar a tag em.
<br />Mas também existe uma tag para <i>itálico</i>, que é a tag i. Qual é a diferença?
</p>
O resultado do trecho de código é:
Elemento mark
para Destacar Conteúdo
O elemento mark
é usado para destacar termos em um texto sem significado semântico.
Aqui está um trecho de código:
<p>Se você deseja <mark>destacar</mark> um texto, use mark.</p>
O resultado do trecho de código é:
Títulos
Para títulos em seu texto, use h1
, h2
, h3
, h4
, h5
e h6
. Lembre-se de que os títulos são hierarquias, como nas figuras abaixo. Portanto, h2
só existe se houver um h1
antes, h3
só existe se houver um h2
antes e assim por diante. Recomendo que haja apenas um h1
por página/documento (ou por seção ou artigo).
-
h1
para o título principal da página ou seção; -
h2
para um subtítulo; -
h3
para um sub-subtítulo; -
h4
para um sub-sub-subtítulo; -
h5
para um sub-sub-sub-subtítulo; -
h6
para um sub-sub-sub-sub-subtítulo;
Alguns títulos em visualização em árvore:
Alguns títulos em outra visualização em árvore:
Observe que cada título aparece em um tamanho, mas isso não é importante no HTML; pense na semântica e na ordem de cada título. O tamanho pode ser alterado no CSS.
Aqui está um trecho de código:
<h1>Título Nível 1</h1>
<h2>Título Nível 2 - subtítulo h1</h2>
<h3>Título Nível 3 - subtítulo h2</h3>
<h4>Título Nível 4 - subtítulo h3</h4>
<h5>Título Nível 5 - subtítulo h4</h5>
<h6>Título Nível 6 - subtítulo h5</h6>
O resultado do trecho de código é:
Formato de Código
Se você precisa mostrar códigos ou texto sem formatação, pode usar os elementos pre
e code
.
pre
é para um bloco de texto pré-formatado, onde espaços são preservados e a fonte pode ser monoespaçada. Outro elemento é code
para códigos de programação. Observe que o código não oferece destaque de sintaxe; para isso, use código JavaScript + CSS, como o Highlight.js.
Geralmente, os códigos de computador em linha são marcados com o elemento code
, e os blocos de códigos de computador são marcados com os elementos pre
e code
.
Aqui está um trecho de código:
<p>A função <code>printf</code> imprime uma mensagem na tela do usuário</p>
<pre>
<code>
int main(){
printf("Mensagem");
return 0;
}
</code>
</pre>
O resultado do trecho de código é:
Link para Outra Página
Um elemento muito útil em HTML é a tag a
para links para outras páginas ou elementos na web (como imagens, textos, arquivos etc.). Um link pode ser um texto, um botão, um ícone, uma imagem, uma seção ou qualquer outro elemento.
Aqui está um trecho de código:
<p>
<a href="https://google.com.br">Google</a>
</p>
O resultado do trecho de código é:
Elementos de Citação
Podemos usar cite
e blockquote
para citação. cite
indica os autores, e blockquote
cria citações.
Aqui está um trecho de código:
<blockquote>
"A última tag aberta deve ser a primeira a ser fechada."
</blockquote>
<cite>Arthur Assuncao, 2023</cite>
O resultado do trecho de código é:
O Que Vem Aí
Nos próximos artigos, você explorará os elementos de bloco e a web semântica. Fique ligado!
Top comments (0)