Действительно ли лучше сделать сайт без использования <div>, используя только семантические теги? - PullRequest
Новая
       15

Действительно ли лучше сделать сайт без использования <div>, используя только семантические теги?

4 голосов
/ 08 марта 2010

Я нашел это в сети в поиске Google

и статью смотрите здесь: http://www.thatcssguy.com/limit-your-divs/

См. Его окончательный макет здесь: http://www.nodivs.com/

Некоторые цитаты из статьи

1

Когда я ограничил использование моих div'ов всеми основной браузер, включая IE6 и IE7 сделает сайты почти в совершенстве. Или с очень небольшими исправлениями необходимо.

2

это волшебство, но оно доказывает, что нет ни таблицы, ни таблицы необходимы для разметки

Должны ли мы попытаться создать такие сайты?

Ответы [ 3 ]

9 голосов
/ 08 марта 2010

В статье есть несколько хороших советов о том, как избежать «дивитизма», то есть использования элементов div, где будет семантически более подходящий элемент. Но это:

Когда я ограничил использование моих div-ов, все основные браузеры, включая IE6 и IE7, отображали сайты почти идеально. Или с очень небольшими исправлениями.

- это полная чушь. DIVs являются совершенно допустимыми элементами контейнера и имеют смысл во многих ситуациях. Только там, где есть семантически более подходящий элемент (например, ul в неупорядоченном списке, таком как меню, h1 h2 h3 для заголовков, ol для упорядоченных списков), неправильно использовать div , как правило, неправильно использовать table для макета.

То, что делает автор сайта, о котором вы упомянули, явно злоупотребляет другими элементами, такими как dl (списки определений), в качестве суррогатов элементов div, что столь же идиотично, как и использование div s в качестве суррогатов для ul ol и т. Д. Посмотрите на определение W3C списков ul, ol и dl и убедитесь сами, должны ли эти элементы выполнять задачи макета, как их использует автор. .

Насколько я вижу, намеки на то, что не использование div s каким-то образом делает сайты лучше, кросс-браузер - это полная хулиганка. Поправь меня, если я ошибаюсь, но я не могу вспомнить ни одного случая, когда это верно.

3 голосов
/ 08 марта 2010

Он считает необходимым использовать стили для элементов вместо того, чтобы автоматически заключать их в div: 

<ul class="navList">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

вместо 

<div class="navList">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
</div>

Он потерял меня, хотя, когда использовал абсолютное позиционирование, чтобы наложить h1 на h2, чтобы создать свой заголовок.

Поддерживаемость так же важна, как и чистый код. Когда я вижу div с именем "header", я знаю, что это в отличие от этого: 

   <h1 class="border"><a href="#" id="logo">Welcome to NoDivs.com</a></h1>

    <h2 class="border">Contact NoDivs.com <span>1-888-1485</span></h2>

И он не практикует то, что проповедует. Любой, кто использует div "spacer" для добавления отступов между div, не должен говорить об опасностях divitis. :)

1 голос
/ 08 марта 2010

Вы цитируете статью, но в комментариях сам автор заявляет:

Неиспользование DIV приводит к тому, что сайты становятся более надежными для кросс-браузеров. Вы удаляете в коде элемент, который может быть источником некорректного отображения браузера. Удалите переменные, и вы увидите меньше проблем.

Итак: переключение div для заголовков не меняет надежности рендеринга (статья подразумевает, что, но автор не подразумевает этого), но удаление ненужных вложенных элементов div помогает этому, но как хороший макет HTML вы всегда должны делать что;)

Просто имейте в виду, что вы должны по возможности предотвращать Divitis , а использование семантически правильной разметки поможет вашим усилиям по SEO и доступности, а также карме и прочим.

EDIT:

Хорошо, как все знают, дивит это плохо. Давайте посмотрим на разметку статьи: 

<body>
    <div id="page">
        <div id="header">
            <h1 id=logo">(some stuff)</h1>
            <ul id="nav1">navi</ul>
        </div>
        <div id="columns">
            (Content)
        </div>
        <div class="box6">
             <div class="top"></div>
             <div class="spacer">                 
                 <div class="col3">
                 </div>
                 <div class="col3">
                 </div>
                 <div class="col3 last">
                 </div>
                 <br class="fix">
             </div>
             <div class="bot"></div>
         </div>

        <div id="footer">
            (Footer Content)
        </div>
    </div>
    (Script tags)
</body>

Давайте посмотрим: <div id="page">, чтобы центрировать страницу с margin: 0 auto;. Примените этот стиль к <body>, и вы можете удалить один div. Все содержимое <div class="box6"> не совсем чистое от div и абсолютно не нужно. А в остальном: смотрите сами.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...