From 4831ec8a45e050082b79e465670cc37116b3d6e6 Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Sat, 3 Oct 2026 08:46:12 +0530 Subject: [PATCH] complited html text content tutorial --- .../html/03-text-content/abbreviations.mdx | 363 +++++++++++++- tutorials/html/03-text-content/citations.mdx | 350 +++++++++++++- tutorials/html/03-text-content/code-text.mdx | 425 ++++++++++++++++- .../03-text-content/emphasis-and-italic.mdx | 356 +++++++++++++- tutorials/html/03-text-content/quotations.mdx | 371 ++++++++++++++- .../html/03-text-content/semantic-text.mdx | 441 +++++++++++++++++- .../subscript-and-superscript.mdx | 362 +++++++++++++- tutorials/html/03-text-content/underline.mdx | 399 +++++++++++++++- 8 files changed, 2999 insertions(+), 68 deletions(-) diff --git a/tutorials/html/03-text-content/abbreviations.mdx b/tutorials/html/03-text-content/abbreviations.mdx index 2696c5e36..51962117a 100644 --- a/tutorials/html/03-text-content/abbreviations.mdx +++ b/tutorials/html/03-text-content/abbreviations.mdx @@ -1,15 +1,362 @@ --- -id: abbreviations -title: "Defining Abbreviations and Acronyms with abbr" +id: html-abbreviations +title: "HTML Abbreviations" sidebar_label: "Abbreviations" sidebar_position: 10 slug: /html/text-content/abbreviations -description: "Use the abbr element with title attributes to provide tooltips and clear expansion definitions for acronyms and abbreviations." +description: "Learn how to use the HTML abbr tag to explain abbreviations, acronyms, and initialisms. Understand the title attribute, first-use best practices, accessibility on touch and keyboard, styling with CSS, and global language tips on CodeHarborHub." keywords: - HTML abbr tag - - abbreviations in HTML - - acronym expansion HTML - - title attribute tooltip + - HTML abbreviations + - HTML acronym + - HTML abbr title attribute + - HTML initialism + - style abbr with CSS + - HTML abbr accessibility + - HTML dfn tag + - learn HTML abbr - CodeHarborHub HTML -tags: [html, accessibility, semantics, typography] ---- \ No newline at end of file +tags: [html, web-development, beginner, abbreviations, abbr, text, frontend] +--- + +Have you ever read a message full of short forms and felt lost? "The WHO released a new SDK for the API." If you work in tech every day, that may be clear. If you are new, it looks like alphabet soup. + +Short forms save space, but they can leave readers behind. HTML gives you a gentle fix: the `` tag. It lets you attach the full meaning to a short form, so everyone, from beginners to experts, can follow your page. + + +
+ +## What You Will Learn + +- How to mark an abbreviation with `` +- How to give its full meaning with the `title` attribute +- The difference between an abbreviation, an acronym, and an initialism +- Why you should **not** rely on the tooltip alone +- How to style abbreviations and handle different languages +- Common mistakes, and how to avoid them + +## The Basics + +Wrap the short form in `` and put the full meaning in the `title` attribute. + + + + +```html title="index.html" +

+ I am learning HTML + and CSS. +

+``` + + + + + +<> +

+ I am learning HTML + and CSS. +

+ + + + + + +Most browsers show a dotted underline under the abbreviation. When you hover your mouse over it, a small tooltip appears with the full text from the `title` attribute. Try it in the example above. + +## Abbreviation, Acronym, or Initialism? + +People often use these words as if they mean the same thing. They are close, but not identical. + +| Type | How you say it | Example | +| :-- | :-- | :-- | +| **Abbreviation** | Shortened word, often said in full | Dr. (Doctor), kg (kilogram), etc. | +| **Acronym** | Read as a **word** | NASA, UNESCO, RAM | +| **Initialism** | Read **letter by letter** | HTML, CSS, API, FBI | + +Here is the good news: in HTML, you use `` for **all three**. The older `` tag is obsolete and removed from the standard. If you see it in old tutorials, replace it with ``. + +## The Golden Rule: Say It in Full the First Time + +The tooltip is helpful, but it has limits. Phone and tablet users cannot hover. Keyboard users often cannot reach it. Some screen readers ignore the `title` attribute. So a tooltip alone is not enough. + +The most reliable approach is to **write the full form in your text the first time**, then use the short form afterward. + + + + +```html title="first-use.html" +

+ The World Wide Web Consortium (W3C) + creates web standards. Many developers follow the W3C + guidelines when they build accessible sites. +

+``` + + + + + +<> +

+ The World Wide Web Consortium (W3C) + creates web standards. Many developers follow the W3C + guidelines when they build accessible sites. +

+ + + + + + +:::tip A friendly habit +Think of it like introducing a new friend. The first time, you say the full name. After that, the nickname is enough. +::: + +## When to Use `` + +Use it when a short form could confuse your reader. + +- **Technical terms:** API, SDK, URL, SQL +- **Organizations:** UNESCO, NASA, WHO +- **Units and titles:** kg, km, Dr., Prof. +- **Slang and jargon** that newcomers may not know + +You do not need it for very common short forms such as "TV" or "OK" when your audience clearly knows them. Use judgment, and ask: "Would a beginner understand this?" + +## Plurals and Longer Phrases + +When the abbreviation is plural, make the `title` plural too. + +```html +

+ Good APIs are easy to read + and well documented. +

+``` + +The `title` can also explain a short form in a helpful way, not only by spelling it out. For example: + +```html +

+ Dial 112 in an emergency. +

+``` + +## Making Abbreviations Easier to Find + +Browsers add a dotted underline by default. This small hint tells readers, "there is more information here." Some designers remove it, but that makes the abbreviation harder to discover. + + + + +```html title="styled-abbr.html" + + +

Learn API basics today.

+``` + + + + + +<> +

Learn API basics today.

+ + + + + + +The selector `abbr[title]` targets only abbreviations that actually have a `title`. The `cursor: help` property shows a question-mark pointer when hovering, which signals that more information is available. + +## Accessibility: Working for Everyone + +A good page works for many kinds of readers. + +| Reader | Challenge | What helps | +| :-- | :-- | :-- | +| Touch device user | Cannot hover | Write the full form in the text on first use | +| Keyboard user | Tooltip may not appear | Provide the meaning in the text, or a glossary | +| Screen reader user | `title` may not be announced | Use the full form in the sentence at least once | +| Low-vision user | Small dotted underline is hard to see | Keep strong color contrast and readable size | + +For pages with many abbreviations, consider adding a **glossary** section at the end that lists them all in one place. It helps every reader. + +```html title="glossary.html" +

