Articles
Introdução ao HTML
Tags relacionadas à exibição de código, citações e listas

Tags relacionadas à exibição de código, citações e listas

Este artigo explica as tags relacionadas à exibição de código, citações e listas.

Este texto explica como escrever código-fonte, citações, anotações e listas em HTML.

YouTube Video

Tags relacionadas à exibição de código

Tag <code>

Inline code example: let x = 10; 
1Inline code example: <code>let x = 10;</code>
  • A tag <code> é um elemento em linha usado para indicar trechos de código ou programas dentro de um documento HTML.
  • Por padrão, é exibido em uma fonte monoespaçada, melhorando a legibilidade do código.

Tag <pre> 

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>
  • A tag <pre> é usada para exibir texto em seu formato original dentro de um documento HTML. Usar essa tag preserva os espaços em branco e quebras de linha no texto, mantendo seu formato original. É principalmente usado para exibir conteúdo que precisa manter a formatação, como código de programa, poesia ou arte de texto.
    function hello() {
        console.log("Hello, world!");
    }
    
1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>
  • Na tag <pre>, os espaços são preservados, então se houver um espaço antes da tag de fechamento, uma linha em branco aparecerá no final como neste exemplo.

Tag <samp>

Sample system output: Error: Invalid input. 
1Sample system output: <samp>Error: Invalid input.</samp>
  • A tag <samp> é uma tag HTML usada para representar a saída de um programa de computador. É usada para indicar a saída ou mensagens de um programa ou sistema.

Tag <kbd>

Keyboard input example: Ctrl + C 
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>
  • A tag <kbd> é uma tag HTML usada para representar a entrada do usuário. É usada para indicar a entrada de teclado ou entrada de comandos, como atalhos.

Tag <var>

Variable example: x = 5; 
1Variable example: <var>x</var> = 5;
  • A tag <var> é usada para representar variáveis em um programa ou equação. É usada para enfatizar nomes de variáveis ou variáveis em fórmulas matemáticas.

Tags usadas para citações, etc.

Tag <blockquote>

This is a blockquote for longer quotations. 
1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>
  • A tag <blockquote> é usada para representar citações longas ou textos de outras fontes e é tipicamente exibida em nível de bloco.

Tag <q>

This is a short quote: Short quote example. 
1This is a short quote: <q>Short quote example.</q>
  • A tag <q> é um elemento em linha usado para representar citações curtas. Essa tag pode ser usada para marcar uma parte do texto ou uma frase como uma citação. O texto dentro de uma tag <q> é tipicamente exibido com aspas. A tag <q> também pode ser aninhada. Neste caso, diferentes tipos de aspas são geralmente usados para a citação interna.

Tag <cite>

Reference to a book: The Great Gatsby 
1Reference to a book: <cite>The Great Gatsby</cite>
  • A tag <cite> é um elemento em linha usado para indicar a fonte de uma citação ou referência. É principalmente usada para indicar a fonte de um trabalho, como títulos de obras, artigos, trabalhos, páginas da web ou livros.

Tag <address>

123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>
  • A tag <address> é usada para representar informações de contato relacionadas ao autor ou proprietário de um documento ou seção. Esta tag geralmente contém endereços de e-mail, números de telefone, endereços físicos e informações similares.

A tag <time> 

1<time datetime="2024-12-04">December 4, 2024</time>
  • A tag <time> é usada para representar um ponto específico no tempo, uma duração ou um tempo recorrente. Essa tag pode incluir datas e horários para fornecer um significado semântico ao documento.

A tag <data>

Current Year 
1<data value="2024">Current Year</data>
  • A tag <data> é usada para associar conteúdo legível por humanos com valores interpretáveis por máquinas. Essa tag é útil para marcar dados de uma forma que possam ser facilmente processados por programas.

Tags <details> e <summary>

More information

Here is some additional content.

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>
  • A tag <details> cria um widget recolhível e expandível. Ao usá-la com a tag <summary>, você pode configurar uma seção clicável para revelar mais detalhes, frequentemente utilizada para exibições interativas como 'Leia mais'.

Tags usadas para exibição de listas

Tag <ul>

  • Item 1
  • Item 2
  • Item 3
1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>
  • Esta é uma tag usada para criar listas não ordenadas. Cada item na lista é definido com a tag <li>. Por padrão, um ponto preto é exibido na frente de cada item da lista.

Tag <ol>

  1. Step 1
  2. Step 2
  3. Step 3
1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>
  • Esta tag é usada para criar uma lista ordenada. Cada item na lista é definido com a tag <li>. Por padrão, os números são exibidos para indicar a ordem dos itens.

Tag <dl>

Term 1
Definition of Term 1
Term 2
Definition of Term 2
1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>
  • Esta tag é usada para criar uma lista de pares consistindo em termos e definições, ou nomes e detalhes. Os itens da lista são definidos com as tags <dt> e <dd>. O termo ou nome é escrito na tag <dt>, e a definição ou explicação é escrita na tag <dd>.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Tags relacionadas com textoTags relacionadas à Tabela