Related Articles markup: Production vs Recommended

related_articles_html5.html

<!-- Current -->

<section class="inline-related-bar has-spacing clearfix is-standard">
    <div class="inline-related-bar__wrapper">
        <h2 class="inline-related-bar__header">Related</h2>
        <div class="inline-related-bar__items-wrapper clearfix">
            <div class="inline-related-bar__items clearfix">

                <section class="inline-related-item js-enhanced is-three-by is-in-bar js-tracking js-viewed">
                    <div class="inline-related-item__wrapper">
                        <h4 class="inline-related-item__header">related</h4>
                        <a href="#" data-ga-stuff="">
                            <figure>
                                <picture class="picture ">
                                    <img src="" alt="" data-pin-nopin="true">
                                </picture>
                            </figure>
                            <hgroup class="inline-related-item__headers">
                                <h5 class="inline-related-item__title">Article Title 1</h5>
                            </hgroup>
                        </a>
                    </div>
                </section>

                <section class="inline-related-item js-enhanced is-three-by is-in-bar js-tracking js-viewed">
                    <div class="inline-related-item__wrapper">
                        <h4 class="inline-related-item__header">related</h4>
                        <a href="#" data-ga-stuff="">
                            <figure>
                                <picture class="picture ">
                                    <img src="" alt="" data-pin-nopin="true">
                                </picture>
                            </figure>
                            <hgroup class="inline-related-item__headers">
                                <h5 class="inline-related-item__title">Article Title 2</h5>
                            </hgroup>
                        </a>
                    </div>
                </section>

                <section class="inline-related-item js-enhanced is-three-by is-in-bar js-tracking js-viewed">
                    <div class="inline-related-item__wrapper">
                        <h4 class="inline-related-item__header">related</h4>
                        <a href="#" data-ga-stuff="">
                            <figure>
                                <picture class="picture ">
                                    <img src="" alt="" data-pin-nopin="true">
                                </picture>
                            </figure>
                            <hgroup class="inline-related-item__headers">
                                <h5 class="inline-related-item__title">Article Title 3</h5>
                            </hgroup>
                        </a>
                    </div>
                </section>

            </div>
        </div>
    </div>
</section>


<!-- Recommended -->

<section class="inline-related__wrapper inline-related__wrapper--1x3">
    <h3>Related</h3>

    <article class="inline-related__item js-enhanced">
        <a href="#" data-ga-stuff="">
            <picture>
                <img src="" alt="" data-pin-nopin="true">
            </picture>
            <h4>Article Title 1</h4>
        </a>
    </article>

    <article class="inline-related__item js-enhanced">
        <a href="#" data-ga-stuff="">
            <picture>
                <img src="" alt="" data-pin-nopin="true">
            </picture>
            <h4>Article Title 2</h4>
        </a>
    </article>

    <article class="inline-related__item js-enhanced">
        <a href="#" data-ga-stuff="">
            <picture>
                <img src="" alt="" data-pin-nopin="true">
            </picture>
            <h4>Article Title 3</h4>
        </a>
    </article>

</section>