Glossary

+
+
API
+
Application Programming Interface
+
URL
+
Uniform Resource Locator
+
+``` + +## Abbreviations Around the World + +The same organization can have different short forms in different languages. This matters for global readers. + + + + +```html title="global-abbr.html" +

+ The UN meets in New York. +

+

+ L'ONU se réunit à New York. +

+

+ La ONU se reúne en Nueva York. +

+``` + + + + + +<> +

+ The UN meets in New York. +

+

+ L'ONU se réunit à New York. +

+

+ La ONU se reúne en Nueva York. +

+ + + + + + +A few tips for a worldwide audience: + +- **Write the `title` in the language of the page.** A French reader should see the full form in French. +- **Do not translate the abbreviation itself** unless the language has its own established short form, as with UN and ONU above. +- **Set the `lang` attribute** on the page and on text in another language, so tools can pronounce things correctly. +- **Check cultural meaning.** A short form can mean different things in different countries, which is why a full form on first use is so helpful. + +## Choosing the Right Tool + +| You want to... | Use | +| :-- | :-- | +| Explain a short form | `` | +| Define a new term when first introduced | `` | +| Mark a foreign word or technical term in a different voice | `` | +| List many terms with meanings | A glossary with `
` | +| Mark the title of a book or film | `` | + +The `` tag marks the **defining instance** of a term, which is the place where you introduce and explain it. You can use it together with ``. + +```html +

+ The SEO process helps + people find your website. +

+``` + +## Common Mistakes + +### Mistake 1: Using `` without a `title` + +An `` with no `title` gives readers no information. If you do not have a meaning to add, you do not need the tag. + +### Mistake 2: Repeating the tooltip text next to every abbreviation + +```html + +

HTML (HyperText Markup Language) +and HTML (HyperText Markup Language)

+``` + +Explain it in full once, then use the short form. + +### Mistake 3: Wrapping every single occurrence + +You can wrap each one, but on long pages it can clutter the code and the page. Wrapping the first use in each section is usually enough. + +### Mistake 4: Relying on the tooltip alone + +Remember that touch and keyboard users may never see it. Always give the meaning in the text at least once. + +### Mistake 5: Using the old `` tag + +It was removed from HTML. Use `` for abbreviations, acronyms, and initialisms. + +### Mistake 6: Removing the dotted underline + +Without a visible hint, readers do not know there is extra information. Keep a subtle style such as a dotted underline. + +## Try It Yourself + +Here is a short project. + +1. Create a file called `tech-glossary.html`. +2. Write a short paragraph about a web topic that uses at least **three** short forms, for example HTML, CSS, and API. +3. On the first use of each, write the full form in the text, then wrap the short form in `` with a `title`. +4. Use one **plural** short form and write its `title` in the plural. +5. Add a small glossary at the bottom with `
`, `
`, and `
`. +6. Add a CSS rule for `abbr[title]` with a dotted underline in your favorite color. + + +
+ +## Quick Recap + +Click a question to check your answer. + +
+1. Which tag explains a short form in HTML? + +The `` tag, with the full meaning in the `title` attribute. + +
+ +
+2. What is the difference between an acronym and an initialism? + +An acronym is read as a word, like NASA. An initialism is read letter by letter, like HTML. In HTML, both use ``. + +
+ +
+3. Why is the tooltip alone not enough? + +Touch users cannot hover, keyboard users may not reach it, and some screen readers ignore `title`. Write the full form in the text on first use. + +
+ +
+4. What happened to the `` tag? + +It is obsolete and was removed from HTML. Use `` instead. + +
+ +
+5. In which language should the `title` be written? + +In the language of the page or the surrounding text, so readers of that language understand it. + +
+ +## Key Takeaways + +- Use `` for abbreviations, acronyms, and initialisms. +- Write the **full form in the text** the first time, because tooltips are not available to everyone. +- Keep the dotted underline, or another clear hint, so readers know more information exists. +- Write the `title` in the language of the page, and set the `lang` attribute. +- Use a glossary for pages with many short forms, and use `` to mark where you define a term. + +Now you can make short forms friendly for every reader. Next, learn how to show code in your text in [Code Text](./code-text). \ No newline at end of file diff --git a/tutorials/html/03-text-content/citations.mdx b/tutorials/html/03-text-content/citations.mdx index a7f4368a3..ff6b4a030 100644 --- a/tutorials/html/03-text-content/citations.mdx +++ b/tutorials/html/03-text-content/citations.mdx @@ -1,15 +1,349 @@ --- -id: citations -title: "Citing Work and Titles using the cite Tag" +id: html-citations +title: "HTML Citations" sidebar_label: "Citations" sidebar_position: 9 slug: /html/text-content/citations -description: "Learn how to correctly use the cite tag to reference creative works, books, research papers, movies, and external articles." +description: "Learn how to use the HTML cite element to mark the title of a creative work such as a book, film, song, or article. Understand cite vs the cite attribute, what not to wrap, reference lists, styling with CSS, and global considerations on CodeHarborHub." keywords: - HTML cite tag - - citing work HTML - - creative work citations - - semantic cite tag + - HTML cite element + - HTML citations + - HTML cite vs blockquote + - HTML cite attribute difference + - HTML title of a work + - style cite with CSS + - HTML references list + - learn HTML cite - CodeHarborHub HTML -tags: [html, citations, semantics, web-standards] ---- \ No newline at end of file +tags: [html, web-development, beginner, citations, cite, text, frontend] +--- + +Think about the last time you recommended a book, a movie, or an article to a friend. You probably said the title and maybe where you found it. Giving credit to the work that inspired you is a simple, honest habit, and it makes your writing more trustworthy. + +HTML has a small tag for this called ``. It marks the **title of a creative work** so that browsers, search tools, and assistive technology know "this is the name of something someone made." In this lesson, you will learn exactly what belongs inside it, and what does not. + + +
+ +## What You Will Learn + +- What the `` element is, and what it marks +- What **not** to put inside ``, such as a person's name +- The difference between the `` element and the `cite` attribute +- How to combine `` with quotes, links, and reference lists +- How to style citations and handle titles in other languages +- Common mistakes, and how to avoid them + +## The Basics + +The `` element wraps the **title of a work**. It is an inline element, so it sits inside a sentence or a paragraph. Browsers show it in italics by default. + + + + +```html title="index.html" +

