Лекция по валидности верстки

Jul 29, 2024

Лекция по валидности верстки

Введение

  • Преподаватель обращается к аудитории.
  • Уровень вопросов — продвинутый.
  • Важно понимать валидность верстки для избежания сюрпризов в будущем.

Основные понятия валидности верстки

  • Валидность важна для корректного отображения в разных браузерах и операционных системах.
  • Проверка валидности с помощью валидаторов (например, апплидатора Wrec).

Примеры разметки и валидности

Пример 1: Ошибки с айдишниками

  • Вопрос: Является ли данная разметка правильной?
    • Ошибка: повторяющиеся айдишники на одной странице.

Пример 2: Блочные и инлайн теги

  • Вопрос: Является ли данная разметка правильной?
    • Ошибка: блочные теги внутри инлайн тегов (P внутри SPAN).
  • Решение: Изменить порядок тегов для валидности.

Пример 3: Формы

  • Вопрос: Является ли данная разметка правильной?
    • Ошибка: вложение формы внутри другой формы.
    • Важный момент: Вложенные формы игнорируются браузером.

Заголовки H1

Вопрос: Может ли быть несколько H1 на странице?

  • Краткий ответ: да, валидатор не выдает ошибок.
  • Влияние на SEO:
    • HTML5 изменил правила: структура зависит от корневого и секционных тегов.
    • Для SEO: один H1 на корневом уровне; подзаголовки H1 внутри секционных тегов допустимы.

Использование нескольких тегов Header и Footer

  • На странице может быть много тегов header и footer, если это оправдано
  • Вложение header и footer друг в друга запрещено.

Верстка email рассылок

  • Обычно используется HTML 4, так как многие почтовые клиенты не поддерживают HTML5.

Правильная разметка секций

  • Вложение arctical и section допустимо, но порой валидатор требует заголовков внутри секций.

Pseudoclass и Селекторы

  • Использование псевдокласса not для исключения классов из селектора.

Метатег для SEO

  • Метатег description отвечает за описание страницы в поисковых системах.

Ограничение по свойству overflow

  • При изменении свойства на оси X, ось Y автоматически становится hidden.

Дата атрибуты

  • Позволяют хранить дополнительную информацию о HTML-элементах и использовать ее через CSS и JavaScript.

Оптимизация загрузки изображений

  • Способы оптимизации:
    1. Использовать правильные форматы изображений.
    2. Адаптивные изображения.
    3. Ленивую загрузку изображений с помощью атрибута loading.

Корректировка кодировки в CSS

  • Правило @charset указывает кодировку символов в CSS файле. Рекомендуется использовать для избежания ошибок.

Заключение

  • Преподаватель ободряет студентов ставить лайки и делиться мнением.
  • Обещание новых видео.