Citações HTML e Elementos de Citação

Aprenderemos muito sobre citações HTML neste capítulo sobre <q> , <blockquote> , <abbr> , <address> , <cite> , <bdo> e <define> elementos HTML .

Índice-

Citações HTML e Elementos de Citação:
- O Futuro é Sustentável:

Exemplo

Abaixo está uma citação retirada do site da Tesla:

O futuro é sustentável

Estamos construindo um mundo movido a energia solar, movido a baterias e transportado por veículos elétricos. Explore o impacto mais recente de nossos produtos, pessoas e cadeia de suprimentos.

HTML <blockquote> para cotações

Então, quando falamos de citações HTML , um elemento HTML <blockquote> indica que uma seção vem de outra fonte.

Os elementos <blockquote> geralmente são recuados pelos navegadores .

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<p>Below is a quote taken from the Tesla website:</p>
<blockquote cite="https://www.tesla.com/about">
We're building a world powered by solar energy, running on batteries, and being transported by electric vehicles. Explore the most recent impact of our products, people, and supply chain.
</blockquote>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Citações HTML <q> para citações curtas

Uma tag HTML < q > define uma citação curta. As citações são normalmente colocadas entre aspas nos navegadores quando se trata de citações HTML .

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<p>Tesla team says:
<q>Using a first-principles approach, we
solve some of the world's biggest problems. If you've done exceptional work, join us in tackling the next generation of engineering, manufacturing, and operational challenges.
</q>
</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML <abbr> para abreviaturas

Uma tag HTML <abbr> indica uma abreviação ou acrônimo, como “ Java “, “ php “, “Mrs.”, “Dr.”, “ASAP”, “ATM”.

O uso de abreviações pode fornecer informações importantes para mecanismos de pesquisa , navegadores e sistemas de tradução.

Dica: Se você passar o mouse sobre uma abreviação ou acrônimo, o atributo de título global exibirá sua descrição.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
<p>ASAP stands for
<abbr title="Abbreviations">
asap</abbr> .
</p>
<p>PHP stands for
<abbr title="Hypertext Preprocessor">
php</abbr> .
</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML <endereço> para informações de contato

Documentos e artigos podem ter uma tag < address > para identificar seu autor/proprietário. Pode ser um endereço de e-mail, um URL de site, um endereço físico, um número de telefone etc.

O texto de um elemento <address> geralmente é renderizado em itálico e cada linha é quebrada antes e depois do elemento <address>.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<body>
<address> US Tesla Stores & Galleries.
<br> Glendale AZ-9245 W Glendale Ave
<br> 9245 W Glendale Ave
<br> Glendale, AZ 85305
<br>
Roadside Assistance :
(877) 798-3752<br>
Service : (602) 337-5554
</address>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML <cite> para o título do trabalho

É aqui que um segmento específico da sintaxe HTML é usado para indicar como um conteúdo criativo é definido (por exemplo, um livro, um poema, uma música, um filme, uma pintura, uma escultura, etc.) em citações HTML .

Observação: não é o nome da pessoa que determina o título de uma obra e os elementos de Citação geralmente exibem o texto em itálico.<cite>

Example:

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p> <cite>The Avengers </cite> is directed by Joe Russo, Joss Whedon, Anthony Russo in 2012. </p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Example:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html><body><br>
<p>Execute<br></p>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilização HTML <q>

O estilo pode ser feito na tag q usando propriedades CSS . Veja exemplo abaixo

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head><style>
q{
background-color:yellow;
}
</style>
</head><body>
<p>Tesla team says:
<q>Using a first-principles approach, we
solve some of the world's biggest problems. If you've done exceptional work, join us in tackling the next generation of engineering, manufacturing and operational challenges.
</q>
</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilização HTML <cite>

O estilo pode ser feito na tag cite usando propriedades CSS em citações HTML . Veja exemplo abaixo

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head><style>
cite{
color: red;
}
</style>
</head><body>
<div>
<p>
<cite>The Avengers
</cite> is directed by Joe Russo, Joss
Whedon, Anthony Russo in 2012.
</p>
<div>
</div></div></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML <bdo> para substituição bidirecional

Substituição bidirecional é o que significa BDO. A tag HTML < bdo > é utilizada para alterar a direção em que o texto está sendo exibido:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<bdo dir="rtl">
In this example, it will appear from right to left
</bdo>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cotação HTML e Elementos de Citação

Tag	Visão geral
<abbr>	Siglas ou abreviaturas definidas.
<endereço>	Identifica o autor/proprietário de um documento e suas informações de contato.
<bdo>	A direção do texto é definida por esta propriedade.
<blockquote>	Uma seção que é citada de outra fonte.
<cite>	Descreve o título de uma obra.
<q>	Descreve uma citação curta em linha.
<definir>	Explique o termo de definição.

Conclusão

Os elementos de citação e citação HTML facilitam a inclusão de citações e referências em seu conteúdo da web. O HTML oferece uma ampla variedade de elementos e atributos que permitem adicionar ênfase, citar, citar ou citar fontes.

A utilização correta desses elementos pode garantir não apenas que o conteúdo da Web seja informativo, envolvente e confiável, mas também preciso e confiável. Para destacar seu conteúdo e deixar uma impressão duradoura em seus leitores, use os elementos e atributos HTML apropriados ao criar conteúdo da Web que contenha citações ou citações.

Para ficar por dentro das últimas notícias técnicas, siga nosso NewsLetter abaixo.

Nós valorizamos o seu feedback.

Citações HTML e Elementos de Citação

O futuro é sustentável

HTML <blockquote> para cotações

Example

Citações HTML <q> para citações curtas

Example

HTML <abbr> para abreviaturas

Example

HTML <endereço> para informações de contato

Example

HTML <cite> para o título do trabalho

Example:

Example:

Estilização HTML <q>

Example:

Estilização HTML <cite>

Example:

HTML <bdo> para substituição bidirecional

Example

Cotação HTML e Elementos de Citação

Conclusão

Sentindo entediado?