Tags relacionadas com texto

Este artigo explica sobre tags relacionadas com texto.

A explicação está dividida em tags semânticas e não semânticas.

YouTube Video

Criando CSS para pré-visualização

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Tags básicas relacionadas com texto

Tag <div>

1<div>This is a division of content.</div>

• A tag <div> é um elemento de nível de bloco usado para criar divisões dentro do HTML.

• A tag <div> é uma tag não-semântica.

  Ao focar em HTML semântico, tags significativas (como <section>, <article>) podem ser usadas. Isso ajuda os motores de busca e leitores de tela a entenderem melhor o conteúdo da página.

• Ao combiná-la com CSS e JavaScript, você pode controlar a aparência e o comportamento da página.

  A tag <div> é usada para agrupar conteúdo em uma página como um elemento de nível de bloco. É principalmente usada em combinação com CSS e JavaScript para ajustar o layout da página, estilo, e manipular elementos.

Tag <p>

1<p>This is a paragraph of text.</p>

• A tag <p> é um elemento usado para definir um parágrafo no HTML. A <p> representa um parágrafo e é principalmente usada para agrupar e exibir texto. Ajuda a tornar o conteúdo mais fácil de ler ao separar visualmente seções de texto.
• Você não pode colocar outros elementos de nível de bloco como outra tag <p> ou uma tag <div> dentro de uma tag <p>. Isso é proibido pela especificação HTML. Se você fizer isso, o navegador fechará automaticamente a tag, e ela não será exibida corretamente.

Tag <a>

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• A tag <a> é usada para criar links.

  A tag <a> é usada para criar links para outras páginas, sites externos ou arquivos. O atributo href é usado para especificar o destino do link.

• Pode ser usado para links de texto ou imagem, e usar target="_blank" abrirá o link em uma nova aba.

• O atributo target é usado para especificar como o destino do link será exibido.

  • _self (padrão): Abre o link na janela ou aba atual.
  • _blank: Abre o link em uma nova janela ou aba.
  • _parent: Abre o link no frame pai.
  • _top: Abre o link na janela inteira, ignorando quaisquer frames.

• O atributo title é usado para exibir uma dica de ferramenta em um link. Quando um usuário passa o cursor sobre o link, o título especificado é exibido.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• A tag <a> também é usada para pular para locais específicos dentro da mesma página. Para alcançar isso, você define um atributo id no elemento alvo e usa este id no atributo href do link.

Tag <span>

1Here is some <span style="color: red;">highlighted text

• A tag <span> é um elemento inline.

  A tag <span> é um elemento em linha, portanto não quebra a linha quando usada entre textos, links, imagens ou outros elementos em linha. Ela se ajusta naturalmente ao fluxo da página.

• Você pode aplicar estilos específicos de forma parcial.

  Quando você quer aplicar um estilo a apenas parte do documento, pode usar a tag <span> para atribuir uma classe ou ID CSS e aplicar estilos a um intervalo específico.

• A tag <span> é um elemento não semântico.

  Como a tag <span> não tem significado específico ou papel estrutural, ela é usada puramente para fins de estilo ou script. Quando é necessário dar ênfase semântica, é mais apropriado usar tags semânticas como <strong> ou <em>, que serão introduzidas mais adiante.

Tag <br>

1Here is some text with a <br> line break.

• A tag <br> é um elemento inline.

  Como a tag <br> é um elemento em linha, ela não ocupa o bloco inteiro e cria uma quebra de linha no texto onde é colocada. Enquanto a tag <p> adiciona margem acima e abaixo para separar parágrafos, a tag <br> cria uma quebra de linha sem adicionar qualquer margem.

• É uma tag auto-fechável, portanto uma tag de fechamento (</br>) não é necessária.

• É melhor evitar seu uso excessivo e usar tags <p> ou CSS para quebras de parágrafo ou ajustes de layout.

  Ao organizar texto em parágrafos, é mais apropriado usar a tag <p>. Também é recomendado usar CSS para ajustes de layout. Por exemplo, o uso da propriedade white-space no CSS pode exibir quebras de linha e espaços no texto conforme aparecem.

Tag <hr>

1This is some text.<hr>This is another section of text.

• A tag <hr> é um elemento de nível de bloco.

  A tag <hr> é usada para inserir uma linha horizontal para separar visualmente seções de conteúdo. Ela também pode ser usada para significar uma ruptura temática, dando-lhe significado com base no contexto.

• É uma tag autocontida, portanto uma tag de fechamento (</hr>) não é necessária.

• Você pode personalizar sua cor, comprimento e espessura usando CSS.

Tags relacionadas a texto semântico

