Elementos de citações e comentários

Os elementos abaixo são indicados para fazer referências ou citações a outros conteúdos, mas com algumas particularidades. Veja porque é tão importante conhecê-los.

Quando nos referimos a um conteúdo extraído de outra fonte e citado em nosso documento, ou quando inserimos algo que outra pessoa disse ou escreveu, usamos essas tags. O uso delas mantém uma boa semântica focada no SEO.

A primeira dessa lista é <q>. Essa tag serve para citações curtas, fragmentos de textos retirados de uma fonte externa, um site, revista, jornal, etc. Geralmente os navegadores rederizam essa tag como aspas (").


<q>
  HTML é a linguagem de marcação padrão para criar páginas da Web.
</q>
HTML é a linguagem de marcação padrão para criar páginas da Web.


<blockquote>

Essa tag é usada para uma citação mais longa. Os navegadores costumam recuar o conteúdo de <blockquote> .


<blockquote>
  O objetivo de um navegador da web (Chrome, Edge, Firefox, Safari) é ler documentos HTML e exibi-los. O navegador não exibe as tags HTML, mas as utiliza para determinar como exibir o documento.
</blockquote>
O objetivo de um navegador da web (Chrome, Edge, Firefox, Safari) é ler documentos HTML e exibi-los. O navegador não exibe as tags HTML, mas as utiliza para determinar como exibir o documento.


<cite>

Comumente usado junto ao <blockquote> é o <cite>. Essa tag é usada para informar o autor da citação. Também pode ser usada para citar o autor de uma obra de arte, nesse caso ela vem acompanhada de uma imagem.

Você pode usar essa tag para informar o autor de tudo, incluindo um código ou qualquer outro tipo de trabalho. Ela é renderizada em itálico.


<blockquote>
	A solidão, mais ainda que a doença, demonstra, da maneira mais radical, se um homem foi criado e predestinado para a vida; ou se, como a maioria, o foi para a morte.
	<cite>Friedrich Nietzsche 1844 - 1900</cite>
</blockquote>
A solidão, mais ainda que a doença, demonstra, da maneira mais radical, se um homem foi criado e predestinado para a vida; ou se, como a maioria, o foi para a morte. Friedrich Nietzsche 1844 - 1900


<abbr>

O <abbr> define o significado de uma abreviação ou acrônimo, fornece uma descrição completa para siglas. Essa tag passa informações úteis para navegadores, sistemas de tradução e buscadores, logo se você quer manter o SEO de sua página completo, use sempre essa tag em suas siglas, abreviações e acrônimos.


<p>
  Assim é fácil aprender <<abbr tiltle="Linguagem de Marcação de Hipertexto">HTML</abbr>
</p>

Assim é fácil aprender HTML



<address>

O <address> define as informações de contato (autor / proprietário) de um documento (<body>) ou artigo (<article>) e pode incluir qualquer tipo de informação de contato necessária, como endereço físico, URL, email, telefone, mídia social, coordenadas geográficas, etc.

<address> pode ser usado em uma variedade de contextos, como fornecer informação de contato de uma empresa no header da página, ou indicar o autor de um artigo incluindo um elemento <address> dentro do <article>.


<address>
  Rua 612 sudeste, lt 05.<br>
  Nos visite em:<br>
  clickartweb.com.br<br>
  Sala 1125, Águas Claras Shopping<br>
  Brasília-DF
</address>
Rua 612 sudeste, lt 05.
Nos visite em:
clickartweb.com.br
Sala 1125, Águas Claras Shopping
Brasília-DF


<bdo>

Aqui chegamos a uma tag que, sinceramente, não vejo muita utilidade para ela, eu mesmo nunca precisei usá-la, a não ser aqui nesse texto, mas pode ter gente que faz uso da . Alguns até dizem que houve um descuido aqui, vai saber neh?

Mas o que ela faz mesmo?

Ela é usada para substituir a direcionalidade atual do texto. Agora complicou tudo. Na verdade é bem simples, ela pega um texto e reescreve de trás para frente.


<p>Aqui o texto escrito de forma normal</p>
<bdo dir="rtl">Aqui o texto escrito de trás par frente</bdo>

Aqui o texto escrito de forma normal

Aqui o texto escrito de trás par frente


Comentários

Comentários, como em toda linguagem, é um recurso de extrema valia, há vários motivos para comentar um código, ou parte dele.

Com os comentários, você pode colocar notificações e lembretes no seu código HTML.

Os comentários também são ótimos para depurar o código, porque você pode comentar as linhas de código, uma de cada vez, para procurar erros. Eu mesmo faço muito uso dessa técnica.

Você pode adicionar comentários à sua fonte HTML usando a seguinte sintaxe:


<!-- Aqui você pode escrever seu comentário -->

Observe que há um ponto de exclamação (!) Na marca de abertura, mas não na marca de fechamento.

Nota: Os comentários não são exibidos pelo navegador, mas podem ajudar a documentar seu código-fonte HTML.

Bom galera, por hoje é só, qualquer dúvida vocês podem entrar em contato comigo, aqui pelo site mesmo ou pelas redes sociais, eu também respondo pelo whatsapp. Valeu e até a próxima!

Aprenda as principais linguagens usadas na WEB.

Aqui você tem acesso gratuito às principais linguagens de programação web, não perca tempo, acesse nosso conteúdo e comece a programar agora mesmo.

Compartilhe:

Sobre o autor

Analista de Sistemas com foco atual na área de WEB. Amante de boa música, estratégias criativas. Gosto de trabalhar com quem tem talento, se não for para ser perfeito, melhor nem começar. Gosto de liderança, estratégias e, principalmente, pôr a mão na massa.