Text Content Elements

<article>
  <h1>Complete Guide to Web Accessibility</h1>
  
  <section>
    <h2>Introduction to Accessibility</h2>
    <p>Web accessibility ensures websites work for everyone...</p>
    
    <h3>What is WCAG?</h3>
    <p>WCAG provides guidelines for accessible content...</p>
    
    <h3>Benefits of Accessibility</h3>
    <p>Accessible websites benefit all users...</p>
  </section>
  
  <section>
    <h2>Implementing Accessibility</h2>
    <p>Practical steps to make your website accessible...</p>
    
    <h3>Semantic HTML</h3>
    <p>Using proper HTML elements for meaning...</p>
    
    <h4>Heading Structure</h4>
    <p>Creating logical document outlines...</p>
    
    <h4>Form Labels</h4>
    <p>Properly labeling form controls...</p>
    
    <h3>ARIA Attributes</h3>
    <p>When and how to use ARIA...</p>
  </section>
</article>

<article>
  <h1>The Importance of Web Standards</h1>
  
  <p>
    Web standards ensure that websites work consistently across different 
    browsers and devices. They provide a common foundation that developers 
    can rely on when building web applications.
  </p>
  
  <p>
    The World Wide Web Consortium (W3C) develops these standards through 
    a collaborative process involving browser manufacturers, developers, 
    and other stakeholders in the web community.
  </p>
  
  <p>
    By following web standards, developers can create websites that are:
  </p>
  
  <ul>
    <li>Accessible to users with disabilities</li>
    <li>Compatible across different browsers</li>
    <li>Maintainable and future-proof</li>
    <li>Optimized for search engines</li>
  </ul>
</article>

<!-- Unordered list for related items -->
<section>
  <h2>Required Skills for Web Development</h2>
  <ul>
    <li>HTML - Structure and semantics</li>
    <li>CSS - Styling and layout</li>
    <li>JavaScript - Interactivity and behavior</li>
    <li>Accessibility - Inclusive design</li>
  </ul>
</section>

<!-- Ordered list for sequential steps -->
<section>
  <h2>Setting Up a Development Environment</h2>
  <ol>
    <li>Install a code editor (VS Code, Sublime Text)</li>
    <li>Set up version control with Git</li>
    <li>Install Node.js for package management</li>
    <li>Configure your build tools</li>
    <li>Test your setup with a simple project</li>
  </ol>
</section>

<!-- Nested lists for hierarchical information -->
<section>
  <h2>Web Development Technologies</h2>
  <ul>
    <li>
      Frontend Technologies
      <ul>
        <li>HTML5</li>
        <li>CSS3
          <ul>
            <li>Grid Layout</li>
            <li>Flexbox</li>
            <li>Custom Properties</li>
          </ul>
        </li>
        <li>JavaScript ES6+</li>
      </ul>
    </li>
    <li>
      Backend Technologies
      <ul>
        <li>Node.js</li>
        <li>Python</li>
        <li>PHP</li>
      </ul>
    </li>
  </ul>
</section>

<!-- Glossary of terms -->
<section>
  <h2>Web Development Glossary</h2>
  <dl>
    <dt>API</dt>
    <dd>
      Application Programming Interface - a set of protocols and tools 
      for building software applications.
    </dd>
    
    <dt>DOM</dt>
    <dd>
      Document Object Model - a programming interface for HTML documents 
      that represents the page structure as a tree of objects.
    </dd>
    
    <dt>HTTP</dt>
    <dd>
      HyperText Transfer Protocol - the foundation of data communication 
      for the World Wide Web.
    </dd>
    
    <dt>CSS</dt>
    <dd>
      Cascading Style Sheets - a language used to describe the presentation 
      of a document written in HTML.
    </dd>
  </dl>
</section>