I just finished reading Pride and Prejudice and loved it.

+

My favorite film from childhood is Spirited Away.

+``` + + + + + +<> +

I just finished reading Pride and Prejudice and loved it.

+

My favorite film from childhood is Spirited Away.

+ + + + + + +## What Counts as a "Creative Work"? + +A creative work is something a person or a team made and gave a title. Here are examples that belong inside ``. + +| Type of work | Example | +| :-- | :-- | +| Book | `Don Quixote` | +| Film or TV show | `Spirited Away` | +| Song or album | `Abbey Road` | +| Painting or sculpture | `The Starry Night` | +| Play or poem | `Hamlet` | +| Article or research paper | `A Study of Web Accessibility` | +| Video game | `Minecraft` | +| Website or web page title | `MDN Web Docs` | + +## What Does NOT Go Inside `` + +This is the part many tutorials get wrong, so read it carefully. + +:::warning A person's name is not a title +The HTML standard says `` is for the **title of a work**, not for the name of the person who made it. Writing `Jane Austen` is not correct. Wrap the book title instead, and write the author's name as normal text. +::: + + + + +```html +

+ Written by Jane Austen. +

+``` + + + + +```html +

+ Pride and Prejudice, written by Jane Austen. +

+``` + + + + +Also avoid wrapping these in ``: + +- The text of a quote (use `
` or ``) +- Your own name or your own page title +- Brand names, company names, and general topics +- Dates, page numbers, and other reference details + +## Two Different Things: The Element and the Attribute + +In the [Quotations](./quotations) lesson, you met the `cite` **attribute**. The names are the same, but they work differently. + +| | `cite` element | `cite` attribute | +| :-- | :-- | :-- | +| Looks like | `Hamlet` | `
` | +| Contains | The title of a work | A web address of a source | +| Visible on the page? | Yes | No | +| Used on | Any text | `
` and `` only | + +You can use both together to give a quote proper credit. + + + + +```html title="credit.html" +
+
+ To be, or not to be, that is the question. +
+
+ From Hamlet, by William Shakespeare +
+
+``` + + + + + +<> +
+
+ To be, or not to be, that is the question. +
+
+ From Hamlet, by William Shakespeare +
+
+ + + + + + +The attribute holds the hidden web address, and the element shows the title to the reader. The quote above is from a play published more than four hundred years ago, so it is in the public domain. + +## Linking to the Source + +If the work is online, wrap the title in a link, or put the `` inside the link. Both patterns are fine, and readers can then open the source directly. + +```html title="cite-link.html" +

+ I learned this from + MDN Web Docs. +

+``` + +## Building a Reference List + +At the end of an article, you can list the works you used. An ordered list is a natural fit. + + + + +```html title="references.html" +

References

+
    +
  1. Jane Austen, Pride and Prejudice, 1813.
    2. +
  2. William Shakespeare, Hamlet, c. 1600.
    3. +
  3. Miguel de Cervantes, Don Quijote de la Mancha, 1605.
    4. +
+``` + + + + + +<> +

References

+
    +
  1. Jane Austen, Pride and Prejudice, 1813.
    2. +
  2. William Shakespeare, Hamlet, c. 1600.
    3. +
  3. Miguel de Cervantes, Don Quijote de la Mancha, 1605.
    4. +
+ + + + + + +:::info HTML does not format citations for you +Styles such as APA, MLA, and Chicago have their own rules about order and punctuation. HTML does not enforce any of them. The `` tag only says "this is a title." You are responsible for following the citation style your school or publisher asks for. +::: + +## Styling Citations with CSS + +Italic is only the default. If you prefer a different look, CSS can change it, and the meaning stays. + + + + +```html title="styled-cite.html" + + +

Try reading The Pragmatic Programmer this month.

+``` + + + + + +<> +

Try reading The Pragmatic Programmer this month.

+ + + + + + +## Titles Around the World + +Readers come from many countries, so a few points are worth knowing. + +- **Mark the language.** If a title is in another language, add `lang`, for example `千と千尋の神隠し`. This helps screen readers pronounce it and helps browsers choose a suitable font. +- **Italics are not universal.** Many languages and scripts do not use italics for titles. Some use quotation marks or corner brackets. If your readers use such a language, restyle `` with CSS, as you saw in the [Emphasis and Italic](./emphasis-and-italic) lesson. +- **Use the title people recognize.** If a work has different titles in different countries, choose the one your readers will know, and consider adding the original title in brackets. + +## Choosing the Right Tool + +| You want to mark | Best choice | +| :-- | :-- | +| The title of a book, film, or article | `` | +| Words someone else said or wrote | `
` or `` | +| A foreign word or technical term | `` | +| A stressed word in your own sentence | `` | +| An author's name | Plain text, or a link to their page | +| A hidden source link for a quote | The `cite` **attribute** | + +## Common Mistakes + +### Mistake 1: Putting a person's name in `` + +The standard says this tag is for titles. Keep names as normal text. + +### Mistake 2: Confusing the element with the attribute + +The **element** is visible and holds a title. The **attribute** is hidden and holds a link. Using one when you mean the other will not give the result you expect. + +### Mistake 3: Using `` just to get italics + +If you only want slanted text, use CSS `font-style`. Use `` when the text really is the title of a work. + +### Mistake 4: Putting the whole sentence inside `` + +```html + +

I recently finished reading Pride and Prejudice.

+ + +

I recently finished reading Pride and Prejudice.

+``` + +### Mistake 5: Forgetting to give credit at all + +Whenever you borrow ideas or words, name the source. It respects the creator and helps your reader find more. + +## Try It Yourself + +Here is a short project. + +1. Create a file called `reading-list.html`. +2. Add an `

