Как semantic X / HTML может сэкономить время, когда мы будем писать CSS?

Question

Как семантическая разметка X / HTML может сэкономить время -

1. когда мы напишем CSS для веб-сайта
2. и если никаких конструктивных изменений исходит от клиент в будущем.
3. И почему макеты на основе таблиц будут занимать больше времени всегда в обоих состояниях

Сегодня я должен объяснить эти вещи студентам.

У меня есть несколько примеров, но я хочу еще несколько хороших примеров и идей, которые можно было бы красиво объяснить.

Я хочу объяснить, в чем заключаются преимущества семантической разметки X / HTML с точки зрения разработчиков.

Заранее благодарю

Обновить:

Преимущества использования семантической разметки:

1. Он будет хорошо читаем для людей, просматривающих документ в среде, где CSS не может быть применен.
2. Веб-разработчикам будет намного проще поддерживать код и отделять контент (HTML) от презентации (CSS).
3. Семантическая разметка может в некоторых случаях уменьшить потребности в селекторах css group .

Answer 1

Из моего опыта работы:Мне уже несколько раз приходилось просматривать унаследованную разметку от моего предшественника или от совершенно других людей (и на самом деле один или два раза от меня самого).Иногда у меня было только то, что получалось в результате просмотра исходного кода в браузере.Мои выводы на данный момент были следующими:

• Если автор использовал семантическая разметка насколько это возможно, вместе с понятными и логичными названиями классов было действительно легко и увлекательно разобраться в структуре страницы и, например, закодировать новый виджет или реструктурировать расположение столбцов или прочее

• Если автор использовал основанный на таблице макет, и у меня также были материалы конца 90-х, на которые можно было посмотреть, - это полный беспорядок.Вы должны выяснить, какая строка таблицы что делает, какая ячейка таблицы где находится, и если вы начинаете думать, что у вас все получится, то вы упустили из виду rowspan="3" 300 строк разметки ранее.Даже в Firebug вы можете сойти с ума от такого супа с тегами.

  Добавление сюда новых материалов может стать довольно рискованным занятием.Если вы добавляете содержимое в ячейку таблицы и не исправляете полностью ширину и высоту нового материала, вы можете столкнуться с неприятными пробелами по всей странице и забыть открыть или закрыть <td>s где-то (при 200 ошибках проверки на исходной странице вы, вероятно, что-то где-то пропустите) может привести к полностью искаженному просмотру.

• Если автор использовал разделы и промежутки повсюду, но не делал семантическую разметку (то есть не писал <div class="header1"/> вместо того , чтобы <h1/>), это все еще намного лучше, чем макет таблицы (максимум из-за упомянутых rowspan и colspan и потому, что у вас есть шанс, что страница может не полностью развернуться, если есть </div> где-то отсутствует), но вы все равно можете сойти с ума от такой разметки, как

  </div></div>
  </div>
     </div>
    </div>
  </div></div>
    </div>
  

  Кроме того, если бы у меня была сопутствующая таблица стилей, это тоже было бы в основном полным беспорядком.Проводя различие между .header, .header1, div.header_level1 и #middle .h1 заставляет вас переключаться между таблицей стилей и разметкой.

Answer 2

Главным преимуществом, помимо более надежного и контролируемого кода, для разработчиков является понятный код.С помощью написания semantic XHTML вы можете избежать написания расплывчатого кода, который в будущем будет трудно расшифровать другим разработчикам или вам самим.

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

Answer 3

1. мы впервые напишем CSS для веб-сайта

Каждый веб-сайт имеет разный внешний вид / макет, вы должны написать css для него в первый раз, если только между вашими макетами нет некоторого сходства.

2. и если в будущем клиент внесет какие-либо изменения в дизайн.

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

3. И почему на основе таблиц, займет больше времени и всегда в состояние

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