Advanced HTML Quotation Techniques

<article itemscope itemtype="https://schema.org/ScholarlyArticle">
  <h2 itemprop="headline">Research Findings on Quantum Computing</h2>
  
  <blockquote cite="https://www.researchjournal.org/study123" 
              itemscope 
              itemtype="https://schema.org/Quotation">
    <p itemprop="text">The results indicate a 72% improvement in 
    processing speed using the new quantum algorithm.</p>
    <footer>
      <span itemprop="author" itemscope itemtype="https://schema.org/Person">
        <span itemprop="name">Dr. Alice Chen</span>,
      </span>
      <cite itemprop="isPartOf" itemscope itemtype="https://schema.org/Periodical">
        <span itemprop="name">Journal of Quantum Physics</span>,
      </cite>
      <time itemprop="datePublished" datetime="2023-05-15">May 2023</time>
    </footer>
  </blockquote>
  
  <p>This aligns with our own findings regarding 
  <abbr title="Quantum Field Theory" aria-label="Quantum Field Theory">QFT</abbr> 
  applications in <span itemprop="keywords">algorithm optimization</span>.</p>
</article>

<article itemscope itemtype="https://schema.org/NewsArticle">
  <h1 itemprop="headline">City Council Approves New Green Initiative</h1>
  
  <div itemprop="articleBody">
    <p>In a 5-2 vote last night, the city council approved the new 
    environmental protection plan. Mayor Johnson stated:</p>
    
    <blockquote itemprop="citation" itemscope itemtype="https://schema.org/Quotation">
      <p itemprop="text">This initiative represents our commitment to 
      sustainable urban development while protecting local ecosystems.</p>
      <footer>
        <span itemprop="author" itemscope itemtype="https://schema.org/Person">
          <span itemprop="name">Mayor Sarah Johnson</span>
        </span>,
        <time itemprop="dateCreated" datetime="2023-06-10T19:30:00-05:00">
          June 10, 2023
        </time>
      </footer>
    </blockquote>
    
    <p>Opposition leader <span itemprop="author">Councilman Harris</span> countered:</p>
    
    <blockquote class="opposition" itemscope itemtype="https://schema.org/Quotation">
      <p itemprop="text">While we support environmental protection, 
      this plan imposes unreasonable costs on local businesses.</p>
      <footer>
        <span itemprop="author" itemscope itemtype="https://schema.org/Person">
          <span itemprop="name">Councilman Mark Harris</span>
        </span>
      </footer>
    </blockquote>
  </div>
</article>

<div class="literary-review" itemscope itemtype="https://schema.org/Review">
  <h2>Review: <cite itemprop="itemReviewed" itemscope itemtype="https://schema.org/Book">
    <span itemprop="name">Midnight's Children</span>
  </cite></h2>
  
  <div itemprop="reviewBody">
    <blockquote itemprop="citation" itemscope itemtype="https://schema.org/Quotation">
      <p itemprop="text">To understand just one life, you have to swallow the world.</p>
      <footer>
        <span itemprop="author" itemscope itemtype="https://schema.org/Person">
          <span itemprop="name">Salman Rushdie</span>
        </span>,
        <cite itemprop="isPartOf" itemscope itemtype="https://schema.org/Book">
          <span itemprop="name">Midnight's Children</span>
        </cite>
      </footer>
    </blockquote>
    
    <p>This iconic opening sets the tone for Rushdie's masterpiece. 
    As noted by the <abbr title="New York Times" 
    data-definition="American daily newspaper based in New York City">NYT</abbr>, 
    it's <q cite="https://nytimes.com/review" 
    aria-label="New York Times review quote">one of the most important 
    novels of the 20th century</q>.</p>
    
    <button onclick="toggleDefinition('NYT')" 
            aria-expanded="false" 
            aria-controls="nyt-def">
      What does NYT mean?
    </button>
    <div id="nyt-def" hidden 
         aria-live="polite" 
         itemscope 
         itemtype="https://schema.org/Organization">
      <p><span itemprop="name">New York Times</span>: 
      <span itemprop="description">American daily newspaper based in New York City</span></p>
    </div>
  </div>
</div>

<script>
  function toggleDefinition(abbr) {
    const def = document.getElementById(`${abbr.toLowerCase()}-def`);
    const button = document.querySelector(`button[aria-controls="${abbr.toLowerCase()}-def"]`);
    const isExpanded = def.hidden;
    
    def.hidden = !isExpanded;
    button.setAttribute('aria-expanded', String(!isExpanded));
    button.textContent = isExpanded ? 
      'Hide definition' : 
      'What does ' + abbr + ' mean?';
  }
</script>