Pre tag in html

Правильная разметка в исходном коде

Элемент <pre> должен использоваться для текста, который имеет типографское форматирование. Поскольку это влияет на значение содержимого, например в стихах, транскрипциях и, конечно же, в программном коде.

Если вы хотите отобразить блок исходного кода HTML документа, то используйте элемент <code>, вложенный в элемент <pre>. Это позволит поисковым ботам, социальных приложениям, RSS ридерам сразу же понять, что перед ними программный код.

Пример отображения JavaScript кода:

<pre><code>// Logs "Hello World!"
// in the browser's developer console
console.log(Hello World!);</code></pre>

HTML tags and the tag?

You can use HTML tags within the <pre> tag. The <pre> tag does not escape or ignore HTML tags within its content. Any HTML tags included within the <pre> element will be treated as regular HTML markup and rendered accordingly.

When using HTML tags within the <pre> tag, it’s important to note that the preserved spacing and line breaks of the <pre> element apply to the entire content, including the HTML tags. This means that any indentation or line breaks within the HTML tags themselves will also be preserved.

Following is an example of using HTML tags within the <pre> tag:

<pre>
<strong>Hello</strong>, <em>world</em>!
<p>This is a paragraph within the preformatted text.</p>
</pre>

Browser View

    Hello, world!

This is a paragraph within the preformatted text.

In this example, the <strong>,<em> and <p> tags are used within the <pre> tag. The text «Hello» is rendered in bold, «world» is rendered in italics, and the <p> tag creates a paragraph within the preformatted text.

However, it’s worth mentioning that using block-level elements like <p> within the <pre> tag may not be semantically correct. The <pre> tag is typically intended for displaying inline preformatted text, such as code snippets, and not for containing entire blocks of HTML markup. It’s advisable to use appropriate HTML tags according to the content and its intended structure.

Including Code Snippets Without the HTML Pre Tag

Displaying code snippets on your web page may have various purposes and this is exactly why you should know how to include one without the use of the HTML pre tag. Including a code snippet in such a way helps users communicate with the web page, and easily reuse the included syntax. Again, you are supposed to include both HTML and CSS properties. Please observe the following HTML syntax.

<div><h3> Using Code Snippets </h3><p>Using a code snippet in your web page without using the HTML pre tagby removing default padding and margin browsers.</p><code> * { padding: 1; margin: 1; box-sizing: border-box; } </code></div>

From this point on, it is time to add the CSS syntax and visually change the output of your web page. Even though you can add more CSS properties, we are going to keep our example fairly simple. Please observe the following CSS syntax.

body {display: flex;align-items: center;justify-content: center;height: 120vh;}

The browser is going to take notice of the CSS syntax and, accordingly alter the visual output of your HTML text. As you can see, not always a person needs to use the HTML pre tag to style and change the look of your content.

Template

Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

For more information on attributes for this tag, see HTML5 Tag and HTML4 Tag.

<pre

accesskey=»»
class=»»
contenteditable=»»
contextmenu=»»
dir=»»
draggable=»»
dropzone=»»
hidden=»»
id=»»
itemid=»»
itemprop=»»
itemref=»»
itemscope=»»
itemtype=»»
lang=»»
spellcheck=»»
style=»»
tabindex=»»
title=»»
translate=»»

onabort=»»
onautocomplete=»»
onautocompleteerror=»»
onblur=»»
oncancel=»»
oncanplay=»»
oncanplaythrough=»»
onchange=»»
onclick=»»
onclose=»»
oncontextmenu=»»
oncuechange=»»
ondblclick=»»
ondrag=»»
ondragend=»»
ondragenter=»»
ondragexit=»»
ondragleave=»»
ondragover=»»
ondragstart=»»
ondrop=»»
ondurationchange=»»
onemptied=»»
onended=»»
onerror=»»
onfocus=»»
oninput=»»
oninvalid=»»
onkeydown=»»
onkeypress=»»
onkeyup=»»
onload=»»
onloadeddata=»»
onloadedmetadata=»»
onloadstart=»»
onmousedown=»»
onmouseenter=»»
onmouseleave=»»
onmousemove=»»
onmouseout=»»
onmouseover=»»
onmouseup=»»
onmousewheel=»»
onpause=»»
onplay=»»
onplaying=»»
onprogress=»»
onratechange=»»
onreset=»»
onresize=»»
onscroll=»»
onseeked=»»
onseeking=»»
onselect=»»
onshow=»»
onsort=»»
onstalled=»»
onsubmit=»»
onsuspend=»»
ontimeupdate=»»
ontoggle=»»
onvolumechange=»»
onwaiting=»»
>
</pre>

