The Secret Symbols
Unobtrusive but powerful — and sometimes just plain confusing.
Not all HTML elements push themselves into the spotlight. Some are present but invisible, others appear only when they choose to, and some have very specific tasks.
The horizontal rule creates order, the line break element takes a well-deserved break, and the non-breaking space separates words — but only if it feels like it. The <BDO> element flips text direction, the <pre> element treasures spaces like gold, and span gives words a special look.
The progress bar shows that something is happening, while hidden makes things disappear — at least for the uninitiated. The translate attribute decides whether a text remains understandable or becomes a mystery.
Use them wisely — or just play around. Great developers do exactly that.
Text Breaks and Separation
Clear Lines Amidst Chaos — for Structure, Pauses, and Proper Spacing.
Lines and Breaks
The Harmony of Paragraphs
<br>, <wbr>, and <hr> – the unsung rhythm section of your text and sections. The <br> element is like a brief pause in an epic ballad, forcing the words to catch their breath at just the right moment before continuing on the next line. The <wbr> element, a cautious line-break assistant, steps in only when space is genuinely running out, as if it were holding a tiny “Break here if necessary” sign. And then there’s <hr> – the bold stroke that cleaves sections apart, as if someone had taken a sword to the room and declared, “This is where it ends.”
<hr><br><wbr>Structuring and Formatting Text
Text with Style — Order, Format, and a Touch of Magic.
The code-Element
The Whispering Language of Machines
The <code> element is like an ancient scroll, etched with arcane commands and spells, meant only for those initiated into its mysteries. It highlights source code and cryptic strings as though they were the keys to hidden realms. Displayed in a dignified monospace font, it grants your code the reverence it rightly deserves.
<code><p>Hello World!</p></code>
The Mystical BDO-Element
The Guardian of Text Alignment
Hidden deep within the HTML arsenal lies the powerful <bdo> element, the steadfast keeper of text direction. Particularly handy for languages that flow from right to left, it wields the dir attribute to decree whether text should march left-to-right (ltr) or glide in reverse (rtl). A true sorcerer, bending the flow of words to its will.
<bdo dir="rtl">dog</bdo>
The Pre-Element
The Dilemma of Whitespace
The <pre> element is like a meticulously inscribed scroll where every space and line break holds the value of a mysterious artifact. In the frugal world of HTML, where whitespace is often dismissed like a frivolous afterthought, this element preserves every keystroke exactly as you’ve written it. Perfect for code or poems that rely on the magic of precise spacing to weave their spell!
<pre>Number 1: Spell</pre>
The Silent Enchanter
The Unassuming Hero of Text
The <span> element is like an invisible companion—unremarkable at first glance but brimming with power. Naturally discreet, its true strength lies in its ability to enchant specific parts of text without disrupting the overall structure. Perfectly suited to partner with CSS and JavaScript, it transforms ordinary words or phrases into vibrant, interactive experiences, quietly working its magic in the background.
<span class="highlight">Peace</span>Dynamic and Hidden Content
Sometimes Visible, Sometimes Hidden —
Content That Adapts, Disappears, or Shows Progress.
The Progress-Element
The Faithful Companion on Your Journey
The unassuming yet mighty <progress> element is like the brave companion who always keeps you informed of how far you’ve traveled—whether you’re uploading a file or diving into an enthralling article. With a bit of CSS wizardry, you can even transform its appearance into something truly spectacular, ensuring your progress stands out boldly. It’s always reassuring to see how close you are to the goal and how much adventure still awaits!
<progress value="50" max="100"></progress>
The hidden Attribute
Unveiling the Invisible
The subtle yet powerful hidden attribute grants your HTML elements the ability to vanish into thin air. Concealed from the user’s view but never truly gone, these contents lie in wait, ready to be resurrected through magical scripts or CSS enchantments. Think of it as a true invisibility cloak for your webpage!
<p hidden>I'm off</p>
The translate Attribute
The Guardian of Languages
The translate attribute acts as the vigilant guardian, deciding whether your words succumb to the enchantment of your browser’s automatic translation or resist its magic. With a simple incantation, you can decree whether your terms may speak in foreign tongues or retain their original charm. Choose wisely, for not every word is meant to lose its true brilliance!
<p translate="no">Castle Eldrathor</p>
<p translate="yes">Willkommen im magischen Schloss!</p>In this lesson, you have learned…
- How to use <br>, <wbr>, and <hr> to loosen up text and separate sections for better structure and readability.
- Why the <code> element is important for displaying source code clearly and legibly, and how <bdo> can reverse text direction to handle multilingual content flexibly.
- How the <pre> element preserves spaces and line breaks to correctly display formatted content like code or poetry.
- Why the <span> element is useful for targeting specific text areas with CSS or JavaScript without altering the HTML structure.
- How the <progress> element visualizes the progress of an action so users can see how far a process has advanced.
- Why the hidden attribute is helpful to hide content from users without removing it from the HTML.
- How the translate attribute prevents or allows content to be transformed by automatic translation services.
Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!
The Hidden Signs and Paths
Seran, the ancient ranger, has unearthed a collection of ancient maps and scrolls in the tangled depths of Greenwood Hollow. He believes they hold the key to uncovering the forest’s unknown secrets. But these are no ordinary maps—oh no—they are as intricate as a mischievous goblin lost in a pile of mismatched socks. To decipher these cryptic trails, you must learn to wield HTML elements like a true cartographer—with paragraphs, headings, and hidden annotations to guide the way. Only those who master the secrets of these digital symbols will uncover the forest’s paths and perhaps even unearth a forgotten secret or two.
Your Task: Applying Structure and Functional Elements
Unravel the mysteries of the forest
<!-- HTML -->
<header>
<h1>Wisdom of the Elders in Greenwood Hollow</h1>
<p>Deep in the heart of Greenwood Hollow, an ancient tree teaches us the stories and wisdom of the Elders.
To truly understand this wisdom, you must master the art of quoting and citing sources.</p>
</header>
<section>
<h2>Wisdom 1: The Meaning of Nature</h2>
<!-- <q>-Element -->
<p>The Elders say: <q>Nature is not just a place you visit – it is our home.</q></p>
<!-- <cite>-Element -->
<p>This wisdom comes from an ancient work called <cite>The Secrets of the Forest</cite>.</p>
</section>
<section>
<h2>Wisdom 2: The Bond Between Humans and Nature</h2>
<!-- <blockquote> and cite-Attribut -->
<p>A deep wisdom states:</p>
<blockquote cite="https://example.com/writings-of-the-elders">
“The bond between humans and nature is strong, yet often invisible. It takes time and dedication to recognize and appreciate it.”
</blockquote>
<p>(Source: The Writings of the Elders)</p>
</section>
<section>
<h2>Wisdom 3: Understanding Ancient Terms and Symbols</h2>
<!-- <abbr> and title-Attribute -->
<p>The Elders often use the word <abbr title="HyperText Markup Language">HTML</abbr> in their wisdom. It stands for "HyperText Markup Language," a language they use to pass on knowledge.</p>
</section>
<section>
<h2>Additional Explanations</h2>
<!-- <details> and <summary> -->
<details>
<summary>Click here for more explanations about the history of Greenwood Hollow</summary>
<p>Over the centuries, the ancient tree has heard and recorded so many stories that the Elders decided to preserve them for all future generations.</p>
</details>
</section>