Comentários em HTML

Estamos examinando comentários Html com exemplos . Os comentários HTML são úteis para documentar seu código-fonte HTML, mas ficam ocultos no navegador.

Um comentário é uma linha de código que não é lida pelos navegadores da web. Para indicar as seções de um documento, bem como quaisquer outras notas para qualquer pessoa que esteja olhando o código, é útil adicionar comentários ao seu código HTML . Os comentários de código melhoram a legibilidade e ajudam você e outras pessoas a entender seu código.

Tags de comentário HTML

A seguinte sintaxe pode ser usada para adicionar comentários ao seu código-fonte HTML :

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<!-- This is how to insert comment in HTML code -->
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você notará que a tag inicial tem um ponto de exclamação ( ! ), mas a tag final não.

É importante observar que o navegador não exibe comentários, mas pode ajudar a documentar seu código-fonte HTML.

Seu código HTML pode incluir informações e lembretes com comentários quando se trata de comentários HTML :

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment text-->
<p>And this is a paragraph.</p>
<!-- Add more comments here -->
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Comentário Multilinha

Ao usar o código HTML , podemos renderizar comentários em várias linhas ao mesmo tempo. Com esses comentários de várias linhas, é possível fornecer explicações sobre códigos específicos ou códigos de várias linhas que podem ser usados ​​para fins de depuração e assim por diante.

Sintaxe

<!—

Você comentou seu código.

Descreva o código em detalhes.

Não haverá exibição na página da web.

–>

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<h2>Jeff Bezos</h2>
<!-- born January 12, 1964
Children: Preston Bezos
Spouse: MacKenzie Scott (m. 1993--2019) -->
<p>Jeffrey Preston Bezos is an American entrepreneur, media proprietor, investor, and commercial astronaut.
He is the founder, executive chairman, and former president and CEO of Amazon.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Comentar Folhas de Estilo

O uso de folhas de estilo com HTML será abordado em outro tutorial, mas no momento você deve estar ciente de que se estiver usando Cascading Style Sheets ( CSS ) em seu código HTML, você deve colocar o código da folha de estilo dentro dos comentários HTML para que navegadores antigos poderão vê-lo.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Style sheet comment</title>
<style>
<!--
.main {
background-color:#4a7d49;
}
-->
</style>
</head>
<body>
<div class="main">This is a main div</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Por esse motivo, os comentários são extremamente úteis para depurar HTML , pois autorizam você a examinar os bugs comentando separadamente as linhas de código HTML:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<!-- We are not displaying this image at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conclusão

Adicionar comentários HTML a páginas da Web pode ajudar os desenvolvedores da Web a controlar notas, lembretes e outras informações. Os comentários HTML facilitam o rastreamento do seu código, colaboram com outros desenvolvedores e melhoram a qualidade do seu conteúdo da web.

Os comentários HTML também podem ser usados ​​para remover temporariamente o código de sua página da Web sem removê-lo totalmente. Você pode usar isso para solucionar problemas e testar seu conteúdo da web.

Adicionar comentários ao HTML permite que os desenvolvedores da Web criem códigos mais limpos, mais eficientes e melhor organizados.

Certifique-se de usar comentários HTML na próxima vez que criar uma página da Web para aprimorar a qualidade de seu conteúdo e melhorar seu fluxo de trabalho.

Se este artigo de alguma forma atendeu às suas necessidades educacionais, compartilhe-o com seus amigos desenvolvedores usando as plataformas como facebook, twitter e etc abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone