More Text Elements
The Language of Hidden Signs
In the hidden corners of the HTML spellbook, you’ll find elements that safeguard the knowledge and stories of ages past. From cite and blockquote, which help you quote the words of sages with precision, to abbr and title, which reveal secret explanations, and even details, a treasure chest that opens its mysteries only upon request.
All these spells are designed to make your magical creation more comprehensible. pre and code preserve your precious runes in their purest form. With span, bdo, and translate, you can shape and control your text with remarkable flexibility. Master their use, and your HTML will transform into the ultimate scroll of mastery in the digital realm of Aetheron.
Quotes and References
Good Ideas Deserve a Good Source — and Sometimes Quotation Marks.
Quotes and References
Words of Wisdom and Origins
Imagine an old scholar preserving the wisdom of ancient times. The <q> element is his tool to seamlessly insert short quotes into the text, while the <cite> element respectfully reveals the origin of that wisdom. Whether it’s a book, a work, or another source — with <cite> you not only give your quotations weight but also the touch of credibility they deserve.
<q>Speak, friend, and enter</q>
<cite>Lord of the Rings</cite>
The Wisdom of Great Texts
Presenting Significant Words
For those grand, important words that need room to breathe, the
element is your trusted ally. Like an orator delivering lines from an ancient manuscript, it grants your text weight and significance. Whether it’s the words of a renowned thinker or a pivotal passage from a great work, elevates the text, giving it the prominence and space it so rightly deserves.
<blockquote>We are all made of stardust.</blockquote>
Carl SaganEmbed Additional Information Smartly
When Details Matter — But Shouldn’t Jump in Your Face.
Conceiled Facts
Hidden Knowledge for Curious Readers
The title attribute, also known as the tooltip, is like a mysterious treasure map. Hidden within an unassuming piece of text, it lies in wait for curious readers to hover their mouse over it and reveal its concealed wisdom. It’s the perfect way to gently bring extra information to light without disturbing the text’s flow—like a secret note that only becomes visible upon closer inspection.
<p title="Coordinates: 40° 41' 21.296' N 74° 2' 40.2' W">The path to the treasure</p>
The Abbr-Element
The Revelation of Hidden Meanings
The <abbr> element is the undisputed master of abbreviations. With a simple hover over the abbreviation, it reveals its full glory, explaining to the reader what truly lies behind the mysterious shorthand. Thanks to the title attribute, it unveils the full meaning, ensuring no one is left in the dark when it comes to cryptic abbreviations and enigmatic acronyms.
<p>The <abbr title="Guild of Legendary and Otherworldly Wonders"> G.L.O.W.</abbr> unites the wisest wizards.</p>
Details and Summaries
Opening the Treasure Chest of Information
The <details> element is like an ancient treasure chest, patiently waiting for the right moment to be opened. The <summary> element serves as the key. Click the little arrow, and voilà — the hidden contents are revealed. Together, these two elements provide an elegant way to package large amounts of information into a compact form, ready for the reader to unfold at their leisure. Simple and brilliant, they keep your page flowing seamlessly while guarding its secrets.
<details>
<summary>
The Magic of HTML
</summary>
<p>HTML is the foundation of your spells.
</p>
</details>In this lesson, you have learned…
- How to format quotations with <q> and <blockquote> to correctly display short and longer quotes.
- Why <cite> is important for providing the source of a work or author and adding credibility.
- How to use the title attribute to add hidden additional information that appears when the user hovers over it.
- Why <abbr> makes abbreviations clearer by using title to show the full meaning.
- How <details> and <summary> enable interactive content by revealing text only when needed and keeping the page tidy.
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 Tree of Ancient Wisdom
Hidden in the deepest corner of Greenwood Hollow stands a tree as old as the forest itself. On its gnarled branches hang the wisdom of the elders, etched into the bark like magical runes. To comprehend and share these teachings, you must learn how to preserve quotes, sources, and explanations in the digital realm. HTML elements are your magical tools to reveal the ancient words and carry the elders’ wisdom out into the world.
Your Task: Applying Quotes and Explanations
Complete the blanks with the correct elements and attributes.
<!-- 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>