HTML5 语义标记帮助

发布于 2024-12-01 09:46:49 字数 1417 浏览 0 评论 0原文

我刚刚开始一个新的应用程序。下面是我的任务的基本模型。我刚开始使用 HTML5 进行语义标记，因此我需要一些反馈/帮助。

我想了解如何/在何处使用

和

等内容

<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>

    <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>

在此处输入图像描述

原文

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>

    <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>

enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单身情人 2024-12-08 09:46:49

避免不必要的 Div。
使用时间标签而不是 Div 作为时间元素。

如果您没有任何可引用的内容（例如输入），请避免使用标签。

选定的应用程序名称

 TIME GOES HERE

    
        
    

    用户名 


    

<页脚>
    
        版本号在这里
    
    <导航>
        
            
                常见问题解答

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>

回复收藏 0 原文