HTML Academy
The pre tag, which is used to designate preformatted text
Text markup8/21
Back to the list of tasks
  • 1. Let’s start the diary
  • 2. The ul tag, which is used to indicate an unordered list
  • 3. The ol tag, which is used to provide an ordered list
  • 4. The start and reversed attributes
  • 5. Nested lists
  • 6. The dl, dt and dd tags as well as description list
  • 7. The pre tag, which is used to designate preformatted text
  • 8. HTML entities
  • 9. The tag code, or code snippet
  • 10. Combining pre and code tags
  • 11. The tag q, which is used to format inline quotes
  • 12. The blockquote tag, which is used for calling out quotes
  • 13. The br tag, which is used to create a line break
  • 14. The sub and sup tags, which are used to indicate subscript and superscript
  • 15. The time tag, which is used to specify the date and time
  • 16. The em and i tags, which are used to attract the user’s attention
  • 17. The strong and b tags, which are used to strengthen or highlight text
  • 18. The del and ins tags, which are used to highlight changes
  • 19. The div and span tags, style containers
  • 20. Summary of “Text markup”
  • 21. Test: Marking up an article
The tag code, or code snippet
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

HTML entities

You wanted to list the tags in the new text. And you also wanted to make sure that they looked the same in the browser as they do in the code. Take <h1> or <p>, for example. This is not an easy task.

Some of the characters in HTML are reserved, meaning that the browser will interpret them as HTML code. For example, any text after the less than sign (<) in the browser will be interpreted as a tag and will not be displayed on the page.

How can special characters (such as, for example, the greater than and less than signs) be used in the page text like normal characters? In order to do this, you should replace them with mnemonic characters.

Mnemonics are special codes that begin with an ampersand (&) and end with a semicolon (;). For example, the less than sign can be inserted into a page using the &lt; (less than) mnemonic name, where as the greater than sign is represented by the &gt; (greater than) mnemonic name:

&lt;ul&gt;
&lt;/ul&gt;

This code is displayed in the browser as follows:

<ul>
</ul>

There are many other mnemonic names for special characters. For example: &copy;, &laquo;, &raquo;, &sect;. The complete list of mnemonic names is presented on a special page.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Return to home </nav> </header> <main> <article> <h1>Day Six. How I failed to understand anything.</h1> <p>Today I visited several websites to see how they are laid out. I saw some quotes and unfamiliar cite and blockquote tags.</p> <p>I didn’t understand how these two tags differ from each other. I closed the browser. I’ll figure it out tomorrow.</p> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Insert the mnemonic character &lt; before the word cite in the first paragraph, and insert &gt; after the word.
    2. Similarly, enclose the word blockquote in &lt; and &gt;.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.