<!-- Product specifications -->
<section>
  <h2>Product Details</h2>
  <dl>
    <dt>Brand</dt>
    <dd>Apple</dd>
    
    <dt>Model</dt>
    <dd>MacBook Pro</dd>
    
    <dt>Screen Size</dt>
    <dd>14-inch</dd>
    <dd>16-inch</dd>
    
    <dt>Processor</dt>
    <dd>Apple M3 chip</dd>
    
    <dt>Memory Options</dt>
    <dd>8GB unified memory</dd>
    <dd>16GB unified memory</dd>
    <dd>32GB unified memory</dd>
  </dl>
</section>

<!-- FAQ Section -->
<section>
  <h2>Frequently Asked Questions</h2>
  <dl>
    <dt>How do I reset my password?</dt>
    <dd>
      Click the "Forgot Password" link on the login page, enter your 
      email address, and follow the instructions sent to your email.
    </dd>
    
    <dt>What payment methods do you accept?</dt>
    <dd>We accept Visa, MasterCard, American Express, and PayPal.</dd>
    
    <dt>How long does shipping take?</dt>
    <dd>Standard shipping takes 3-5 business days.</dd>
    <dd>Express shipping takes 1-2 business days.</dd>
  </dl>
</section>

<!-- Image with caption -->
<figure>
  <img src="web-accessibility-chart.png" 
       alt="Bar chart showing 15% increase in web accessibility compliance over the past year">
  <figcaption>
    Web accessibility compliance has increased by 15% over the past year, 
    according to WebAIM's annual survey.
  </figcaption>
</figure>

<!-- Code example with caption -->
<figure>
  <pre><code>
function calculateTotal(price, tax) {
  return price + (price * tax);
}

const total = calculateTotal(100, 0.08);
console.log(total); // 108
  </code></pre>
  <figcaption>
    Example of a JavaScript function that calculates the total price 
    including tax.
  </figcaption>
</figure>

<!-- Quote with attribution -->
<figure>
  <blockquote>
    "The best way to find out if you can trust somebody is to trust them."
  </blockquote>
  <figcaption>
    — <cite>Ernest Hemingway</cite>
  </figcaption>
</figure>

<!-- Table with caption -->
<figure>
  <table>
    <caption>Quarterly Sales Report</caption>
    <thead>
      <tr>
        <th>Quarter</th>
        <th>Revenue</th>
        <th>Growth</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Q1 2024</td>
        <td>$125,000</td>
        <td>+12%</td>
      </tr>
      <tr>
        <td>Q2 2024</td>
        <td>$140,000</td>
        <td>+18%</td>
      </tr>
    </tbody>
  </table>
  <figcaption>
    Revenue growth has been consistent throughout 2024, with Q2 showing 
    the highest growth rate.
  </figcaption>
</figure>

<article>
  <h1>Web Development Best Practices</h1>
  
  <p>
    When writing <abbr title="Cascading Style Sheets">CSS</abbr>, always 
    use <strong>semantic class names</strong> that describe the content's 
    purpose rather than its appearance. For example, use 
    <code>class="warning-message"</code> instead of 
    <code>class="red-text"</code>.
  </p>
  
  <p>
    <em>Performance optimization</em> is crucial for user experience. 
    The book <cite>"High Performance Web Sites"</cite> by Steve Souders 
    provides excellent guidance on this topic.
  </p>
  
  <p>
    Always validate your HTML using the <a href="https://validator.w3.org/">
    W3C Markup Validator</a>. Press <kbd>Ctrl+Shift+I</kbd> to open 
    developer tools in most browsers.
  </p>
  
  <p>
    <mark>Important:</mark> Never use inline styles in production code. 
    The <code>&lt;style&gt;</code> attribute should be avoided in favor 
    of external stylesheets.
  </p>
  
  <p>
    Web pages should load in under <time datetime="PT3S">3 seconds</time> 
    for optimal user experience. Studies show that users abandon sites 
    that take longer than this to load.
  </p>
  
  <p>
    The formula for calculating viewport width is: 
    <var>viewport-width</var> = <var>device-width</var> × 
    <var>device-pixel-ratio</var>
  </p>
</article>