Проблемы

Теперь, когда мы обсудили, как работает элемент <pre>, давайте рассмотрим несколько потенциальных проблем, которые могут возникнуть при его использовании.

Выход за пределы элемента

По умолчанию, текст внутри элемента <pre> отображается как в источнике, так что, слишком широкие строчки могут выйти за границы родительского контейнера.

Ниже приведён пример макета страницы с выходящим за границы содержанием.

Давайте рассмотрим несколько вариантов решения данной проблемы.

Решение №1: Вывод полосы прокрутки

Одним из способов избежать описанной выше проблемы является отображение полосы прокрутки. Это действенно когда содержание элемента <pre> слишком широкое. Можем воспользоваться CSS:

pre {
    overflow: auto;
}

В этом случае пользователю нужно будет прокрутить страницу по горизонтали, чтобы увидеть все содержимое элемента <pre>. Однако горизонтальная прокрутка не является идеальным вариантом. К тому же полоса прокрутки не слишком эстетична.

Решение №2: Перенос текста на новую строку

В данном случае, тоже можем воспользоваться CSS, а именно свойство :

pre {
    white-space: pre-wrap;
}

Отображение HTML

Существует определённый тип исходного кода, с которым немного сложнее работать внутри элемента <pre>, я говорю о HTML. Ранее я уже упоминал о том, что вы можете вложить HTML элементы внутрь элемента <pre>. Но что, если мы захотим показать эти теги так, чтобы читатель смог их увидеть в отображаемом коде?

Для отображения HTML тегов в браузере вы, как правило, должны заменить HTML скобки. Допустим, мы захотели показать следующую разметку внутри тегов <pre>:

Заменяем символы <, >, и «:

<pre><code>&lt;nav class=&quot;main-navigation&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</code></pre>

К счастью, существует множество инструментов, которые помогут вам сделать это. К примеру, Free Online HTML Escape Tool.

Случайные пробелы

Ещё один нюанс, который нужно учесть, это появление нежелательных пробелов, отступов и переносов строк.

Многие из нас используют отступ в HTML для иллюстрации иерархии элементов. Это может вызвать проблемы. Позвольте мне показать, что я имею в виду.

Если мой HTML документ имеет следующую структурную (отступы для иллюстрации вложенных элементов), то отображение будет следующим:

<html>
    <head>
        <title>My tutorial</title>
    </head>
    <body>
        <section>
            <article class="main-content">
                <h1>My Tutorial's Title</h1>
                <p>Here's some example JavaScript:</p>
                <!-- My pre element -->
                <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    console.log('Hello there');
    &lt;/script&gt;</code></pre>
            </article>
        </section>
    </body>
</html>

Проблема в том, что элемент pre, по праву, рассматривает мои отступы как часть своего содержания. Таким образом, содержание отображается с нежелательными отступами:

<script type="text/javascript">
                        console.log('Hello there');
                    </script>

Чтобы точно отобразить содержание мне придётся написать его так, чтобы в содержании не было отступов вообще:

<html>
    <head>
        <title>My tutorial</title>
    </head>
    <body>
        <section>
            <article class="main-content">
                <h1>My Tutorial's Title</h1>
                <p>Here's some example JavaScript:</p>
                <!-- My pre element -->
                <pre><code></code></pre>
            </article>
        </section>
    </body>
</html>

Теперь содержание будет отображаться вот так:

<script type="text/javascript">
    console.log('Hello there');
</script>

Handlingndle special characters and HTML entities

The <pre> tag handles special characters and HTML entities in a straightforward manner. It treats special characters and HTML entities as literal text, displaying them exactly as they appear in the HTML source code without any interpretation or rendering.

This behavior is beneficial when displaying content that includes special characters or HTML entities that would normally be interpreted or rendered by the browser when using regular text formatting. Inside the <pre> tag, special characters and HTML entities are not converted into their corresponding symbols or elements but are instead displayed as plain text.

For example, if you have the following HTML code within a <pre> tag:

<pre>
This is an example <div> element.
</pre>

Browser View

    This is an example <div> element.