` that says **My Reading and Watching List**. +3. Write a short paragraph about a book, a film, or an article that inspired you. +4. Wrap the title of each work in ``, and write the creator's name as normal text. +5. Add one `
` with a short, original quote, and give it a `
` that names the source. +6. Add a CSS rule that makes `` normal weight and dark blue instead of italic. + + +
+ +## Quick Recap + +Click a question to check your answer. + +
+1. What does the `` element mark? + +The title of a creative work, such as a book, film, song, painting, or article. + +
+ +
+2. Should you put an author's name inside ``? + +No. The standard says `` is for the title of a work, not a person's name. + +
+ +
+3. What is the difference between the `cite` element and the `cite` attribute? + +The element is visible and holds a title. The attribute is hidden and holds a web address, and it works only on `
` and ``. + +
+ +
+4. How can you help screen readers handle a title in another language? + +Add the `lang` attribute, for example `Don Quijote de la Mancha`. + +
+ +
+5. Does HTML format citations in APA or MLA style? + +No. HTML only marks the title. You must follow the style rules yourself. + +
+ +## Key Takeaways + +- `` marks the **title of a creative work**, and is shown in italics by default. +- Do not put a person's name or a quote inside it. +- The `cite` element is visible, and the `cite` attribute is a hidden source link. +- Combine `` with `
`, `
`, links, and lists to give clear credit. +- Use `lang` for titles in other languages, and restyle with CSS when italics do not suit the script. + +You can now give proper credit in your writing. Next, learn how to explain short forms like HTML and NASA with [Abbreviations](./abbreviations). \ No newline at end of file diff --git a/tutorials/html/03-text-content/code-text.mdx b/tutorials/html/03-text-content/code-text.mdx index a13e7081e..a703e1d30 100644 --- a/tutorials/html/03-text-content/code-text.mdx +++ b/tutorials/html/03-text-content/code-text.mdx @@ -1,15 +1,422 @@ --- -id: code-text -title: "Displaying Code Snippets, Keyboard Input, and Preformatted Text" -sidebar_label: "Code & Computer Text" +id: html-code-text +title: "HTML Code and Preformatted Text" +sidebar_label: "Code Text" sidebar_position: 11 slug: /html/text-content/code-text -description: "Explore computer text elements including code, pre, kbd, samp, and var to format inline code snippets, terminal output, and user inputs." +description: "Learn how to show code in HTML with the code, pre, kbd, samp, and var tags. Understand whitespace, escaping special characters, styling with CSS, accessibility, and global tips like translate=no, explained clearly on CodeHarborHub." keywords: - HTML code tag - - pre tag HTML - - kbd tag HTML - - computer text formatting + - HTML pre tag + - HTML preformatted text + - HTML kbd tag + - HTML samp tag + - HTML var tag + - escape HTML characters + - HTML entities lt gt amp + - show code in HTML + - style code blocks with CSS + - learn HTML code text - CodeHarborHub HTML -tags: [html, code-snippets, pre-tag, typography] ---- \ No newline at end of file +tags: [html, web-development, beginner, code, pre, text, frontend] +--- + +If you have ever followed a tutorial, you have already seen this tag at work. A command like `npm install`, a line of JavaScript, a keyboard shortcut. Code looks different from normal writing, and it **has to be exact**. One missing space or one wrong letter can break everything. + +HTML gives you a small family of tags to show computer-related text clearly and correctly. In this lesson, you will learn how to display code, keep its spacing, show keyboard keys, and avoid the classic mistake that makes your code disappear from the page. + + +
+ +## What You Will Learn + +- How to show short code with `` +- How to keep spacing and line breaks with `
`
+- How to show **keyboard keys**, **program output**, and **variables**
+- How to display `<` and `>` characters safely
+- How to style code blocks and make them readable for everyone
+- A global tip: stopping translation tools from changing your code
+
+## Meet the Code Family
+
+| Tag | Meaning | Example |
+| :-- | :-- | :-- |
+| `` | A piece of computer code | `console.log("Hi")` |
+| `
` | Preformatted text, keeps spaces and line breaks | A whole code block |
+| `` | Keyboard input | Ctrl + C |
+| `` | Sample output from a program | `Hello, world!` |
+| `` | A variable or placeholder name | `username` |
+
+## The `` Tag: Inline Code
+
+Use `` for a **short piece of code inside a sentence**. Browsers show it in a **monospace** font, where every character has the same width, which makes code easier to read.
+
+
+
+
+```html title="index.html"
+
Use the console.log() method to print a message.

+
Run npm start to open your project.

+```
+
+
+
+
+
+<>
+
Use the console.log() method to print a message.

+
Run npm start to open your project.

+
+
+
+
+
+
+By itself, `` does **not** keep line breaks or extra spaces. Like normal text, the browser collapses them. That is where `
` comes in.
+
+## The `
` Tag: Keep the Spacing
+
+`
` stands for **preformatted**. It shows text exactly as you typed it, including spaces, tabs, and line breaks. This is perfect for blocks of code, poems in a fixed layout, or text diagrams.
+
+
+
+
+```html title="pre.html"
+
+function greet(name) {
+  console.log("Hello, " + name);
+}
+

+```
+
+
+
+
+
+<>
+
{"function greet(name) {\n  console.log(\"Hello, \" + name);\n}"}

+
+
+
+
+
+
+Compare this to a normal paragraph, where all the spacing would collapse into one line. Here, the indentation stays.
+
+## The Best Pair: `
` and `` Together
+
+For a block of code, the standard pattern is to put `` **inside** `
`. The `
` keeps the layout, and the `` tells everyone "this is code."
+
+```html title="pre-code.html"
+

+let total = 0;
+for (let i = 1; i <= 3; i++) {
+  total += i;
+}
+console.log(total);
+

+```
+
+:::warning Wait, this has a problem
+Look at `i <= 3` in the code above. The `<` symbol can confuse the browser, because it thinks a tag is starting. In real HTML, you must **escape** it. The next section shows how.
+:::
+
+## Showing `<` and `>` Safely: Escaping
+
+Characters like `<`, `>`, and `&` have special meaning in HTML. If you want to **show** them as text, replace them with **character entities**.
+
+| You want to show | Write this | Name |
+| :-- | :-- | :-- |
+| `<` | `<` | less than |
+| `>` | `>` | greater than |
+| `&` | `&` | ampersand |
+| `"` | `"` | double quote |
+
+Here is the correct way to show an HTML tag inside a page.
+
+
+
+
+```html title="escape.html"
+
The paragraph tag looks like <p>Hello</p>.

+
+

+for (let i = 1; i <= 3; i++) {
+  console.log(i);
+}
+

