pre ... ⁄pre, display in browser
Browser display, pre element
- empty pre element (start tag, end tag only): does not display in browser
- its children, phrasing content: the display depends strictly on the nested element
- its content, type text: displays block in browser, in monospace font, with a 1em top⁄bottom margin and maintains the exact same display from the source code (white spaces, line breaks included)
Display type: block
Video demonstration pre element, view in browser
HTML5 pre, browser display, Tutorial
| min | video details |
|---|---|
| 00:04 | video tutorial: testing the browser display of the pre element |
| 00:12 | empty pre element (start tag, end tag, only) does not display in browser |
| 00:17 | the content, type text, of the pre element displays in browser in monospace font with a 1em top⁄bottom margin |
| 00:30 | the content, type text, of the pre element maintains in browser the exact same display⁄ format as in the source code, including the white spaces and the line breaks |
| 00:39 | difference: - 'text' word on the next line inside p element: a different browser display - 'text' word on the next line inside pre element: the same display in browser as in the source code |
| 01:08 | example: fragment of code inside pre element versus fragment of code outside pre element |
| 01:15 | example: 1. fragment of code inside pre element |
| 01:17 | → format maintained in browser |
| 01:29 | example: 2. fragment of code outside pre element |
| 01:33 | → format not maintained in browser: the fragment of code displays on 4 lines in the source cod file and on 1 line in browser's window |