👩‍💻 HTML | Elementos inline que mudam o texto

Atualizado dia 24 de maio de 2018.

Melhore seu blog com simplicidade…

Já escrevi aqui sobre a diferença entre block e inline. Neste post vou dar exemplos com as tags inline, que são muito úteis na edição de qualquer texto HTML, inclusive blogs:

Negrito

Código:

Com a tag b o texto fica <b>negrito</b>.

Ou ainda:

Com a tag strong o texto fica <strong>negrito</strong>.

Resultado:

Com a tag b o texto fica negrito.

Citação*

Código:

Com a tag q o texto fica <q>entre aspas</q>.

Resultado:

Com a tag q o texto fica entre aspas.

Itálico

Código:

Com a tag cite o texto fica <cite>itálico</cite>.

Com a tag em o texto fica <em>itálico</em>.

Com a tag i o texto fica <i>itálico</i>.

Com a tag var o texto fica <var>itálico</var>.

Com a tag dfn* o texto fica <dfn>itálico</dfn>.

Resultado:

Com a tag i o texto fica itálico.

* <dfn> não funciona no Chrome, nem no Safari.

Riscado

Código:

Com a tag del o texto fica <del>riscado</del>.

Com a tag s o texto fica <s>riscado</s>.

Resultado:

Com a tag s o texto fica riscado.

Sublinhado

Códigos:

Com a tag ins o texto fica <ins>sublinhado</ins>.

Com a tag u o texto fica <u>sublinhado</u>.

Resultado:

Com a tag u o texto fica sublinhado.

Monoespaçado

Com a tag code (código) o texto fica <code>monoespaçado</code>.

Com a tag code (código) o texto fica monoespaçado.

Com a tag kbd (keyboard - teclado) o texto fica <kbd>monoespaçado</kbd>.

Com a tag kbd (keyboard - teclado) o texto fica monoespaçado.

Com a tag samp (exemplo) o texto fica <samp>monoespaçado</samp>.

Com a tag samp (exemplo) o texto fica monoespaçado.

Tamanho do texto

Códigos:

Com a tag small o texto fica <small>menor</small> do que estava antes.

Com a tag big o texto fica <big>maior</big> do que estava antes.

Resultado:

Com a tag small o texto fica menor do que estava antes.

Com a tag big o texto fica maior do que estava antes.

Nível do texto

Código:

Com a tag sub o texto fica _{um nível abaixo} do que estava antes.

Com a tag sup o texto fica ^{um nível acima} do que estava antes.

Resultado:

Com a tag sub o texto fica _{um nível abaixo} do que estava antes.

Com a tag sup o texto fica ^{um nível acima} do que estava antes.

Sentido do texto

Código:

Com a tag bdo dir="ltr" o texto fica <bdo dir="ltr">da esquerda para a direita</bdo>.

Com a tag bdo dir="rtl" o texto fica <bdo dir="rtl">da direita para a esquerda</bdo>.

Resultado:

Com bdo dir="ltr" o texto fica da esquerda para a direita.

Com bdo dir="rtl" o texto fica da direita para a esquerda.

<bdo dir="rtl"> inverte o texto para nós, ocidentais, que escrevemos da esquerda para a direita, enquanto <bdo dir="ltr"> serve para inverter textos árabes e hebraicos, por exemplo, que são escritos da direita para a esquerda.

Fonte, cor e tamanho

Código:

A tag font <font color="#ff00ff" size="4" face="comic sans ms">muda cor, tamanho e fonte</font> sem precisar de CSS.

Resultado:

A tag font muda cor, tamanho e fonte sem precisar de CSS.

---

Apesar de modificarem o texto sem precisar de CSS, todas essas tags podem ser personalizadas na folha de estilos de seu blog ou site para que fiquem do seu jeito.