Каков лучший семантический макет по умолчанию / начальный для HTML5? - PullRequest
Новая
       10

Каков лучший семантический макет по умолчанию / начальный для HTML5?

3 голосов
/ 26 мая 2010

Я немного запутался, как должны появиться новые теги.

Это правильно: 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<body>

    <section>
        <header>
            <nav></nav>
        </header>
        <section>

        </section>
        <footer>

        </footer>
    <section>

</body>
</html>

Или один из разделов должен быть <article>? Каким должен быть стартовый макет?

Ответы [ 6 ]

7 голосов
/ 26 мая 2010

У вас не должно быть начального макета для чего-либо внутри <body>.

Теги <article> и <section> не являются обязательными накладными расходами, которые вы должны заполнить , они предназначены для разделения высокоуровневых блоков разметки соответствующим образом для алгоритма выделения, если и когда тебе нужно сделать это. Если у вас есть только одна статья на вашей странице, что будет обычным делом, нет смысла заключать все это в <article>.

В настоящее время элементы <section> в вашем примере ничего не делают. Пока они вам не нужны, оставьте их.

(И, возможно, в любом случае, оставьте их в покое, пока не улучшится поддержка браузера. Для IE вам понадобится использовать HTML Shiv, чтобы заставить все это работать, и все еще есть проблемы с ним. Для большинства пользовательских случаев это просто Это пока того не стоит, из-за небольшого количества практической выгоды, которую оно приносит. Также, для валидности XML, измените HTML в типе документа на строчные, чтобы соответствовать фактическому корневому элементу.)

2 голосов
/ 26 мая 2010

ИМХО, я думаю, что вы должны отделить навигацию от заголовка, так как вы не всегда можете предположить, что панель навигации находится на вашем заголовке (что, если ваша панель навигации находится на стороне?)

Кроме этого, я думаю, что это хороший скелет для макета. (если вы не создаете сайт новостей или блог, я не думаю, что вы должны включать тег в свой основной макет

1 голос
/ 26 мая 2010

Это то, с чего я обычно начинаю: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/css/screen.css" rel="stylesheet" />
  </head>
  <body>

  </body>
</html>

Для простоты я использую тип документа HTML5 и более короткий набор символов и оставляю тело пустым, так как, возможно, я не работаю над «полным» проектом HTML5. То есть проект может потребовать, чтобы я избегал использования новых элементов секционирования HTML5, но это настраивает проект для более легкого перехода на более поздний срок и позволяет мне использовать несколько небольших преимуществ HTML5 (например, пропуская type в моей таблице стилей *). 1005 *).

Если вы все еще озадачены элементами секционирования, вот пара статей о section и article .

1 голос
/ 26 мая 2010

Я бы взглянул на Dive to HTML 5, в котором есть несколько примеров. Вот HTML4 блог и HTML5-ified версия того же контента.

Также есть глава о новых тегах семантической разметки.

1 голос
/ 26 мая 2010

То, что вы включаете, зависит от того, какой контент у вас есть. Конечно, вам не всегда нужны все теги семантических блоков. Лично я пока придерживаюсь своих <div> элементов, пока не перепишу свой сайт.

0 голосов
/ 26 мая 2010
...