Da tag <h1> até a <h6>

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• As tags <h1> a <h6> são tags de cabeçalho usadas no HTML.

  A tag <h1> representa o título mais importante e é normalmente usada como o título principal de toda a página. É comum usar apenas uma tag <h1> por documento HTML.

  A tag <h2> é a próxima na ordem de importância após <h1> e é usada para títulos de seções ou capítulos dentro da página.

  A tag <h3> representa subtítulos ou seções menores sob <h2>.

  As tags <h4>, <h5>, e <h6> representam títulos de nível inferior, usadas para itens mais detalhados ou títulos de seções.

• As tags de título indicam a importância do texto e ajudam a criar a estrutura lógica de uma página. Os mecanismos de busca também usam tags de título para entender o conteúdo da página.

Tag <strong>

1<strong>Important text</strong> to emphasize significance.

• A tag <strong> é uma tag HTML usada para indicar a importância ou ênfase do texto e geralmente é exibida em negrito.

• A tag <strong> é uma tag semântica, e seu principal propósito é adicionar significado.

  Pode indicar que o texto é contextualmente importante. Por exemplo, pode mostrar a importância do texto para mecanismos de busca, tornando-o útil para SEO. Também transmite a importância do texto para usuários com leitores de tela. Por outro lado, a tag <b>, que será apresentada mais adiante, é simplesmente uma tag para tornar o texto em negrito e não fornece ênfase semântica.

Tag <em>

1<em>Emphasized text</em> for italics and emphasis.

• A tag <em> é uma tag HTML usada para indicar importância ou ênfase no texto e geralmente é exibida em itálico.

• A tag <em> é uma tag semântica, e seu propósito principal é fornecer significado.

  Como a tag <strong>, pode indicar que o texto é contextualmente importante. A tag <strong> geralmente é exibida em negrito, enquanto a tag <em> costuma ser exibida em itálico. Ambas são reconhecidas por leitores de tela e mecanismos de busca para ênfase semântica, mas <strong> indica uma importância mais forte, enquanto <em> transmite uma ênfase emocional. Além disso, a tag <i>, que será apresentada mais tarde, simplesmente deixa o texto em itálico e não fornece ênfase semântica.

Tag <mark>

1<mark>Highlighted text</mark> for attention.

• A tag <mark> é usada para indicar que um texto específico é contextualmente importante. É útil para destacar resultados de pesquisa ou pontos chave.
• Por padrão, o texto contido na tag <mark> é exibido com um fundo amarelo, enfatizando visualmente sua importância.

Tag <del>

1<del>Deleted text</del> shows removed content.

• A tag <del> é usada para indicar que um texto foi excluído ou modificado. Esta tag é útil para mostrar o histórico de alterações ou revisões de texto.

• O texto contido na tag <del> geralmente é exibido com um traço. Isso indica visualmente o conteúdo excluído.

  O texto contido na tag <del> também é reconhecido como excluído por leitores de tela. Isso permite que o conteúdo que não é visualmente aparente ainda seja compreendido.

Tag <ins>

1<ins>Inserted text</ins> shows added content.

• A tag <ins> é usada para indicar texto recém-adicionado ou modificado em um documento. Esta tag é útil para mostrar o histórico de adições ou revisões de texto.

• Nos navegadores, o texto contido na tag <ins> normalmente é exibido com sublinhado. Isso indica visualmente o conteúdo adicionado.

  O texto contido na tag <ins> também é reconhecido como recém-adicionado por leitores de tela. Isso permite que o conteúdo que não é visualmente aparente ainda seja compreendido.

Tag <abbr>

1<abbr title="World Health Organization">WHO</abbr>

• A tag <abbr> é um elemento em linha usado para indicar abreviações ou acrônimos. Usar esta tag fornece o significado completo das abreviações e contribui para melhorar o SEO e a acessibilidade. Isso especialmente ajuda os leitores que não estão familiarizados com a abreviação e os usuários de leitores de tela a entenderem melhor seu conteúdo.

Tags relacionadas à decoração de texto

Tag <b>

1<b>Bold text</b> without semantic emphasis.

• A tag <b> é um elemento em linha usado para deixar o texto em negrito. Como as outras tags que introduziremos, é usada para ênfase visual, mas não para ênfase semântica.

Tag <i>

1<i>Italic text</i> for style.

• A tag <i> é um elemento em linha usado para deixar o texto em itálico.

Tag <u>

1<u>Underlined text</u> for decoration.

• A tag <u> é um elemento em linha usado para sublinhar o texto.

Tag <small>

1<small>This is small text.</small>

• A tag <small> é um elemento em linha usado para exibir texto em tamanho menor. É comumente usado para representar informações suplementares ou anotações que são secundárias ao conteúdo principal.

Tag <s>

1<s>Strikethrough text</s>

• A tag <s> é um elemento inline usado para desenhar uma linha de riscado no texto.

Tag <sub>

1H<sub>2</sub>O

• A tag <sub> é um elemento em linha usado para exibir texto em subscript.

Tag <sup>

1E = mc<sup>2</sup>

• A tag <sup> é um elemento em linha usado para exibir texto em superscript.

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