The text «This is an example <div> element.» will be displayed exactly as it is, without the browser interpreting the HTML entities. The less-than symbol <, greater-than symbol > , and ampersand & will be shown as literal characters.

Similarly, any other special characters, such as quotation marks, apostrophes, or other symbols, will be treated as plain text within the <pre> tag and rendered accordingly without any modification.

Browser compatibility

Desktop	Mobile
Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
No	No	1-29	No	No	No	No	No	4-29	No	No	No
Yes Указание атрибута не влияет на макет.	12 Указание атрибута не влияет на макет.	1 Начиная с Firefox 29, указание атрибута не влияет на макет.	Yes Указание атрибута не влияет на макет.	Yes Указание атрибута не влияет на макет.	Yes Указание атрибута не влияет на макет.	Yes Указание атрибута не влияет на макет.	Yes Указание атрибута не влияет на макет.	4 Начиная с Firefox 29, указание атрибута не влияет на макет.	Yes Указание атрибута не влияет на макет.	Yes Указание атрибута не влияет на макет.	Yes Указание атрибута не влияет на макет.
No	No	1	No	No	No	No	No	4	No	No	No

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The element accepts the following attributes.

This table shows the attributes that are specific to the tag/element.

Attribute	Description
None

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
inert
itemid
itemprop
itemref
itemscope
itemtype
lang
spellcheck
style
tabindex
title
translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

onabort
oncancel
onblur
oncanplay
oncanplaythrough
onchange
onclick
oncontextmenu
ondblclick
ondrag
ondragend
ondragenter
ondragexit
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
onformchange
onforminput
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onratechange
onreadystatechange
onscroll
onseeked
onseeking
onselect
onshow
onstalled
onsubmit
onsuspend
ontimeupdate
onvolumechange
onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Common use cases for the tag

The <pre> tag is commonly used in HTML for various purposes where preformatted text needs to be displayed. Some of the common use cases for the <pre> tag include:

Code Snippets

The <pre> tag is frequently used to display code snippets in a web page or documentation. It allows developers to present code examples with preserved indentation, spacing, and line breaks, making it easier to read and understand.

ASCII Art

ASCII art, which is created using characters and symbols to form images or graphical designs, often requires precise spacing and alignment. The <pre> tag is ideal for displaying ASCII art accurately, as it maintains the exact spacing and arrangement of characters.

Text Formatting Showcase

The <pre> tag can be used to showcase text formatting examples, such as demonstrating the usage of various font styles, indentation, or tabular data.

Debugging and Error Messages

When displaying debugging information or error messages, using the <pre> tag ensures that the text is presented in a readable format with preserved line breaks and whitespace, aiding in troubleshooting and analysis.

Displaying Log Files or Configuration Files

Log files or configuration files often contain structured text that requires precise formatting and spacing. The <pre> tag can be used to display such files, maintaining the original structure and line breaks.

Displaying Poetry or Verse

Poetry or verse often relies on specific line breaks and indentation for its artistic presentation. The <pre> tag can be used to preserve the formatting and alignment of poetry or verse, ensuring that it is displayed as intended.

Handling whitespace and line breaks

The <pre> tag handles whitespace and line breaks in a specific way. Here’s how the <pre> tag behaves with regard to whitespace and line breaks:

Preserved Whitespace

The <pre> tag preserves all whitespace characters, including spaces, tabs, and line breaks, exactly as they appear in the HTML source code. This means that multiple consecutive spaces and tabs are rendered as they are, without collapsing into a single space. This behavior is particularly useful when displaying code or text that relies on specific spacing and indentation.

Line Breaks

The <pre> tag renders line breaks exactly as they are in the HTML source code. Each line break within the <pre> element corresponds to a line break in the rendered output. This ensures that text within the <pre> tag maintains its original line-by-line formatting and structure.

Leading and Trailing Whitespace

The <pre> tag also preserves leading and trailing whitespace characters. If there are spaces or tabs at the beginning or end of the content within the <pre> element, they will be displayed as part of the rendered output.

It’s important to note that the <pre> tag does not alter or interpret whitespace characters or line breaks. It simply preserves them and renders them exactly as they appear in the HTML source code. This behavior is especially useful when displaying preformatted text, such as code snippets or ASCII art, where precise spacing and line breaks are crucial.

Following is an example to illustrate how the <pre> tag handles whitespace and line breaks:

<pre>
This is
some text
with
preserved spacing.
</pre>

