Як відобразити теги на веб-сторінці?

9 червня 2022 р.149

Будь-які теги (на кшталт <p>) не відображаються в браузері, оскільки сприймаються браузером як команди для вставляння елементів та зміни їх властивостей. Але іноді потрібно на веб-сторінці вивести теги, наприклад, для демонстрації HTML-коду. У такому разі використовуйте спецсимволи < та > для заміни кутових дужок < та >. При цьому <p> буде виглядати як <p> (Приклад 1).

Приклад 1. Теги на веб-сторінці

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Виведення тегів</title> <style> pre { background: #f0f0f0; padding: 7px; margin: 0 0 1em; }
</style>
</head>
<body> <p><strong>Приклад сторінки</strong></p> <pre>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Формула етанолу&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Формула етанолу С&lt;sub&gt;2&lt;/sub&gt;Н&lt;sub&gt;5&lt;/sub&gt;ВІН&lt;/p& ;gt; &lt;/body&gt; &lt;/html&gt;</pre>
</body>
</html>

У цьому прикладі виводиться код веб-сторінки, а щоб браузер не сприймав теги безпосередньо, дужки < та > замінені спеціальними символами < та >. Результат прикладу показаний на мал. 1.

Рис. 1. Теги в документі