Skip to content

PROJECT_AUDIT.md

Latest commit

 

History

History
240 lines (160 loc) · 9.99 KB

PROJECT_AUDIT.md

File metadata and controls

240 lines (160 loc) · 9.99 KB
Raw

Аудит проекта: Duckett 2011 -> HTML 2026

Цель аудита - помочь новичку отличать вечную базу HTML от устаревших приемов, которые встречаются в примерах книги 2011 года.

Итог

Проект полезен как учебная коллекция: в нем есть структура документа, текст, списки, ссылки, изображения, таблицы, формы, CSS, layout и HTML5-семантика. Но новые страницы в 2026 году нужно писать не буквально по всем примерам, а с поправками на современный HTML.

Лучший режим работы:

  1. Сначала изучать GUIDE.md и modern-html-2026/index.html.
  2. Затем открывать старую главу Duckett.
  3. Искать, что в ней остается актуальным.
  4. Сравнивать с этим аудитом.
  5. Переписывать пример современным способом.

Что в проекте остается актуальным

  • Базовая структура документа: html, head, title, body.
  • Заголовки, абзацы, списки, цитаты, смысловые текстовые элементы.
  • Ссылки и якоря.
  • Изображения с src и alt.
  • Таблицы для табличных данных.
  • Формы как основа пользовательского ввода.
  • Разделение HTML и CSS.
  • Box model, cascade, inheritance.
  • Семантические элементы header, nav, article, section, aside, footer.

Что устарело или опасно повторять

Где встречается Что не так Современная замена
chapter-02/abbreviations.html <acronym> устарел Используй <abbr>
chapter-05/* align у изображений CSS: float, display, margin, Flexbox/Grid
chapter-06/* border, bgcolor, width, cellpadding, cellspacing у таблиц CSS + семантика caption, scope, thead, tbody
chapter-07/* XHTML-слэши, не всегда есть label, мало autocomplete Явные label, name, type, autocomplete, современная валидация
chapter-09/* Flash, .swf, .flv, swfobject <video>, <audio>, <source>, <track>
chapter-09/multiple-audio-sources.html autoplay у audio Не включать звук автоматически
chapter-10 ... chapter-16 type="text/css" в style/link В HTML это обычно не нужно
chapter-12/fonts/* EOT/SVG/TTF как основной набор web fonts Обычно woff2, иногда woff fallback
chapter-15/* float как layout-система Flexbox и CSS Grid
chapter-15/css/960_12_col.css фиксированная 960px-сетка responsive layout: Grid, Flexbox, minmax, media/container queries
chapter-17/example.html html5shiv для старого IE Не нужен в современном проекте
chapter-17/example.html text-indent: -9999px для скрытия текста Нормальный видимый текст, alt, или аккуратный visually-hidden паттерн

Глава за главой

Chapter 1. Structure

Учить обязательно. Добавить современно:

  • <!doctype html> в нижнем регистре тоже нормален.
  • lang на html.
  • meta charset="utf-8".
  • meta viewport.

Chapter 2. Text

Учить семантику текста. Исправить привычку:

  • Вместо <acronym> использовать <abbr>.
  • <b> и <i> не запрещены, но понимать разницу с <strong> и <em>.

Chapter 3. Lists

Актуально. Дополнить:

  • ol можно использовать с start, reversed, type, но не ради дизайна.
  • dl подходит не только для словарей, но и для пар "термин - описание".

Chapter 4. Links

Актуально. Добавить:

  • Для target="_blank" использовать rel="noopener".
  • Текст ссылки должен быть понятен.
  • download использовать только когда действительно нужно скачивание.

Chapter 5. Images

База актуальна, но оформление через HTML устарело.

Добавить:

  • width и height для стабильного layout.
  • loading="lazy" для неключевых изображений ниже первого экрана.
  • srcset, sizes, picture для responsive images.
  • alt="" для декоративных изображений.

Chapter 6. Tables

Таблицы актуальны только для данных.

Добавить:

  • caption.
  • scope="col" и scope="row".
  • CSS вместо HTML-атрибутов оформления.

Chapter 7. Forms

Очень актуальная глава, но требует модернизации.

Добавить:

  • label для каждого поля.
  • autocomplete для email, name, password, one-time-code.
  • inputmode для мобильной клавиатуры.
  • required, minlength, pattern, min, max, step.
  • Серверная проверка обязательна даже при HTML-валидации.

Chapter 8. Extra Markup

Актуально, особенно id, class, meta, iframe.

Добавить:

  • main как главный landmark.
  • title у iframe.
  • loading="lazy" у тяжелых iframe ниже первого экрана.
  • осторожность с tabindex.

Chapter 9. Flash, Video & Audio

Flash больше не учить как рабочую технологию.

Учить:

  • video.
  • audio.
  • source.
  • track для субтитров.
  • без автозапуска звука.

Chapter 10. Introducing CSS

Актуально как вход в CSS. Но в HTML-проекте помнить:

  • CSS лучше в отдельном файле.
  • type="text/css" обычно не нужен.
  • HTML не должен описывать визуальное оформление.

Chapter 11. Color

Это CSS-тема, актуальна. Добавить:

  • контраст текста;
  • не передавать смысл только цветом.

Chapter 12. Text

CSS-тема, актуальна частично.

Обновить:

  • основной формат web fonts - woff2;
  • использовать font-display: swap;
  • не строить обучение вокруг EOT/SVG font fallback.

Chapter 13. Boxes

Актуально.

Добавить:

  • глобальный box-sizing: border-box;
  • избегать фиксированных высот для живого контента.

Chapter 14. Tables, Lists & Forms

Актуально как CSS-практика.

Добавить:

  • не убирать outline без полноценной замены;
  • делать состояния :focus-visible;
  • ошибки формы показывать текстом.

Chapter 15. Layout

Исторически полезно, но не как основной современный layout.

Учить как историю:

  • float layout;
  • fixed width layout;
  • 960.gs.

Учить для новых проектов:

  • Flexbox;
  • CSS Grid;
  • responsive layout;
  • media queries;
  • container queries как следующий шаг после базы.

Chapter 16. Images

Актуально частично.

Добавить:

  • responsive images в HTML;
  • SVG для иконок;
  • оптимизацию форматов изображений;
  • CSS background только для декоративных изображений.

Chapter 17. HTML5 Layout

Семантика актуальна.

Устарело:

  • html5shiv;
  • CSS display: block для HTML5-элементов ради старого IE;
  • старые способы скрывать текст логотипа.

Добавить:

  • main;
  • доступную навигацию;
  • правильную структуру заголовков.

Решение по модернизации проекта

Я не переписываю все оригинальные примеры книги поверх старых файлов, потому что это уничтожило бы учебную ценность сравнения "как было в 2011" и "как писать в 2026". Вместо этого проект получает современный слой:

  • index.html - новый стартовый экран проекта.
  • Readme.md - маршрут обучения.
  • GUIDE.md - главный учебник.
  • HOW_TO_STUDY_HTML_2026.md - инструкция прохождения учебника.
  • HTML_ELEMENTS_2026.md - полный справочник элементов с расшифровкой названий.
  • modern-html-2026/index.html - практический современный стенд.
  • modern-html-2026/course.html - полный пошаговый курс простым языком.
  • modern-html-2026/reference.html - справочник тегов с примерами.
  • modern-html-2026/examples.html - готовые современные шаблоны.
  • modern-html-2026/practice-profile.html - пример первой полноценной страницы.
  • PROJECT_AUDIT.md - этот аудит.

Так новичок видит и историю, и современную норму.