Browser View

    This is
    some    text
        with
    preserved      spacing.

In this example, the multiple spaces and tabs within the content are preserved, and each line break corresponds to a new line in the rendered output, resulting in the text being displayed with the same spacing and structure as in the HTML source code.

Preserve leading spaces and indentation

The <pre> tag preserves leading spaces and indentation. When text is enclosed within the <pre> tags, any leading spaces or tabs at the beginning of each line are preserved and displayed exactly as they appear in the HTML source code.

This behavior is particularly useful when displaying content that relies on precise indentation, such as code snippets or formatted text. The <pre> tag ensures that the leading spaces or tabs are rendered as part of the output, maintaining the intended alignment and structure of the text.

Following is an example to illustrate how the <pre> tag preserves leading spaces and indentation:

<pre>
function greet(name) {
console.log(‘Hello, ‘ + name + ‘!’);
}
greet(‘Chris’);
</pre>

Browser View

function greet(name) {
  console.log('Hello, ' + name + '!');
}
greet('Chris');

In this example, the leading spaces before each line within the <pre> element are preserved. The code snippet is displayed with the same indentation as in the HTML source code, making it easier to read and understand the code structure.

It’s important to note that the <pre> tag only preserves leading spaces and indentation at the beginning of each line within its content. Spaces or tabs within the middle of a line are treated as regular whitespace and rendered accordingly, without preserving the exact spacing.

By leveraging the <pre> tag’s ability to preserve leading spaces and indentation, you can ensure that text with specific formatting requirements, such as code or structured content, is displayed as intended, maintaining the original alignment and readability.

Attributes

Этот элемент включает только глобальные атрибуты .

Non-standard Deprecated: Содержит предпочтительное количество символов, которое должна иметь строка. Это был нестандартный синоним . Чтобы добиться такого эффекта, используйте вместо этого CSS .
Deprecated Non-standard: Содержит предпочтительное количество символов, которое должна иметь строка. Хотя технически все еще реализовано, этот атрибут не имеет визуального эффекта; для достижения такого эффекта используйте вместо этого CSS .
Non-standard Deprecated: Есть намек , указывающий , как переполнение должно произойти. В современном браузере эта подсказка игнорируется, и визуальный эффект в ней отсутствует; чтобы добиться такого эффекта, используйте вместо него пустое CSS .

Accessibility concerns

Важно предоставить альтернативное описание для любых изображений или диаграмм,созданных с использованием предварительно отформатированного текста.Альтернативное описание должно четко и лаконично описывать содержание изображения или диаграммы. Люди с плохим зрением и просмотром с помощью вспомогательных технологий,таких как скринридер,могут не понимать,что представляют собой предварительно отформатированные символы текста,когда они считываются последовательно

Люди с плохим зрением и просмотром с помощью вспомогательных технологий,таких как скринридер,могут не понимать,что представляют собой предварительно отформатированные символы текста,когда они считываются последовательно.

Комбинация элементов и , дополненная ARIA и атрибутами , позволяет объявить предварительно отформатированное изображение ASCII как изображение с альтернативным текстом, а служит заголовком изображения. .

Example

<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
  </figcaption>
</figure>

H86:Предоставление альтернативных текстов для ASCII-арта,смайликов и leetspeak | W3C Методы для WCAG 2.0.

5 последних уроков рубрики «HTML и DHTML»

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
Парочка бесплатных шаблонов панелей администрирования.
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

Including Spaces and Line Breaks Without the HTML Pre Tag

Styling the HTML elements is a process that requires the addition of specific CSS properties in order to achieve what you are trying to do. In this section of the article, we are going to show you can include spaces and line breaks without the HTML pre tag. We are going to show you a simple HTML syntax, and then show you the CSS properties you need to style the text.

Please observe the following example containing the HTML code only.

<div><p> In this example, there are several white spaces and line breaks included. However, they are ignored by the browser.</p></div>

Even though this example looks messy and all over the place, the browser is going to fix everything and display the text without spaces and line breaks. There is a very simple CSS code you can write and visually alter the appearance of the <p> element.

The following example is going to show you how it is done.

body {display: flex;align-items: center;justify-content: center;height: 120vh;}p, pre {font-size: 1.5rem;}

As you can see, there are several CSS properties you are supposed to use, and they are divided into two styling blocks. Once you combine the HTML and CSS syntaxes, you are going to achieve the same visual output as with the <pre> element.

