开发者

HTML5 Semantic mark up help

开发者 https://www.devze.com 2023-03-31 15:37 出处:网络
I\'m just starting a new app. Below is a basic mockup of what I am tasked to do. I\'m new to using HTML5 for my semantic markup so I\'d like some feedback/help.

I'm just starting a new app. Below is a basic mockup of what I am tasked to do. I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.

I'd like to understand how/where to use things like <nav> and <section>

<div id="container">
    <header>

    <div id="appInformation">
      <a href="#" alt="Home">
        <img src="">
      </a>

      <span>Selected AppName</span>
    </div>

    <div>
        <span id="time">TIME GOES HERE</span>
    </div&g开发者_StackOverflow社区t;

    <div>
      <a href="#" alt="Additional Information">
        <img src=""><!-- This is will be the location of the the 'i'-->
      </a>
    </div>

    <div class="">
      <label>UserName</label>
    </div>  

    </header>
    <div id="main">
        <!-- main content for the selected app here -->
    </div>

    <footer>

        <div id="appVersion">
            VERSION # HERE
        </div>

        <nav>
            <ul>
                <li>
                    <a href="#">FAQ</a>
                </li>
            </ul>
        </nav>

        <div id="">
            <!-- Team logo here-->
        </div>

    </footer>

HTML5 Semantic mark up help


  • Avoid unacessary Div.
  • Use the Time Tag instead of Div for Time Element.
  • Avoid Label if you don't have anything to refer too, like an input.

    Selected AppName
        <time datetime="YYYY-MM-DD">TIME GOES HERE</time><!--  Don't need an id Time since you can target the Time tag -->
    
        <a href="#" alt="Additional Information">
            <img src=""><!-- This is will be the location of the the 'i'-->
        </a>
    
        <em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
    </header>
    <div id="main">
        <!-- main content for the selected app here -->
    </div>
    <footer>
        <div id="appVersion">
            VERSION # HERE
        </div>
        <nav>
            <ul>
                <li>
                    <a href="#">FAQ</a>
                </li>
            </ul>
        </nav>
    
        <a href="yourTeamUrl" id="">
            <!-- Team logo here-->
        </a>
    </footer>
    


In addition to @Simon Arnold's fine answer, I might also suggest that the <nav> usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号