Como exibir código HTML em uma página web?

Publicado em 14/04/2020

Neste artigo veremos como exibir código HTML em uma página web, ou seja, o cliente que entra em seu site poder ver tags HTML, de uma maneira muito simples e fácil.

como exibir codigo html na pagina web capa

Fala programador(a), beleza? Bora aprender coisa nova!

Você já deve ter tentado imprimir tags no HTML, para fazer uma exibição de como funciona alguma coisa, por exemplo

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

120 aulas
4 projetos
9h 45min

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

E se deparou com o interpretado transformando tudo em tag, fazendo com que você não conseguisse exibir as tags puras, sem que virassem elementos

Então a partir de agora, seus problemas acabam 😀

Para exibir as tags HTML em vez do elemento, você deve trocar a abertura de tag o ‘<‘ por um código que é o <

E o símbolo de fechamento, o ‘>’, por o código >

Esses códigos são bem comuns no HTML para tomarem forma de algum símbolo, vamos ver um exemplo na prática:

<!DOCTYPE html>
<html>
<head>
    <title>Como exibir código HTML</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Eu quero exibir a tag &lt ;h1&gt ; aqui!</p>
</body>
</html>

Obs: separei o ponto e vírgula do restante do código para poder exibir corretamente no exemplo, se você fizer deste jeito não irá funcionar, você deve juntar todo o código do símbolo

Veja como isso é representado no navegador:

Vejam que a tag <h1> foi exibida corretamente, sem ter transformado o resto do texto em um elemento de h1

E então atingimos nosso objetivo de exibir código HTML em um uma página web

Porém como eu disse antes, temos um catálogo enorme de símbolos em HTML, como é o caso do copyright, que pode ser feito pelo código: ©

Para um maior conhecimento dos símbolos visite este site, que contém um grande catálogo dos mesmos

Conclusão

Neste artigo vimos como como exibir código HTML, ou seja, exibir as tags nas páginas HTML

Para isso utilizamos dois símbolos, um de abertura de tag e outro de fechamento

Que são: < e >

O que o HTML faz é transformar esses códigos em símbolos de < e >

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn