All geek questions in one place

HTML5 - header, mast, branding, slider

I am trying to pull up HTML5 on the website that I am creating. Nav and the logo should be in the top bar, and I turn on the slider, quotation marks and some buttons. I’m not sure that the quote itself should contain a quote or buttons.

If not, do I really need a mast and branding section? It seems that meaning semantically includes both.

I have quite a few divs - should I replace them with a section?

Xmedia masthead

<header>

    <section id="masthead">
        <div id="branding" role="banner">
            <div class="topbar">
                <h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
                <h2 id="site-description">Enterprise Solutions</h2>
                <nav role="navigation">
                    <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
                    <ul id="dropmenu" class="menu">
                        <li></li>
                        <li></li>
                    </ul>
                </nav><!-- nav -->
            </div><!-- topbar -->
            <div id="slider">
                <div class="slide1"></div>
                <div class="slide2"></div>
                <div class="slide3"></div>
            </div><!-- slider -->
        </div><!-- #branding -->
    </section><!-- #masthead -->

    <div class="home_header">
        <h3>&quot;Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.&quot;</h3>
    </div><!--home header-->

    <div class="home_header_right">
        <a href="#"><img src="" alt="image" width="154" height="50" /></a>
        <a href="#"><img src="" alt="image" width="154" height="50"  /></a>
    </div>

</header><!-- Header -->
+3
source share
2 answers

I would like to correct some of Myles assumptions that seem wrong to me.

-, , - . HTML5 , , (un) , , ..

, - / (<div>) / (<section>, <article>, <nav> HTML5 ). ( <section>) <div>, . <section> , , , , ( , ).

<header> , , , , , , , , , . : <header> ( <footer>) <header> <footer> , <section> s, <nav> s, <h1>-<h6> .. <header> , "" (, ). , <h1>, <p>, <h1> <header> ( " The " ), .

HTML5 . - , .

<body>

<header>
    <div id="masthead"><!-- // this wrapper <div> is needless -->
        <div id="branding" role="banner">
            <div id="topbar" role="banner">
                <h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
                <p id="site-description">Enterprise Solutions</p>
                <nav role="navigation">
                    <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
                    <ul id="dropmenu" class="menu">
                        <li></li>
                        <li></li>
                    </ul>
                </nav>
            </div><!-- #topbar -->
            <section id="slider">
                <div class="slide1"></div>
                <div class="slide2"></div>
                <div class="slide3"></div>
            </section><!-- #slider -->
        </div><!-- #branding -->
    </div><!-- #masthead -->
    <!-- // ⇩ The following part ⇩ still introduces the page (actually the whole brand) and includes some important quick links, I would leave that in <header> -->
    <section id="home_header"><!-- // in some cases, <aside> could be used instead, but here this section conveys one of the main messages of the page – a description of the brand -->
        <blockquote>
             Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.
        </blockquote>
        <footer>
            <p class="signature">-John Selena CEO xMedia</p>
        </footer>
    </section><!-- #home header -->
    <section id="home_header_right"><!-- // could be <aside> too, but I guess the links are not expendable and form a part of the major navigation-->
        <nav role="navigation">
            <a href="#"><img src="" alt="image" width="154" height="50" /></a>
            <a href="#"><img src="" alt="image" width="154" height="50"  /></a>
        <nav>
    </section><!-- #home_header_right -->
    <!-- // ⇧ ------------------ ⇧ -->
</header>

<section id="main">
    ...
</section><!-- #main -->

<footer>
    ...
</footer>

</body>

, W3C - . / , , .

EDIT: <hgroup>, , ( - - , <hgroup>), , , .

html5 , , , ( , ). , W3C .

+8

:

Section , .

, , .

div , , div , /, a Section.

:

header , , , header, div.

:

, , :

<div class="home_header">
        <h3>&quot;Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.&quot;</h3>
    </div><!--home header-->

:

    <header class="home_header">
        <h3>&quot;Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.&quot;</h3>
    </header><!--home header-->

, div.

<header> , .

Hgroup :

:

<h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
<h2 id="site-description">Enterprise Solutions</h2>

header hgroup :

<header>
<hgroup>    
<h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
<h2 id="site-description">Enterprise Solutions</h2>
</hgroup>
</header>

:

:

<div id="top-wrap">

<div id="masthead">
    <div id="branding" role="banner">
        <div class="topbar">
            <header>
                <hgroup>    
                    <h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></h1>
                    <h2 id="site-description">Enterprise Solutions</h2>
                </hgroup>
            </header>
            <nav role="navigation">
                <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
                <ul id="dropmenu" class="menu">
                    <li></li>
                    <li></li>
                </ul>
            </nav><!-- nav -->
        </div><!-- topbar -->
        <div id="slider">
            <div class="slide1"></div>
            <div class="slide2"></div>
            <div class="slide3"></div>
        </div><!-- slider -->
    </div><!-- #branding -->
</div><!-- #masthead -->

<header class="home_header">
    <h3>&quot;Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.&quot;</h3>
</header><!--home header-->

<div class="home_header_right">
    <a href="#"><img src="" alt="image" width="154" height="50" /></a>
    <a href="#"><img src="" alt="image" width="154" height="50"  /></a>
</div>

, , ( " Section, blah blah blah" ). , !

:

+7

Source: https://habr.com/ru/post/1795091/

More articles:


All Articles