mdn / developer-portal

The code that generates the MDN Web Docs Developer Portal.
Mozilla Public License 2.0
61 stars 38 forks source link

Landing page - Hero #1718

Closed schalkneethling closed 3 years ago

schalkneethling commented 3 years ago

The hero area contains duplicate content and can also be restructured in terms of the HTML structure.

Currently we have the following:

<header class="homepage-header visually-hidden">
  <h1>Build your future with the web - All of Mozilla's developer resources – in one place</h1>
</header>

Followed by:

<section class="c-primary-cta devportal-branding mzp-l-content">
    <div class="c-primary-cta-wrapper">
      <h2 class="c-primary-cta-title">Build your future with the web</h2>
      <h5 class="c-primary-cta-desc">All of Mozilla's developer resources – in one place</h5>  
  </div>
</section>

We have two options here:

<section class="c-primary-cta devportal-branding mzp-l-content" aria-labelledby="hero-heading">
  <hgroup id="hero-heading" class="c-primary-cta-wrapper">
    <h1 class="c-primary-cta-title">Build your future with the web</h1>
    <h2 class="c-primary-cta-desc">All of Mozilla's developer resources – in one place</h2>  
  </hgroup>
</section>

or

<div class="c-primary-cta devportal-branding mzp-l-content">
    <h1>Build your future with the web <span class="hero-subtitle">All of Mozilla's developer resources – in one place</span></h1>
</div>