HTML5 семантическая помощь по разметке - PullRequest
Новая
       22

HTML5 семантическая помощь по разметке

1 голос
/ 26 августа 2011

Я только запускаю новое приложение. Ниже приведен базовый макет того, что мне поручено делать. Я новичок в использовании HTML5 для моей семантической разметки, поэтому я хотел бы получить некоторую обратную связь / помощь.

Я бы хотел понять, как / где использовать такие вещи, как <nav> и <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

Ответы [ 2 ]

3 голосов
/ 26 августа 2011
  • Избегайте ненужных дел.
  • Используйте метку времени вместо Div для элемента времени.

  • Избегайте меток, если вам тоже не на что ссылаться, например, на вход.

    Выбранное имя приложения 
        <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>
1 голос
/ 27 августа 2011

В дополнение к прекрасному ответу @Simon Arnold, я также могу предположить, что использование <nav> неверно.Отдельную ссылку в нижнем колонтитуле вряд ли можно рассматривать как «основной блок навигации».См. Первое примечание в зеленом тексте на http://dev.w3.org/html5/spec/sections.html#the-nav-element

...