正确使用section article和heading

Question

我为高级液体滑块编写了一些代码。但由于我的 header 滑块包含一些主要内容，例如 h-tags p-tags 和一些图像。我问自己 "can I consider each slide as an article"。因为我找不到正确的答案也许有人可以帮助我。问题是，我的代码是否正确嵌套并正确使用了语义元素。代码是：

 <header id="masthead" class="site-header" role="banner">
    <div id="main-slider" class="liquid-slider">    
            <article id="slider-1" class="liquid-slide-wrapper" style="background: url(images/back-99.jpg) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
                <section class="section-text-left">
                    <header>
                        <h1 class="title" style=" color:#f7740a; display:none;">Professionele, betaalbare website nodig?</h2>
                        <h2 style=" color:#fff; display:none;">Zelf uw website aanpassen?</h3>
                    </header>
                    <p style="display:none; color:#fff;">Onze unieke websites worden afgeleverd met een wordpress CMS systeem.<br>
                        Hiermee kan u zelf uw website aanpassen!<br> Vat de kudu bij de horens en contacteer ons voor meer info!
                    </p>
                    <p style="display:none;"><button type="button" class="btn btn-primary btn-lg">Mail Ons</button>&nbsp;<button type="button" class="btn btn-transparent btn-lg">0494 / 77 22 61</button></p>
                </section>
                <section class="section-img-right clearfix">
                    <img class="slider-img-right fadeInRight animated" style="display:none; width:100%; max-width:692px; height:auto;" src="images/imac.png" />
                    <img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/straf-webdesign.png" />
                    <img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/responsive-webdesign.png" />
                </section>      
            </article>
            <article id="slider-2" style="background: url(images/background-7.png) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
                <section class="section-text-left">
                    <header>
                        <h1 class="title" style=" color:#f7740a; display:none;">JustOnWeb wordt Kudu Concepts!</h2>
                        <h2 style="display:none; color:#000;">Een nieuwe naam, met een professionelere aanpak!</h3>
                    <header>
                    <p style="display:none; color:#fff;">Een website bestaat uit meer dan een lay-out. <br>Met kudu Concepts gaan we verder daar waar anderen stoppen!<br>
                        We bedenken een volledige filosofie voor uw website en <br> combineren dit met onze kennis van Online Marketing!
                    </p>
                </section>
            </article>
          </div>
</header>

Answer 1

根据此处的 W3School 语义：http://www.w3schools.com/html/html5_semantic_elements.asp

<节>包含<文章> 不建议在

和

中使用

根据 W3C，一个部分是 "a thematic grouping of content, typically with a heading."

< header > 位于 parent 元素之上，因此位于 body（header）之上，但也位于部分或文章或任何其他 div

在您的代码中：

应该与

接近而不是h2，

正确使用section article和heading

Correct use of section article and heading

html

css

slider

应该与

也是如此