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 characters have a special meaning in HTML. For example, a less-than sign (<) can begin a tag. If you write <h1> directly in page text, the browser may treat it as markup rather than display it.

How can special characters, such as the greater-than and less-than signs, appear as ordinary page text? You can write them using HTML character references, also called entities.

Named character references begin with an ampersand (&) and end with a semicolon (;). For example, < (less than) represents the less-than sign, whereas > (greater than) represents the greater-than sign:

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

This code is displayed in the browser as follows:

There are many other named character references, such as ©, «, » and §. You can find the complete list on the linked reference page.

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; }

Goalscompleted

Insert the character reference < before the word cite in the first paragraph, and insert > after the word.
Similarly, enclose the word blockquote in < and >.

HTML entities

Comments

Log in

Sign up

Restore access