+```
+
+
+
+
+
+<>
+
The paragraph tag looks like {'
Hello
'}.

+
+
{"for (let i = 1; i <= 3; i++) {\n  console.log(i);\n}"}

+
+
+
+
+
+
+If you forget to escape, the browser may treat your example as a **real tag**. It will run it or hide it instead of showing it, and your readers will see nothing.
+
+:::tip Writing in Markdown or MDX?
+In Markdown, code between backticks or inside a fenced block is escaped for you. You only need entities when you write raw HTML like the examples above.
+:::
+
+## Keyboard Keys with ``
+
+Use `` when you tell readers which keys to press. It is perfect for shortcuts and instructions.
+
+
+
+
+```html title="kbd.html"
+
Press Ctrl + C to copy.

+
Press Cmd + V on a Mac to paste.

+```
+
+
+
+
+
+<>
+
Press Ctrl + C to copy.

+
Press Cmd + V on a Mac to paste.

+
+
+
+
+
+
+## Program Output with ``
+
+Use `` for the **result** a program prints. This separates what you type from what the computer answers.
+
+```html title="samp.html"
+
After you run the program, you will see Hello, world!

+```
+
+## Variables with ``
+
+Use `` for a **variable name or a placeholder** in explanations. Browsers show it in italics by default.
+
+```html title="var.html"
+
The area of a rectangle is width × height.

+
Replace your-name with your own name.

+```
+
+### All Together
+
+A short tutorial step often uses several of these tags at once.
+
+
+
+
+```html title="together.html"
+

+  Open the terminal and type node app.js, then press Enter.
+  You should see Server running on port 3000.
+  If the port is busy, change port in app.js.
+

+```
+
+
+
+
+
+<>
+

+  Open the terminal and type node app.js, then press Enter.
+  You should see Server running on port 3000.
+  If the port is busy, change port in app.js.
+

+
+
+
+
+
+
+## Styling Code with CSS
+
+The default look is plain, but a little CSS makes code far easier to scan.
+
+
+
+
+```html title="styled-code.html"
+
+```
+
+
+
+
+
+<>
+
Inline code looks like npm start.

+
{"function greet() {\n  console.log(\"Hello\");\n}"}

+
+
+
+
+
+
+Here is what the important rules do:
+
+| Rule | Why it helps |
+| :-- | :-- |
+| `font-family` with monospace fallbacks | Characters line up and look like code |
+| `overflow-x: auto` on `pre` | Long lines scroll instead of breaking the page |
+| `pre code { background: none }` | Avoids a box inside a box |
+| `padding` and `border-radius` | Gives the code room to breathe |
+
+:::info Syntax highlighting
+Colored code, like in the examples on this site, is created by a JavaScript library such as Prism or Shiki. The HTML underneath is still `
` and ``, so everything you learned here still applies.
+:::
+
+## Accessibility and Global Readers
+
+Code is read by many different people, so a few small habits help a lot.
+
+- **Do not use color alone** to carry meaning in code samples. Some readers cannot tell colors apart.
+- **Make scrollable blocks reachable.** If a `
` scrolls horizontally, keyboard users should be able to reach it. Adding `tabindex="0"` lets them focus it and scroll with the arrow keys.
+- **Keep lines reasonably short.** Very long lines are hard to read on phones.
+- **Stop translation tools from changing code.** Browser translation can turn `print` into a word in another language and break your example. Add `translate="no"` to the code, so it stays exactly as written.
+
+```html title="translate-no.html"
+

+  Type npm install in the terminal.
+

+
+

+console.log("Hello");
+

+```
+
+- **Set `lang` for human text, not for code.** Your explanations can be in Hindi, Spanish, or Arabic, while the code stays in its standard form.
+
+## Choosing the Right Tool
+
+| You want to show | Use |
+| :-- | :-- |
+| A short command or function name in a sentence | `` |
+| A block of code with spacing | `
...
` |
+| A key or shortcut to press | `` |
+| What a program prints | `` |
+| A placeholder or variable in an explanation | `` |
+| A poem or ASCII art with fixed spacing | `
` |
+
+## Common Mistakes
+
+### Mistake 1: Forgetting to escape `<` and `>`
+
+Your example tag may run or vanish. Use `<` and `>`, or write in Markdown code blocks.
+
+### Mistake 2: Using `` for multi-line blocks without `
`
+
+Without `
`, line breaks and indentation collapse and your code becomes one long line.
+
+### Mistake 3: Using `
` for page layout
+
+`
` is for text that must keep its spacing. For layout, use CSS.
+
+### Mistake 4: Extra blank lines at the start of `
`
+
+A newline right after `
` is ignored, but other blank lines and indentation are not. If your code starts with extra spaces, they will show.
+
+### Mistake 5: Using `` just for a font
+
+If the text is not computer code, use CSS `font-family` instead.
+
+### Mistake 6: Letting translation tools rewrite your code
+
+Add `translate="no"` to code samples when your page may be translated.
+
+## Try It Yourself
+
+Here is a small exercise.
+
+1. Create a file called `how-to-run.html`.
+2. Write a short instruction with a command inside ``.
+3. Add a code block using `
`, and **escape** at least one `<` character.
+4. Add a shortcut with `` and a result with ``.
+5. Mention one variable with ``.
+6. Style `pre` with a dark background, `padding`, and `overflow-x: auto`, and add `translate="no"` to your code.
+
+
+

+
+## Quick Recap
+
+Click a question to check your answer.
+
+

+1. Which tag shows a short piece of code inside a sentence?
+
+The `` tag.
+
+

+
+

+2. What does `
` do that `` does not?

+
+It keeps spaces and line breaks exactly as typed, so blocks of code keep their layout.
+
+

+
+

+3. How do you show the `<` symbol as text in HTML?
+
+Write `<`. For `>` write `>`, and for `&` write `&`.
+
+

+
+

+4. What are ``, ``, and `` used for?
+
+`` shows keys to press, `` shows program output, and `` shows a variable or placeholder.
+
+

+
+

+5. Why add `translate="no"` to code samples?
+
+Translation tools may change words inside code and break it. The attribute keeps the code exactly as written.
+
+

+
+## Key Takeaways
+
+- `` is for **inline code**, and `
` keeps **spacing and line breaks**.
+- For code blocks, put `` inside `
`.
+- Escape `<`, `>`, and `&` with `<`, `>`, and `&` when you write raw HTML.
+- ``, ``, and `` give extra meaning to keys, output, and placeholders.
+- Style with monospace fonts, `overflow-x: auto`, and good contrast, and use `translate="no"` to protect your code.
+
+Great work. You can now show code clearly and safely. Next, learn how to write small raised and lowered text like H2O and x2 in [Subscript and Superscript](./subscript-and-superscript).
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/emphasis-and-italic.mdx b/tutorials/html/03-text-content/emphasis-and-italic.mdx
index 614557941..9ef7f9a49 100644
--- a/tutorials/html/03-text-content/emphasis-and-italic.mdx
+++ b/tutorials/html/03-text-content/emphasis-and-italic.mdx
@@ -1,15 +1,351 @@
 ---
-id: emphasis-and-italic
-title: "Emphasized Text vs Italics: em vs i Tags"
-sidebar_label: "Emphasis & Italic"
+id: html-emphasis-and-italic
+title: "HTML Emphasis and Italic"
+sidebar_label: "Emphasis and Italic"
 sidebar_position: 7
 slug: /html/text-content/emphasis-and-italic
-description: "Compare the semantic em tag for stress emphasis with the visual i tag for technical terms, idiomatic phrases, and alternate voices."
+description: "Learn the difference between the HTML em and i tags. Understand stress emphasis vs alternate voice, accessibility, CSS font-style, italic challenges in global scripts, and best practices, explained in simple language on CodeHarborHub."
 keywords:
-  - em vs i tag
-  - italic text HTML
-  - semantic emphasis tag
-  - stress emphasis HTML
+  - HTML em tag
+  - HTML i tag
+  - HTML em vs i
+  - HTML italic text
+  - HTML emphasis
+  - CSS font-style italic
+  - HTML semantic tags
+  - HTML lang attribute
+  - learn HTML italic
   - CodeHarborHub HTML
-tags: [html, typography, semantics, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, emphasis, italic, text, frontend]
+---
+
+Say this sentence out loud: "I did not say **he** stole the money." Now say it again, but this time stress a different word: "I did not **say** he stole the money." Same words, completely different meaning.
+
+When we speak, we change our voice to show what matters. In writing, we cannot change our voice, so we use **emphasis**. HTML gives you two tags that look the same on screen, both slanted, but do very different jobs: `` and ``. In this lesson, you will learn which one to use and why.
+
+
+

+
+## What You Will Learn
+
+- How to make text italic with `` and ``
+- The difference between **stress emphasis** and **alternate voice**
+- When each tag is the right choice
+- How to control italics with CSS
+- Why italics do not work the same way in every language
+- Common mistakes, including the famous icon habit
+
+:::info Connection to the last lesson
+In [Strong and Bold](./strong-and-bold), you learned that `` shows importance and `` draws attention. This lesson follows the same idea for slanted text: one tag has **meaning**, and the other is mostly about **style and voice**.
+:::
+
+## The Quick Answer
+
+| Tag | Full meaning | Use it when |
+| :-- | :-- | :-- |
+| `` | Emphasis | A word needs stress, and the stress changes the meaning |
+| `` | Idiomatic text | Text is in a different voice, mood, or language |
+
+
+
+
+```html title="index.html"
+
I really want to learn HTML.

+
The word schadenfreude comes from German.

+```
+
+
+
+
+
+<>
+
I really want to learn HTML.

+
The word schadenfreude comes from German.

+
+
+
+
+
+
+Both are slanted in the browser. The first one says "stress this word when reading." The second one says "this text is a little different from the surrounding text."
+
+## The `` Tag: Stress Emphasis
+
+Use `` when changing the stressed word **changes the meaning** of the sentence. Look at how the point moves in this example.
+
+
+
+
+```html title="em-stress.html"
+
I did not take your pen.

+
I did not take your pen.

+
I did not take your pen.

+```
+
+
+
+
+
+<>
+
I did not take your pen.

+
I did not take your pen.

+
I did not take your pen.

+
+
+
+
+
+
+- The first line suggests someone else took it.
+- The second suggests you borrowed it, but did not take it.
+- The third suggests you took a different pen.
+
+That is the real power of ``. The tag carries the **stress**, not just the slant.
+
+### Nesting for Stronger Stress
+
+You can nest `` inside `` to show a higher level of stress.
+
+```html
+
You must never ever share your password.

+```
+
+Use this sparingly. It works best in short, clear sentences.
+
+## The `` Tag: A Different Voice
+
+The `` tag marks text that is **set apart from normal text** in voice, mood, or language. It does not add stress. Think of it as changing the tone of the page, like a narrator quietly switching voices.
+
+Good uses for ``:
+
+- **Foreign words and phrases** that are not part of the surrounding language
+- **Technical terms**, the first time you introduce them
+- **Thoughts** of a character in a story
+- **Scientific names** of species
+- **Names of ships and vehicles**, in styles that use italics
+
+
+
+
+```html title="i-examples.html"
+
The French say c'est la vie when things go wrong.

+
The HTML parser reads your code from top to bottom.

+
She smiled. I can do this, she thought.

+
The red panda, Ailurus fulgens, lives in forests.

+```
+
+
+
+
+
+<>
+
The French say c'est la vie when things go wrong.

+
The HTML parser reads your code from top to bottom.

+
She smiled. I can do this, she thought.

+
The red panda, Ailurus fulgens, lives in forests.

+
+
+
+
+
+
+:::tip The lang attribute
+Notice `lang="fr"` on the French phrase. It tells browsers, translation tools, and screen readers that this part is in a different language, so they can choose the right pronunciation and fonts. This is a small habit with a big benefit for global readers.
+:::
+
+## Side by Side: em, i, strong, and b
+
+| Tag | Shows | Best for | Example |
+| :-- | :-- | :-- | :-- |
+| `` | Stress | A word you would say louder or longer | "I *really* mean it." |
+| `` | Alternate voice | Foreign words, terms, thoughts | "*Carpe diem*" |
+| `` | Importance | Warnings and key facts | "**Do not** touch." |
+| `` | Attention | Keywords and product names | "**Nova X1** review" |
+
+## How to Choose
+
+Ask yourself two quick questions.
+
+1. **"If I read this aloud, would I stress this word?"** Yes means ``.
+2. **"Is this text in a different voice or language from the sentence around it?"** Yes means ``.
+
+If neither is true and you only want a slanted look, use CSS.
+
+## Controlling Italics with CSS
+
+Browsers show both tags as italic using `font-style: italic`. You can change this, and the tag keeps its meaning.
+
+
+
+
+```html title="font-style.html"
+
+
+
This is very important to understand.

+
This note is slanted only with CSS.

+```
+
+
+
+
+
+<>
+
This is very important to understand.

+
This note is slanted only with CSS.

+
+
+
+
+
+
+In the first line, the stressed word is now bold and orange instead of slanted, but it is still an `` tag, so the meaning remains. That is the benefit of semantic HTML: your design can change without losing what the text means.
+
+| Value | Result |
+| :-- | :-- |
+| `font-style: italic` | Uses the font's true italic design, if it has one |
+| `font-style: oblique` | Slants the regular letters by an angle |
+| `font-style: normal` | Removes the slant |
+
+## Italics Around the World
+
+English readers are used to italics, but not every writing system uses them. This is useful to know if your site reaches readers in many countries.
+
+- **Many scripts have no italic tradition.** Chinese, Japanese, Korean, Arabic, Hebrew, and many Indian scripts do not usually use slanted text. If a font has no italic design, the browser creates a **fake slant**, which can look uneven or harder to read.
+- **Other writing systems use other methods.** Depending on the language, emphasis might be shown with bold, a different color, extra spacing, or special punctuation.
+- **Test with your real content.** If your page is in Hindi or Japanese, preview how `` looks and consider changing it with CSS.
+
+```css
+/* Better emphasis for languages where fake italics look poor */
+:lang(ja) em,
+:lang(hi) em,
+:lang(ar) em {
+  font-style: normal;
+  font-weight: 700;
+}
+```
+
+The `:lang()` selector applies the style only to content marked with the right `lang` attribute, so each language gets a suitable look.
+
+## Accessibility Notes
+
+- Many screen readers **do not change their voice** for `` by default, so do not rely on tone alone. Write clear sentences that make sense even without the stress.
+- Because `` is semantic, users and assistive tools can configure how it is announced. A plain CSS slant carries no such meaning.
+- **Long passages in italics are hard to read**, especially for people with dyslexia or low vision. Keep italics to a few words.
+- Keep color contrast high when you restyle emphasis.
+
+## Common Mistakes
+
+### Mistake 1: Using `` for icons
+
+You may have seen code like this in older tutorials.
+
+```html
+
+
+```
+
+Some icon libraries used `` as a convenient empty tag. Since `` has meaning, a better habit is `` with an `aria-hidden="true"` attribute, or an inline SVG. If you are using a library that does this, it still works, but avoid copying it into your own semantic text.
+
+### Mistake 2: Using `` only to get a slant
+
+```html
+
+
Welcome to our website

+```
+
+If you only want a slanted look, use CSS `font-style: italic`.
+
+### Mistake 3: Italicizing whole paragraphs
+
+```html
+
+
This long paragraph is entirely in italics, so nothing stands out and the
+text becomes tiring to read.

+```
+
+Emphasis works because it is rare. Use it on a word or a short phrase.
+
+### Mistake 4: Mixing up `` and ``
+
+`` is about **how you would say** something. `` is about **how serious** it is. A sentence can use both.
+
+```html
+
Warning: you must save your work first.

+```
+
+### Mistake 5: Using `` for titles of works
+
+A book, film, or album title is a creative work. HTML has a better tag for it, ``, which you will see in the [Citations](./citations) lesson.
+
+## Try It Yourself
+
+Practice with a short project.
+
+1. Create a file named `language-notes.html`.
+2. Write three sentences about a language or place you like.
+3. Use `` to stress **one word** whose stress changes the meaning.
+4. Use `` with a `lang` attribute for **one foreign word**.
+5. Add a CSS rule that makes `` bold and dark orange instead of slanted.
+6. Read your sentences aloud. Does the stress feel natural?
+
+
+

+
+## Quick Recap
+
+Click a question to check your answer.
+
+

+1. When should you use ``?
+
+When a word needs stress, especially if changing the stress changes the meaning of the sentence.
+
+

+
+

+2. Name two good uses of ``.
+
+Foreign words or phrases, technical terms, a character's thoughts, and scientific names are all good uses.
+
+

+
+

+3. Why add `lang="fr"` to a French phrase inside an English page?
+
+It helps browsers, translation tools, and screen readers handle that phrase correctly, including pronunciation and font choice.
+
+

+
+

+4. How can you remove the slant from an `` tag?
+
+Use CSS: `em { font-style: normal; }`. You can add bold or color instead.
+
+

+
+

+5. Why can italics be a problem in some languages?
+
+Many scripts have no italic design, so browsers fake a slant that may look uneven or be harder to read.
+
+

+
+## Key Takeaways
+
+- `` shows **stress emphasis**. `` shows **a different voice, term, or language**.
+- Both are italic by default, but their meanings are different.
+- Use CSS `font-style` when you only want a visual change.
+- Mark foreign text with the `lang` attribute.
+- Keep italics short, and check that they work in the languages your readers use.
+
+You now know how to add stress and voice to your text. Next, learn how to display quoted words properly in [Quotations](./quotations).
\ No newline at end of file
diff --git a/tutorials/html/03-text-content/quotations.mdx b/tutorials/html/03-text-content/quotations.mdx
index e4a5aad29..c3ca829dc 100644
--- a/tutorials/html/03-text-content/quotations.mdx
+++ b/tutorials/html/03-text-content/quotations.mdx
@@ -1,15 +1,370 @@
 ---
-id: quotations
-title: "Blockquotes and Inline Quotations in HTML"
+id: html-quotations
+title: "HTML Quotations"
 sidebar_label: "Quotations"
 sidebar_position: 8
 slug: /html/text-content/quotations
-description: "Master blockquote and q elements in HTML for long-form quotes and inline text quotations, including cite attributes for source tracking."
+description: "Learn how to mark up quotations in HTML with the blockquote and q tags. Understand the cite attribute, figure and figcaption for attribution, quotation marks in different languages, CSS styling, and common mistakes on CodeHarborHub."
 keywords:
+  - HTML quotations
   - HTML blockquote tag
-  - q tag HTML
-  - quote elements HTML
-  - block vs inline quotation
+  - HTML q tag
+  - HTML cite attribute
+  - HTML figure figcaption quote
+  - HTML inline quotation
+  - style blockquote with CSS
+  - HTML quotes by language
+  - learn HTML quotes
   - CodeHarborHub HTML
-tags: [html, quotations, markup, semantics]
----
\ No newline at end of file
+tags: [html, web-development, beginner, quotations, blockquote, text, frontend]
+---
+
+Every day we repeat the words of other people. A teacher's advice, a line from a book, a sentence from a report. When you share those words on a web page, two things matter: the reader should know **these are someone else's words**, and the browser should know it too.
+
+HTML gives you two tags for this, `
` for longer quotes and `` for short ones. In this lesson, you will learn how each one works, how to give credit to the source, and how to display quotations correctly for readers in different countries.
+
+
+

+
+## What You Will Learn
+
+- The difference between `
` and ``
+- How the `cite` attribute stores a source link
+- How to show a visible source with `
` and `
`
+- How quotation marks change by language
+- How to style quotes with CSS
+- Common mistakes, and what to do instead
+
+## The Quick Answer
+
+| Tag | Type | Best for | Quotation marks |
+| :-- | :-- | :-- | :-- |
+| `
` | Block-level | Longer quotes, one or more sentences or paragraphs | Not added. The block is indented instead |
+| `` | Inline | Short quotes inside a sentence | Added automatically by the browser |
+
+
+
+
+```html title="index.html"
+
My teacher always says practice makes progress when I feel stuck.

+
+

+  Learning to code is like learning a language. At first, every sentence takes
+  effort. Soon, you start thinking in it.
+

+```
+
+
+
+
+
+<>
+
My teacher always says practice makes progress when I feel stuck.

+
+

+  Learning to code is like learning a language. At first, every sentence takes
+  effort. Soon, you start thinking in it.
+

+
+
+
+
+
+
+Notice that the `` tag added quotation marks by itself, and the `
` was indented without any marks.
+
+## The `
` Tag: Longer Quotes
+
+Use `
` when the quoted text is long enough to stand on its own, or when it has several sentences or paragraphs. It is a **block-level** element, so it starts on a new line.
+
+By default, browsers indent it with left and right margins (usually about 40px) so it stands out from your own writing.
+
+You can place paragraphs inside a blockquote.
+
+```html title="blockquote-paragraphs.html"
+

+  
First paragraph of the quoted text.

+  
Second paragraph of the quoted text.

+

+```
+
+:::warning Not for indentation
+Never use `
` just to push text to the right. It means "this is a quotation." If you only want spacing, use CSS `margin` or `padding`. Screen readers may announce a blockquote, which confuses users when no quote exists.
+:::
+
+## The `` Tag: Short Inline Quotes
+
+Use `` for a short quote inside a sentence. It is an **inline** element, so it stays in the flow of your paragraph.
+
+
+
+
+```html title="q-tag.html"
+
The sign at the entrance said please keep the door closed.

+
She replied, I will remember that, and smiled.

+```
+
+
+
+
+
+<>
+
The sign at the entrance said please keep the door closed.

+
She replied, I will remember that, and smiled.

+
+
+
+
+
+
+### Do Not Add Quotation Marks Yourself
+
+The browser already adds them. If you type your own, you will get double marks.
+
+```html
+
+
He said "hello".

+
+
+
He said hello.

+```
+
+## Giving Credit: The `cite` Attribute
+
+Both `
` and `` accept a `cite` attribute. It holds the **web address** of the source.
+
+```html
+

+  Learning to code is like learning a language.
+

+```
+
+Here is the important part: the `cite` attribute is **not shown** on the page. It is for browsers, search tools, and other software. Most readers never see it.
+
+So if you want people to see where a quote came from, show the source in the page itself. The best way is with `
` and `
`.
+
+## Showing the Source: `
` and `
`
+
+Wrap the blockquote in a `
`, and put the source name in a `
`. This links the quote and its source in a meaningful way.
+
+
+
+
+```html title="figure-quote.html"
+

+  

+    Learning to code is like learning a language. At first, every sentence
+    takes effort. Soon, you start thinking in it.
+  

+  

+    Amara Okafor, A Beginner's Guide to Programming
+  

+

+```
+
+
+
+
+
+<>
+

+  

+    Learning to code is like learning a language. At first, every sentence
+    takes effort. Soon, you start thinking in it.
+  

+  

+    Amara Okafor, A Beginner's Guide to Programming
+  

+

+
+
+
+
+
+
+:::info About the cite element
+The `` element inside the caption marks the **title of the work**. You will learn it in detail in the next lessons, and the [Citations](./citations) page covers it fully. The example above uses an invented author and book for practice.
+:::
+
+## Quotation Marks Around the World
+
+This is one of the nicest features of ``. The browser chooses the correct quotation marks based on the language, so you do not need to remember them.
+
+
+
+
+```html title="q-languages.html"
+
English: Good morning

+
Français : Bonjour

+
Deutsch: Guten Morgen

+
日本語：おはようございます

+```
+
+
+
+
+
+<>
+
English: Good morning

+
Français : Bonjour

+
Deutsch: Guten Morgen

+
日本語：おはようございます

+
+
+
+
+
+
+Each language gets its own style. English uses curly double marks, French uses angle marks, German uses low and high marks, and Japanese uses corner brackets. The exact result depends on the browser and the fonts available, but the `lang` attribute is what gives the browser the information it needs.
+
+This is another reason to **always set the `lang` attribute** on your page and on any text in a different language.
+
+### Customizing Quotation Marks with CSS
+
+You can choose the marks yourself with the `quotes` property.
+
+```css
+q {
+  quotes: "«" "»" "‹" "›";
+}
+```
+
+The first pair is for the outer quote and the second pair is for a quote inside a quote.
+
+## Styling Blockquotes with CSS
+
+The default indent works, but a little CSS makes quotes easier to notice and more pleasant to read.
+
+
+
+
+```html title="styled-quote.html"
+
+
+

+  Small steps every day beat big steps once a month.
+

+```
+
+
+
+
+
+<>
+

+  Small steps every day beat big steps once a month.
+

+
+
+
+
+
+
+:::tip Right-to-left languages
+For Arabic, Hebrew, and other right-to-left languages, use `border-inline-start` instead of `border-left`. It automatically puts the line on the correct side for each reading direction.
+:::
+
+## Choosing the Right Tool
+
+| Situation | Use |
+| :-- | :-- |
+| A short phrase inside a sentence | `` |
+| A longer quote or several paragraphs | `
` |
+| A quote with a visible source | `
` with `
` and `
` |
+| The title of a book, film, or article | `` |
+| A note or advice box that is not a quote | A `
` or `