HTML: negrito, itálico e sublinhado


HTML: negrito, itálico e sublinhado

(Elivelto Ebermam)

Existem alguns efeitos podem ser aplicados ao textos como negrito, itálico, sublinhado entre outros.  Na linguagem HTML, para cada um desses efeitos existe uma tag específica. Abaixo são mostrados três textos, cada um com um desses efeitos:

Texto em negrito
Texto em itálico
Texto sublinhado

Tendo em mente o que é cada um desses efeitos significa, vamos aprender a usá-los em HTML.

Efeito Negrito

Para inserir o texto em negrito utilizamos a tag <b>, que vem da palavra inglesa bold. Devemos primeiramente fazer a abertura da tag com <b>, escrever a parte do texto que queremos que fique em negrito e depois realizar o fechamento da tag com </b>. Veja um exemplo:

<b> Texto em negrito </b>

O texto em negrito pode vir no meio da frase também, veja:

Este texto está sem efeito, <b> já este texto está em negrito </b>

Lembrando que, para uma página html, não basta escrever apenas o trecho acima, é necessário escrever toda a estrutura da página. Veja o exemplo abaixo:

<html>
    <head>
        <title> Exemplo </title>
    </head>
    <body>
        Este texto está sem efeito, <b> já este texto está em negrito </b>
    </body>
</html>


Se inserimos esse código no editor online do site W3Schools [1], disponível no link https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default , temos o seguinte resultado:




Efeito itálico

Para textos em itálico, usa-se a tag <i>, que vem da palavra inglesa italic. Deve-se fazer a abertura da tag com <i>, escrever a parte do texto que queremos que fique em itálico e depois realizar o fechamento da tag com </i>. Veja um exemplo:



Efeito sublinhado

Para o efeito sublinhado, usa-se a tag <u>, que vem da palavra inglesa underline. Deve-se fazer a abertura da tag com <u>, escrever a parte do texto que queremos que fique em sublinhado e depois realizar o fechamento da tag com </u>. Veja um exemplo:


Juntando tudo

Podemos usar todos os efeitos numa mesma frase por exemplo, veja:




Referências


[1] HTML Tutorial. W3Schools,  2020. Disponível em <https://www.w3schools.com/html/>. Acesso em: 18 de mai. de 2020.

Comentários

Postagens mais visitadas deste blog

CSS: margin, padding e border

HTML: Formulários - caixas de texto

CSS: Introdução