Alternative approaches for displaying preformatted text

Besides the <pre> tag, there are alternative tags and approaches available for displaying preformatted text in HTML. These alternatives offer different levels of control and flexibility depending on your specific requirements. Here are some options:

<code> Tag

The <code> tag is used to represent a piece of computer code within a document. It is typically used inline within a paragraph or sentence to indicate code snippets. Unlike the <pre> tag, the does not preserve spacing or line breaks. It is commonly styled with a monospaced font to distinguish it from regular text.

<xmp> Tag (deprecated)

The <xmp> tag was historically used for displaying preformatted text in HTML. It preserves spacing, line breaks, and HTML markup. However, it is now deprecated and no longer recommended for use as it has been removed from the HTML specification.

CSS Styling

You can apply CSS styles to format and display preformatted text. By targeting appropriate HTML elements or classes with CSS, you can achieve similar effects to the <pre> tag. For example, you can use a monospaced font, set white space to pre, and control line heights and indentation through CSS rules.

Code Highlighting Libraries

If you want to display code snippets with syntax highlighting, you can utilize code highlighting libraries like Prism.js, Highlight.js, or other similar tools. These libraries provide more advanced features for syntax highlighting and formatting code in various programming languages.

Difference of tag and regular text formatting in HTML

The <pre> tag in HTML provides a specific way to display preformatted text, distinguishing it from regular text formatting in HTML. Here are some key differences between the <pre> tag and regular text formatting:

Preserved Whitespace: The <pre> tag preserves all whitespace characters, including spaces, line breaks, and tabs. Regular text formatting in HTML collapses consecutive whitespace characters into a single space. This makes the <pre> tag suitable for displaying content that requires exact spacing and indentation, such as code snippets.
Fixed-width Font: The text within the <pre> tag is typically rendered using a fixed-width font, such as Courier, instead of the default variable-width font used for regular text. This maintains the alignment of characters and ensures consistent spacing between characters, which is crucial for displaying code or ASCII art accurately.
Line Breaks: Text within the <pre> tag is displayed with line breaks exactly as they appear in the HTML source code. Regular text formatting in HTML wraps text based on the available width of the container or the browser window. The <pre> tag allows you to control the line breaks explicitly, which is useful for displaying content with specific line-by-line formatting.
Interpretation of Special Characters: Regular text formatting in HTML interprets special characters and HTML entities (e.g., <, >, &) as markup or entities, affecting their display. Within the <pre> tag, special characters are treated as literal text and displayed exactly as they are, without any interpretation or rendering.

Conclusion and Further Notes

The HTML pre tag is an element you can use to style and display the content in a specific way. It allows you to preformat the text and display it in the exact way which was written but it is also important to know that:

The HTML <pre> element has many practical uses
Writing poems, including code snippets, and syntaxes can be easily done by the HTML pre tag
This element has an opening and a closing tag
You can include CSS properties to style this element
Though similar, the <p> element and <pre> have different functions
You can use styling properties to add spaces and line breaks in other elements

This article has managed to show you the different functions and uses of the HTML pre tag, and what is the best way to include it in your HTML document. After carefully reading this guide you are ready to start exploring the world of preformatted text and write them in your next HTML project.

Правильная разметка в исходном коде

HTML tags and the tag?

Including Code Snippets Without the HTML Pre Tag

Template

Проблемы

Выход за пределы элемента

Решение №1: Вывод полосы прокрутки

Решение №2: Перенос текста на новую строку

Отображение HTML

Случайные пробелы

Handlingndle special characters and HTML entities

Browser compatibility

Attributes

Global Attributes

Event Handler Content Attributes

Common use cases for the tag

Code Snippets

ASCII Art

Text Formatting Showcase

Debugging and Error Messages

Displaying Log Files or Configuration Files

Displaying Poetry or Verse

Handling whitespace and line breaks

Preserved Whitespace

Line Breaks

Leading and Trailing Whitespace

Preserve leading spaces and indentation

Attributes

Accessibility concerns

Example

5 последних уроков рубрики «HTML и DHTML»

Including Spaces and Line Breaks Without the HTML Pre Tag

Alternative approaches for displaying preformatted text

<code> Tag

<xmp> Tag (deprecated)

CSS Styling

Code Highlighting Libraries

Difference of tag and regular text formatting in HTML

Conclusion and Further Notes

Похожие записи:

Похожие записи: