Which one do you prefer?

[JSWolf]

Originally Posted by icearch

Talking about semantic, I think to encourage people using more <em> and <strong> instead of <i> and <b>, it is helpful to add dedicated button in Sigil. Last time i checked there are none. Especially the latter ones are longer and people tends not to use them.

I prefer <i> & <b>. However, if you do want to use <em> & <strong>, you have to know when to use <em> & <strong> and when to use <i> & <b>. They have different uses.

[JSWolf]

Originally Posted by Turtle91

The <blockquote> HTML element indicates that the enclosed text is an extended quotation, usually not a short one liner. This is visibly offset from the regular text somehow.

<blockquote cite="https://screenrant.com/star-wars-best-yoda-quotes/">
<p>Master Yoda was an endless fount of wisdom to his Jedi proteges in Star Wars, and he had no shortage of quotes distilling that wisdom. Ever since his introduction in The Empire Strikes Back, Yoda has been a symbol of the series, one of the most recognizable characters in all science fiction, and one of the strongest Jedi ever. Always ready to dish out insights into the Force to any other character who needed it (even if they didn't always follow it), Yoda played his role as a teacher perfectly.</p>

<p>Some of his teachings were incredibly quotable, and Yoda's unique speech pattern has elevated some of his wisdom from memorable to iconic. Though wise, he was not a perfect teacher, as one of Yoda's students turned to the dark side. While it can be hard to narrow down the greatest of his sayings, here are 20 of Yoda's best quotes, ones that have the most meaning to the story and provide the most guidance and truth outside the movies.</p>

<p>Part of what made Yoda so wise was that he never stopped searching for wisdom. In Star Wars: Episode II - Attack of the Clones, Yoda seeks a youngling's help with finding Kamino. This proves that Yoda was always open to new knowledge, even from the most unlikely of places. It also showed that keeping an open mind can solve problems that seem to have no solution.</p>

<p class="sig">~ <cite>Marcelo Leite</cite>, Aug 2024</p>
</blockquote>

There is no need to offset a short quote visibly...it just flows with the text

<p>I was listening to the words of wisdom intently.</p>
<p>"Into the flow of normal text, a short quote incorporated is," said Master Yoda.</p>
<p>Now I knew why he was the Master.</p>

Anything else that does not fit within that semantic definition would rightfully fall under a <div>.

For example, a tavern sign, a business card, a handwritten letter...

<div class="sign">
  <p>Fuller's Tavern</p>
  <img class="floatleft" alt="two steins" src="..."/>
  <img class="floatright" alt="d20" src="..."/>
  <p>Gaming, Grog &amp; Good Times</p>
</div>

<div class="card">
  <img class="center" alt="remote" src="..."/>
  <p>« Gameologist »</p>
</div>

<div class="write">
  <p>Dear Jon,</p>
  <p>I refer to the recent death of the technical manager at your company and hereby apply for the replacement of the deceased Manager.</p>
  <p>Each time I apply for a job, I get a reply that there's no vacancy but in this case I have caught you red-handed and you have no excuse because I even attended the funeral to be sure that he was truly dead and buried before applying.</p>
  <p>Attached to my letter is a copy of my CV and his death certificate.</p>
  <p class="sig">Morbidly yours,<br/><a href="https://www.careeraddict.com/7-funniest-cover-letters"/></p>
</div>

In your example of short text that is offset, I still prefer a <blockquote>. If the offset if different then the longer offset, I'll use a class to go with the <blockquote>. I am not a fan of using a <div> instead of <blockquote> because offset text is what <blockquote> was designed for.

[icearch]

Originally Posted by Turtle91

I’ve created two “clips” buttons for exactly that purpose:

STRONG  <strong>\1</strong>
EM      <em>\1</em>

When you have them on the clips bar it is very easy to use!

That's really helpful, thanks.

[Turtle91]

Originally Posted by JSWolf

… because offset text is what <blockquote> was designed for.

Yes, it is because an extended quote is visually offset somehow as opposed to a short quote. Browsers have simply defaulted to margins to achieve that offset. I assume that is to mirror the traditional offset that typesetters had access to for ages. With ebooks, and the use of css, that offset can have any manner or means to make it stand apart from the normal text; color, background, border, font, etc.

We are talking about semantics here…that means definitions…. If you choose to NOT use the semantically correct tags, that’s on you. I could care less if you choose to use <blockquote> instead of <p> around every paragraph or even each sentence!!

[KevinH]

Originally Posted by icearch

Talking about semantic, I think to encourage people using more <em> and <strong> instead of <i> and <b>, it is helpful to add dedicated button in Sigil. Last time i checked there are none. Especially the latter ones are longer and people tends not to use them.

That is what Sigil's clips are for ... so you can create your own "tags" with a single click. You can now make up to 60 of them.

[icearch]

Originally Posted by KevinH

That is what Sigil's clips are for ... so you can create your own "tags" with a single click. You can now make up to 60 of them.

Ye, I'm not very familiar with Sigil yet. Now I have know that I might need to pick up some Regex and make good use of it.

[Turtle91]

A little more detail for those who are equally bored…

There are multiple style guides people use when writing. These guides are mostly for consistency within an organization (and professors nead something to mark grades down for!).
These style guides differ based on the purpose of the writing: Academic, Legal, Professional, etc. They can also be different based on their primary language, or even National Origin. Some organizations will even provide guides for use within their company; in-house styles.
Some style guides are completely 180 degrees out from each other going so far as to forbid the use of the essential Oxford Comma!!!

One very common style guide is the APA, another is MLA.

One thing APA and MLA both agree on is their styling of direct quotes.

Formatting Quotations

When you directly quote the works of others in your paper, you will format quotations differently depending on their length.

Long quotes:

In APA style, long quotes of 40 words or more should be formatted as block quotes. Start on a new line, indent the entire quote ½ inch from the left margin, and do not use quotation marks; the citation follows the punctuation at the end of the quote.

In MLA -
For quotations that are more than four lines of prose or three lines of verse, place quotations in a free-standing block of text and omit quotation marks. Start the quotation on a new line, with the entire quote indented 1/2 inch from the left margin while maintaining double-spacing. Your parenthetical citation should come after the closing punctuation mark.

Short quotes:

APA:
For quotations of fewer than 40 words, add quotation marks around the words and incorporate the quote into your own text—there is no additional formatting needed.

MLA:
To indicate short quotations (four typed lines or fewer of prose or three lines of verse) in your text, enclose the quotation within double quotation marks. Provide the author and specific page number (in the case of verse, provide line numbers) in the in-text citation, and include a complete reference on the Works Cited page. Punctuation marks such as periods, commas, and semicolons should appear after the parenthetical citation.

The HTML <q> is used to define a short quotation within the normal flow of text.

<p>Master Yoda’s goal is to:
<q>Build a future where people talk backwards but with profound wisdom.</q></p>

While not commonly used in fiction, the <q> tag is a valid and useful tool.


The HTML <blockquote> is used to mark the beginning and end of an extended quote (a long quote). It also provides a way to include a citation within the tag as well as within the quote:

<blockquote cite="……">
  <p>yadda yadda</p>
  <p>yadda yadda</p>
  <p>yadda yadda</p>
  <p class="sig">- <cite>yours truly</cite></p>
</blockquote>

You COULD rely on the default styling provided by browsers/reading devices, but it is much better to provide explicit styling in your css so you have a consistent look across devices.

Accessibility requirements also indicate how important it is to use proper markup:
Marking up quotations properly is important for several reasons. Many assistive technologies rely on proper markup to provide additional information and/or emphasis on specific types of text (such as quotations) to indicate to users that they are different from surrounding text.

Spoiler:

Accessibility Standards for Block Quotes
Importance of Accessibility in Block Quotes
Block quotes are essential for presenting longer quotations distinctly from the main text. Ensuring they are accessible is crucial for users with disabilities, particularly those using screen readers. Proper markup helps convey the structure and meaning of the content.

HTML Markup for Block Quotes
To make block quotes accessible, use the following HTML elements:
<blockquote>: This tag is used for longer quotes. It should be used for quotes from external sources, not from the same source.
<cite>: This optional tag can be included within the blockquote to reference the source of the quote. However, its practical use is limited.

Screen Reader Compatibility
Different screen readers handle block quotes in various ways:
NVDA and JAWS: These screen readers announce the blockquote tag, providing context to users.
VoiceOver, Narrator, Orca, and TalkBack: These may not announce the blockquote tag, which can lead to a lack of context for users.

Formatting Guidelines
When formatting block quotes, consider the following:
Indentation: Indent the block quote from the left margin, typically by ½ inch.
Spacing: Add extra space above and below the block quote to visually separate it from surrounding text.
Font Variation: Use a different typeface or size to distinguish the block quote from the main text, though this is not strictly necessary.

Conclusion
Using the correct HTML tags and following formatting guidelines enhances the accessibility of block quotes. This ensures that all users, including those relying on assistive technologies, can understand and engage with the content effectively.

It is possible to use almost ANY block level tag to style text to LOOK the same, but by using the semantically correct tag you provide the consistency essential for assistive devices to function properly. Don’t use a tag just because it has a default visual styling that fits your purpose - use the correct tag so everyone is happy!

[JSWolf]

Originally Posted by Turtle91

Yes, it is because an extended quote is visually offset somehow as opposed to a short quote. Browsers have simply defaulted to margins to achieve that offset. I assume that is to mirror the traditional offset that typesetters had access to for ages. With ebooks, and the use of css, that offset can have any manner or means to make it stand apart from the normal text; color, background, border, font, etc.

We are talking about semantics here…that means definitions…. If you choose to NOT use the semantically correct tags, that’s on you. I could care less if you choose to use <blockquote> instead of <p> around every paragraph or even each sentence!!

This is what I'd do.

<blockquote>
<p>This Sentence is offset.</p>
</blockquote>

[icearch]

Originally Posted by Turtle91

It is possible to use almost ANY block level tag to style text to LOOK the same, but by using the semantically correct tag you provide the consistency essential for assistive devices to function properly. Don’t use a tag just because it has a default visual styling that fits your purpose - use the correct tag so everyone is happy!

It's getting hard for me to live up to this level of proficiency, it's surly good deed to maintain a well sematic structure. But in practice, consider my goal and spare effort, it is more practical for me to go for a easy way.

Still, thanks for sharing! I learned a lot of interesting knowledge.

[Turtle91]

Originally Posted by JSWolf

This is what I'd do.

<blockquote>
<p>This Sentence is offset.</p>
</blockquote>

Ahhh, so you DO choose to wrap a blockquote around each sentence…. Fascinating….

I shudder to imagine assistive technology calling out “Quote” every time it gets to a new sentence of yours.

[DNSB]

Originally Posted by Turtle91

It is possible to use almost ANY block level tag to style text to LOOK the same, but by using the semantically correct tag you provide the consistency essential for assistive devices to function properly. Don’t use a tag just because it has a default visual styling that fits your purpose - use the correct tag so everyone is happy!

[DNSB]

Originally Posted by icearch

It's getting hard for me to live up to this level of proficiency, it's surly good deed to maintain a well sematic structure. But in practice, consider my goal and spare effort, it is more practical for me to go for a easy way.

Still, thanks for sharing! I learned a lot of interesting knowledge.

I know when I first started trying to use semantic tags correctly, it took some effort but after using them for a while, it became habit. Admittedly, I do edit some books for others making using semantic tags more important than if I was just editing for my own use. I really appreciate the effort that KevinH has put into making Sigil more accessibility friendly.

[icearch]

What about backward compatibility? Can epub2 device/software read and render these fancy tags correctly?

[Turtle91]

The <blockquote> HTML element has been available since HTML 2.0, which was released in November 1995.

The <q> HTML element was introduced in HTML 4.01, which was published as a W3C Recommendation on December 24, 1999.

In short, they’ve been around for a LONG time! If a device doesn’t support them, the device should be tossed in the trash because it is probably growing some zombie apocalypse mold in its innards…

[icearch]

Not just these, I mean other newer things like <section> and <article>. If I recall correctly, they are html5 feature. If not supported, would these just be ignored or cause some troubles?