Theory
Theory
Comments

The br tag, which is used to create a line break

The poem in the quote still does not look like a poem, since there are not enough line breaks within the stanza. We already know a lot of tags. Maybe some of them will prove suitable for breaking the text into lines?

The first candidate is the <p> tag. It is ideally suited for calling out stanzas, but we need to add line breaks inside stanzas. Let’s mark up this version. The second candidate is the <pre> tag. It saves all text formatting. It seems to fit, but we only need to save the line breaks. And, despite what some programmers might say, code and poetry are different things. In general, nothing fits.

We need a special tag that just adds a line break inside a paragraph. HTML has designated the single <br> tag (which is short for “break”) to perform this function.

This tag is great if you need to create line breaks within the text to increase its readability, such as, for example, in mailing addresses, poems, song lyrics, and work schedules.

Sometimes this tag is used incorrectly in order to break up text into quasi-paragraphs. Never use the tag to do this. To mark up paragraphs, you need to use the <p> tag.

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>It is still Day Seven. Muffin gave me an assignment</h1> <p>Today Muffin came and gave me a bit of an unusual assignment. A certain female cat has moved in next door, and Muffin does not know how to write songs. Therefore, he asked me to find some sort of great composition that he could perform for her.</p> <p>Like they say, <q>there is no time like the present</q> (<cite>popular wisdom</cite>).</p> <p>I found a lyrical ballad for Muffin:</p> <blockquote> <p> Meow meow meow meahh meow meeeow meow meow meow </p> <cite>from the Collected Works of W. Furspeare.</cite> </blockquote> </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; } blockquote { padding-left: 14px; border-left: 2px solid #6a2cce; color: #6a2cce; } cite { color: #222222; }

Goalscompleted

Add the <br> tag after each line in the poem for Muffin in order to make a quatrain.

The br tag, which is used to create a line break

Comments

Log in

Sign up

Restore access